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O'Reilly Media,Inc. 介 绍 


O'Reilly Media 通 过 图 书 、 杂 志 、 在 线 服务 、 调 查 研究 和 会 议 等 方式 传 
播 创新 知识 。 自 1978 年 开始 ，O'Reilly 一 直 都 是 前 沿 发 展 的 见证 者 和 推 
动 者 。 超 级 极 客 们 正在 开创 着 未 来 ， 而 我 们 关注 真正 重要 的 技术 趋势 
通过 放大 那些 “细微 的 信号 ?来 刺激 社会 对 新 科技 的 应 用 。 作 为 技 
en 


O'Reilly 为 软件 开发 人 员 融 来 草 命 性 的 “动物 书 ”， 创 建 第 一 个 商业 网 站 
(GNN) ; 组 织 了 影响 深远 的 开放 源 代码 峰会 ， 以 至 于 开源 软件 运动 
以 此 命名 ; 创立 了 Make 杂 志 ， 从 而 成 为 DIY 章 命 的 主要 先锋 ， 公 司 一 
如 既往 地 通过 多 种 形式 缔结 信息 与 人 的 纽带 。O'Reilly 的 会 议和 峰会 集 
到 了 众多 超级 极 客 和 高 瞻 远 肪 的 商业 领袖 ， 共 同 描绘 出 开创 新 产业 的 
命 性 思想 。 作 为 技术 人 士 获取 信息 的 选择 ，OReilly 现 在 还 将 先锋 专 
家 的 知识 传递 给 普通 的 计算 机 用 户 。 无 论 是 通过 书籍 出 版 ， 在 线 服 务 
或 者 面授 课程 ， 每 一 项 OReilly 的 产品 都 反映 了 公司 不 可 动 播 的 理念 
信息 是 激发 创新 的 力量 。 


业界 评论 


“O'Reilly Radar 博 客 有 口 丝 碑 。” 


Wired 


“O'Reilly 和 凭借 一 系列 (真希 望 当初 我 也 想到 了 ) 非凡 想法 建立 了 数 百 
万 美元 的 业务 。” 


Business 2.0 


“O'Reilly Conference 是 内 集 关 键 思想 领袖 的 绝对 典范 

——CRN 
“一 本 O'Reilly 的 书 束 代 表 一 个 有 用 、 有 前 途 、 需 要 学 习 的 主题 。” 
Irish Times 
“Tim 是 位 符 立 独行 的 商人 ， 他 不 光 放 眼 于 最 长 远 、 最 广阔 的 视野 并 且 
切实 地 按照 Yogi Berra 的 建议 去 做 了 :如果 你 在 路 上 过 到 谷 路 口 ， 走 


小 路 ( 贫 路 ) 。' 回 顾 过 去 Tim 似 乎 每 一 次 都 选择 了 小 路 ， 而 且 有 几 次 
都 是 一 闪 即 逝 的 机 会 ， 尽 管 大 路 也 不 错 。” 


Linux Journal 


译 着 序 


从 1996 年 以 来 ，《JavaScript 权 威 指南 》 已 经 成 为 JavaScript 程 序 员 公认 
的 《圣经 》。 该 书 凭 借 着 完整 的 内 容 、 细 致 的 讲解 以 及 大 量 针对 性 的 
示例 而 受到 读者 的 一 贯 好 评 ， 十 多 年 来 一 直 畅 销 不 彭 。JavaScript 之 父 
Brendan Eich 对 它 如 是 评价 : “本 书 是 JavaScript 程 序 员 的 必 备 参考 ..……. 
内 容 组 织 得 很 好 ， 而 且 非 常 详细 。” 


作为 JavaScript 最 经 典 的 工具 书 ， 它 的 历次 改版 见证 了 Web 发 展 的 历程 
与 深刻 变革 : 从 玩具 式 的 “ 轻 脚 本 ”到 革命 性 的 Ajax， 从 传统 的 时 面 系 
统 到 新 潮 的 手持 终端 ， 从 风靡 一 时 的 类 库 到 现在 主流 当道 的 Web 富 应 
用 开发 ， 从 纯 浏 唤 器 脚本 语言 到 面向 服务 器 端的 JavaScript..…….…… 
HTML5、CSS3、jQuery 和 NodeJS 等 新 技术 的 出 现 进 一 步 丰 富 了 Web 前 
问 开 发 的 内 闸 ， 而 本 书 第 6 次 改版 则 是 一 场 及 时 雨 ， 系 统 翔实 地 收 永 了 
五 年 来 前 端 技术 的 这 些 变革 ， 并 提供 了 大 量 的 实例 ， 可 以 边 学 边 用 ， 
， 前 儿 版 的 “学 术 气 质 *， 是 JavaScript 和 前 端 开 发 领域 不 可 多 
得 的 佳作 。 


本 书 第 6 版 涵盖 了 HTML5 和 ECMAScript 5， 很 多 章节 完全 重 写 ， 增 加 
了 当今 Web 开 发 的 最 佳 实践 的 内 容 ， 新 增 的 章节 包括 jQuery、 服 务 器 
端 JavaScript、 图 形 编程 以 及 JavaScript 式 的 面 癌 对 象 。 本 书 第 6 版 不 仪 
适合 初学 者 系统 学 习 ， 而 且 适 合 有 经 验 的 JavaScript 开 发 者 随手 翻阅 。 


淘宝 前 站 团队 非常 采 幸 地 承担 这 本 大 厚 书 的 翻译 任务 。 本 书 书 名 为 
《JavaScript 权 威 指南 (第 6 版 ) 》， 我 们 作为 译 者 深 知 目 己 知识 面 有 
限 ， 难 达到 “权威 ”的 高 度 ， 所 以 翻译 过 程 难 免 疏 漏 。 但 不 管 怎 样 ， 这 
项 任务 是 一 种 采 誉 ， 更 是 一 种 责任 。 本 次 翻译 共有 7 位 译 者 ， 李 品 ( 拨 
赤 ) 、 张 散 集 (一 舟 ) 、 吴 英杰 〈 季 札 ) 、 赵 静 ( 澄 阐 ) 、 陈 成 〈 云 
谦 ) 、 王 保平 〈 玉 伯 ) 和 好 学 〈 三 七 ) 。 感 谢 赵 泽 欣 (小 马 ) 为 促成 
本 次 翻译 做 出 的 努力 。 此 外 为 了 保证 翻译 质量 ， 我 们 还 邀请 了 热心 网 
友 来 参与 部 分 革 市 的 校对 ， 尤 其 是 杨 明 明 、 孙 博 、 朱 琦 三 位 读者 为 本 
书 关 键 章 世 提出 了 中 肯 的 修改 意见 ， 非 常 感谢 他 们 。 最 后 要 特别 感谢 
机 械 工 业 出 版 社 华章 公司 的 陈 喜 康 老 师 和 谢 晓 施 编 辑 ， 不 仅 容 入 我 们 
再 三 推迟 交 稿 ， 还 不 断 或 励 我 们 "多 人 花 些 时 间 来 保证 质量 ”。 在 此 对 上 
述 各 位 同学 和 老师 致 以 深 深 的 感谢 。 


淘宝 前 端 团 队 


腹 呈 


本 书 要 讲述 的 内 容 泗 盖 J avaScript 语 言 本 身 ， 以 及 Web 浏 览 絮 所 实现 的 

JavaScript API1。 本 书 更 适合 有 一 定编 程 经 验 的 人 阅读 。 对 于 那些 希望 

学 习 JavaScript 和 已 经 开始 使 用 JavaScript 的 程序 员 来 说 ， 如 果 想 让 目 己 
对 JavaScript 语 言 和 和 Web 平台 的 理解 和 掌握 再 上 一 个 台阶 ， 本 书 最 适合 

不 过 了 。 本 书 则 在 系统 权威 地 讲解 JavaScript 这 门 语言 以 及 运行 它 的 各 
种 平台 环境 。 本 书 对 各 个 知识 点 的 讲解 都 非常 详细 ， 以 至 于 本 书 成 了 

大 块头 。 我 希望 每 个 读者 都 能 认真 阅读 本 书 ， 这 会 让 你 的 Javascript 编 
程 基本 功 更 加 夯实 ， 你 所 花费 的 时 间 和 精力 终究 会 有 成 倍 的 回报 。 


本 书 分 为 4 部 分 ， 第 一 部 分 主要 讲述 JavaScript 这 门 语言 。 第 二 部 分 主 
要 讲述 客户 端 JavaScript: HIML5 和 相关 标准 定义 的 JavaScript API 以 及 
Web 浏 贤 姻 实现 的 API。 第 三 部 分 是 JavaScript 语 言 核 心 部 分 的 参考 手 
册 。 第 四 部 分 是 客户 端 JavaScript 的 参考 手册 。 人 第 1 章 包 含 前 两 部 分 的 
章节 提纲 和 人 简介 《参照 1.177) 。 


本 书 第 6 版 同时 涵盖 ECMAScript 5 (JavaScript 语言 核心 的 最 新 版 本 ) 

和 HTML5 (Web 平 台 的 最 新 版 本 ) 。 第 一 部 分 包含 ECMAScript 5 相关 
的 资料 。 而 与 HIML5 相 关 的 新 资料 主要 在 第 二 部 分 末尾 的 章节 讲述 ， 
当然 其 他 章节 也 有 提 到 。 第 6 版 新 增 的 章节 有 : 第 11 章 、 第 12 章 、 第 19 
章 以 及 第 22 章 。 


如 果 你 阅读 过 前 几 版 ， 则 会 发 现 第 6 版 中 很 多 章节 都 完全 重 写 了 。 第 一 
部 分 中 的 核心 章节 都 涵盖 全 新 的 内 容 〈 对 象 、 数 组 、 画 数 以 及 类 ) ， 
这 些 内 容 都 是 当下 最 前 沿 的 编程 技术 和 最 佳 实践 。 同 样 ， 第 二 部 分 的 
核心 章节 ， 比 如 第 15 章 和 第 17 章 ， 也 与 时 俱 进 全 都 重 写 了 。 


天 于 盗版 


如 有 果 你 (或 你 的 雇主 ) 没有 为 阅读 本 书 电子 版 付费 (或 者 从 其 他 的 付 
费 读者 那里 借阅 本 书 ) ， 那 么 你 的 行为 很 可 能 涉及 侵权 。 撰 写本 书 第 6 
版 是 我 的 全 职工 作 ， 花 费 了 我 一 年 多 时 间 。 我 能 得 到 的 所 有 报酬 均 来 
目 读者 的 购买 费用 。 如 采 第 6 版 的 撰写 为 我 融 来 的 收 荔 无 法 继续 文 撑 我 
的 工作 ， 我 将 无 法 完成 本 书 第 7 版 的 编撰 。 


尽管 盗版 行为 让 人 不 可 容忍 ， 但 如 果 你 手 上 已 经 有 了 一 本 盗版 书 ， 不 
妨 斌 着 读 一 读 你 感 兴趣 的 几 章 。 相 信 你 会 发 觉 本 书 的 价值 所 在 ， 它 的 
确 是 你 学 习 JavaScript 不 可 多 得 的 好 教材 一 一 内 容 安排 清晰 、 质 量 上 
乘 ， 这 绝 不 是 随便 从 网 上 拿 来 几 篇 文章 拼 凌 成 的 二 流 读物 。 如 果 你 能 
认识 到 这 是 一 套 非 常 不 错 的 学 习 材 料 的 话 ， 请 你 从 正当 途径 购买 此 书 
(电子 版 或 纸 质 书 ) 。 反 过 来 讲 ， 如 果 你 的 确 觉得 本 书 没 有 网 上 的 免 
慢 信 息 有 价 信 ， 那么 请 停止 你 的 侵权 行为 ， 去 使 用 互联 网 上 的 免费 信 


本 书 约定 
本 书 使 用 下 列 排版 约定 : 
斜体 (Ttalic) 


用 于 强调 重点 或 者 表示 术语 的 首次 使 用 ， 此 外 它 还 用 来 表示 电子 邮件 
地 址 、 网 址 和 文件 名 。 


等 寅 字体 (Constant width) 


所 有 的 JavaScript 代 码 、HTML 和 CSS 代 码 清单 都 使 用 等 宽 字体 表示 ， 
以 及 程序 设计 时 要 输入 的 任何 内 容 也 用 等 宽 字 体 表 示 。 


等 宽 斜 体 (Constant width italic) 


等 宽 和 斜 体 用 来 表示 轴 数 参数 名 或 者 表示 一 个 占 位 符 ， 占 位 符 芝 用 来 糙 
换 成 程序 中 的 实际 值 


示例 代码 


人 中 的 所 有 示例 代码 都 可 以 在 网 上 找到 。 可 以 从 O'Reilly 出 版 社 网 站 
给 出 的 本 书 的 分 类 页 面 中 找到 想 要 的 代码 : 


http://oreilly.com/catalog/9780596805531/ 


这 里 的 代码 是 为 了 帮助 你 更 好 地 理解 本 书 的 内 容 的 。 通 常 ， 可 以 在 程 
序 或 文档 中 使 用 本 书 中 的 代码 ， 而 不 需要 联系 O'Reilly 获 得 许可 ， 除 非 
需要 大 上 段 大 段 地 复制 代码 。 例 如 ， 使 用 本 书 中 所 提供 的 几 个 代码 片段 
来 编写 一 个 程序 不 需要 得 到 我 们 的 许可 。 但 销售 或 发 布 O'Reilly 的 配套 
CD-ROM 则 需要 O'Reilly 出 版 社 的 许可 。3 引 用 本 书 的 示例 代码 来 回答 一 
个 问题 也 不 需要 许可 ; 将 本 书 中 的 示例 代码 的 很 大 一 部 分 放 入 到 上 自己 
的 产品 文档 中 确实 需要 获得 许可 。 


非常 欢迎 读者 使 用 本 书 中 的 代码 ， 不 用 注 明 出 处 。 注 明 出 处 的 形式 包 
含 标题 、 作 者 、 出 版 社 和 ISBN， 例 如 : "JavaScript:The Definitive 
Guide,by David Flanagan (O'Reilly) ° Copyright 2011 David Flanagan, 
978-0-596-80552-4"° 


天 于 O'Reilly 的 代码 重用 许可 政策 的 更 多 规定 ， 可 以 参阅 : 
http://oreilly.com/pub/a/oreilly/ask_tim/2001/codepolicy.html。 如果 读者 
觉得 对 示例 代码 的 使 用 超出 了 上 面 所 给 出 的 许可 范围 ， 欢 迎 通 过 
permission(@oreilly.com 联 系 我 们 。 


勘误 表 以 及 如 何 联 系 我 们 


出 版 社会 维护 本 书 的 一 个 勤 误 表 。 你 可 以 查阅 这 个 勘误 表 ， 同 样 你 也 
可 以 将 目 己 发 现 的 问题 提交 给 我 们 ， 通 过 访问 本 书 的 网 站 : 


http://oreilly.com/catalog/9780596805531 
如 果 你 想 评 论 或 提问 关于 本 书 的 技术 问题 ， 请 用 这 个 邮件 和 我 们 联 


~: 


bookquestions(@oreilly.com 


天 于 书籍 、 研 讨 会 、 资 源 中 心 以 及 OReilly 的 官方 网 址 的 更 多 信息 ， 请 
访问 这 个 地 址 : 


http:/www.oreilly.com 
我 们 在 Facebook 上 的 地 址 是 : http://facebook.com/oreilly 
我 们 在 Twitter 上 的 地 址 是 : http://twitter.com/oreillymedia 


我 们 在 YouTube 上 的 地 址 是 : http://www.youtube.com/oreillymedia 


致谢 


在 写本 书 的 过 程 中 得 到 了 很 多 人 的 热情 帮助 。 感 谢 本 书 的 编辑 Mike 
Loukides， 他 协助 我 规划 了 本 书 ， 提 出 的 很 多 建设 性 的 意见 。 同 样 感 
谢 本 书 的 技术 审 校 者 : Zachary Kessin， 他 负责 审 校 了 本 书 第 一 部 分 ， 
以 及 Raffaele Cecco， 他 审 校 了 第 19 章 以 及 第 21 章 的 <canvas> 相关 的 
内 容 。O'Reilly 生 产 部 门 的 工作 同样 出 色 。Dan Fauxsmith 作 为 本 书 的 项 
目 负 责 人 非常 尽责 ， 有 效 的 保证 了 本 书 的 进度 ，Teresa Elsey 的 排版 工 
作 同 样 出 色 ，Rob Romano 为 本 书 绘制 了 很 多 插图 和 图 表 ， 最 后 Ellen 
Troutman Zaig 为 本 书 创建 了 索引 。 


这 征 一 个 信息 时 代 ， 本 书 的 所 有 技术 细节 都 能 在 互联 网 上 找到 渊源 ， 
我 也 和 广大 网 友 保 持 了 密切 的 联系 。 我 在 ES5、w3c 以 及 whatwg 邮 件 列 
表 中 提 了 很 多 技术 问题 ， 也 得 到 了 同仁 们 很 专业 的 回答 ， 在 此 我 非常 
感谢 他 们 。 同 样 非常 感谢 那些 在 网 上 分 至 JavaScript 知 识 的 人 们 。 很 抱 
歉 我 没 办 法 列 出 所 有 人 的 名 字 ，JavaScript 开 发 者 社区 非常 活跃 ， 将 自 
己 投 号 其 中 让 人 感觉 非常 瑟 我 、 吴 心 愉 悦 。 
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解 和 鼓励 ， 我 爱 他 们 。 
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第 1 章 ”JavaScript 概 述 


JavaScript 是 面 则 Web 的 编程 语言 。 绝 大 多 数 现代 网 站 都 使 用 了 
JavaScript， 并 且 所 有 的 现代 Web 浏 览 露 基于 蝎 面 系统 、 游 戏 机 、 
平板 电脑 和 智能 手机 的 浏览 如 均 包 含 了 JavaScript 解 释 絮 。 这 使 得 
JavaScript 能 够 称 得 上 史上 使 用 最 广泛 的 编程 语言 。JavaScript 也 是 前 端 
开发 工程 师 必 须 掌 握 的 三 种 技能 之 一 : 描述 网 页 内 容 的 HIML、 摘 述 网 
页 样式 的 CSS 以 及 摘 述 网 页 行为 的 JavaScript。 本 书 能 帮助 你 掌握 
JavaScript 这 门 语言 。 


如 果 你 有 其 他 语言 的 编程 经 历 ， 这 会 有 助 于 你 了 解 JavaScript 是 一 门 高 

端的 、 动 态 的 、 弱 类 型 的 编程 语言 ， 非 常 适合 面 癌 对 象 和 函数 式 的 编 

程 风 格 。JavaScript 的 语法 源 目 Java， 它 的 一 等 函数 (first-class 

function) 来 自 于 Scheme， 它 的 基于 原型 (prototype-based) 的 继承 来 

和 目 于 Self。 但 使 用 本 书 学 习 JavaScript 不 必 去 了 解 那些 
(Java/Scheme/Self) 语言 或 熟悉 那些 术语 。 


"JavaScript" 这 个 名 字 经 音 被 误解 。 除 了 语法 看 起 来 和 Java 类 似 之 外 ， 
JavaScript 和 Java 是 完全 不 同 的 两 种 编程 语言 。JavaScript 早 已 超出 了 
其 “脚本 语言 >(scripting-language) 本 号 的 范畴 ， 而 成 为 一 种 集 健 壮 性 、 
高 效 性 和 通用 性 为 一 身 的 编程 语言 。 最 新 的 语言 版 本 为 严谨 的 大 型 软 
件 开 发 定义 了 诸多 新 的 特性 。 


JavaScript: 名 字 和 版 本 


JavaScript 是 由 Web 发 展 初期 的 网 景 (Netscape) 公司 创 

建 ，"JavaScript" 是 Sun Microsystem 公 司 (现在 的 Oracle) 的 注册 商标 ， 
用 来 特 指 网 景 (现在 的 Mozilla) 对 这 门 语言 的 实现 。 网 景 将 这 门 语言 
作为 标准 提交 给 了 ECMA 一 一 欧洲 计算 机 制造 协会 一 一 由 于 两 标 上 的 

冲突 ， 这 门 语言 的 标准 版 本 改 了 一 个 丑陋 的 名 字 "ECMAScript"。 同 样 
由 于 商标 的 神 突 ， 微 软 对 这 门 语言 的 实现 版 本 取 了 一 个 广为人知 的 名 

字 '"Jscript"。 实 际 上 ， 几 乎 所 有 人 都 将 这 门 语言 叫做 "JavaScript"。 本 书 
也 仅仅 使 用 "ECMAScript" 来 指 代 语 言 标准 。 


在 最 近 10 年 间 ， 所 有 的 Web 浏 咒 絮 都 实现 了 第 3 版 ECMAScript 标 准 ， 我 
们 也 已 经 不 必 再 去 考虑 版 本 号 了 : 语言 标准 已 经 很 稳定 了 ， 并 且 被 几 
乎 所 有 浏览 器 完整 地 实现 了 。 最 近 ，ECMAScript 第 5 版 定义 了 新 的 语言 


标准 ， 在 撰写 本 书 时 ， 浏 览 器 已 经 开始 实现 它 了 。 除 了 ECMAScript 3 
长 期 保留 下 来 的 特性 ， 本 书 还 涵盖 了 所 有 ECMAScript 5 的 新 特性 。 正 
如 我 们 经 常 将 JavaScript 简 写成 JS 一 样 ，ECMAScript 3 和 ECMAScript 5 
有 时 也 会 简写 成 ES3 和 ES5 。 


当 我 们 提 到 这 门 语言 本 身 时 ， 通 常 所 指 的 语言 版 本 是 ECMAScript 3 和 
ECMAScript 5 (ECMAScript 4 已 经 开发 了 数 年 ， 但 由 于 太 过 庞大 ， 从 
未 发 布 过 正式 版 本 ) 。 有 时 会 看 到 JavaScript 的 版 本 号 (比如 JavaScript 
1.5 或 JavaScript 1.8) 。 这 些 是 Mozilla 的 版 本 号 : 版 本 1.5 基 本 上 就 是 
ECMAScript 3， 后 续 版 本 包含 了 非 标 准 的 语言 扩展 (参照 第 11 章 ) 。 
最 后 ，JavaScript 解 释 器 或 者 “3| 苟 ”(engine) 也 有 版 本 号 ， 比 如 ， 
Google 将 它 的 JavaScript 解 释 器 叫做 V8， 在 撰写 本 书 时 V83| 擎 最 新 版 本 
是 3.0。 


为 了 有 用 起 见 ， 通 常 每 一 种 编程 语言 都 有 各 目的 开发 平台 、 标 准 库 或 
API 函 数 ， 用 来 提供 诸如 基本 输入 输出 的 功能 。JavaScript 语 言 核 心 针 对 
文本 、 数 组 、 日 期 和 正则 表达 式 的 操作 定义 了 很 少 的 API， 但 是 这 些 
API 不 包括 输入 输出 功能 。 输 入 和 输出 功能 (类 似 网 络 、 存 储 和 图 形 相 
关 的 复杂 特性 ) 是 由 JavaScript 所 属 的 “宿主 环境 ” (host enviroment) 提 
供 的 。 这 里 所 说 的 宿主 环境 通常 是 Web 浏览 器 (第 12 章 会 介绍 两 个 不 基 
于 Web 浏 览 器 的 JavaScript 宿 主 环境 ) ， 本 书 第 一 部 分 泗 盖 了 语言 本 刁 
的 特性 以 及 少量 的 内 置 API。 第 二 部 分 讲解 了 JavaScript 如 何在 Web 浏 质 
器 中 工作 ， 并 涵盖 基于 浏览 右 的 API 一 这 部 分 也 称 做 “客户 端 


JavaScript” ° 


本 书 第 三 部 分 是 核心 API 的 参考 手册 。 比 如 ， 在 这 部 分 ， 可 以 查 

找 "Array" 以 获得 JavaScript 数 组 操作 API 的 详细 信息 。 第 四 部 分 是 客户 
端 JavaScript 参 考 手册 ， 比 如 ， 你 可 以 在 这 部 分 查找 "canvas" 来 获得 
HTML 5<canvas> 元素 定义 的 图 形 编程 API 。 


本 书 首 先 讲解 初级 的 基础 部 分 ， 然 后 讲解 更 高 级 和 更 抽象 的 内 容 。 本 
书 的 章节 也 是 如 此 安排 以 便 你 能 循序 阅读 。 但 学 习 一 门 新 的 编程 语言 
绝 非 易 事 ， 当 然 要 完整 插 述 这 | ] 语 言 整 没 办 法 苛求 知识 护 的 人 循 次 渐 
进 ， 每 一 种 语言 特性 都 和 其 他 特性 相互 关联， 本 书 的 知识 总 也 是 前 后 
参照 的 ， 有 时 参照 的 知识 点 在 后 续 章 节 ， 有 时 在 已 经 阅读 的 章 世 。 本 
章 快速 介绍 了 语言 核心 部 分 和 客户 端 API 及 其 关键 特性 ， 以 便 你 能 更 方 
便 更 深入 地 阅读 理解 后 续 章 入 。 


JavaScript 初 探 


当 学习 一 门 新 的 编程 语言 的 时 候 ， 应 当 对 照 书 中 的 示例 边 学 边 动 手 
做 ， 反 复 演练 以 加 深 目 己 的 理解 。 因 此 ， 你 需要 一 个 JavaScript 解 释 
鲁 。 滁 运 的 是 ， 每 一 个 Web 议 贤 右 部 包含 一 个 JavaScript 解 释 占 ， 当 你 
阅读 本 书 时 ， 你 可 能 已 经 在 电脑 上 安装 了 不 止 一 个 Web 浏 览 器 了 。 


可 以 通过 在 HTML 文 件 里 写 一 个 <script> 标签 来 艇 入 JavaScript 代 人 码 ， 

当 浏 览 器 加 载 H8TML 文 件 的 时 候 ， 它 会 目 动 执行 这 段 代 码 ， 随 后 会 有 提 

到 。 滁 运 的 是 ， 如 果 运 行 的 是 一 小 段 JavaScript 代 码 ， 则 不 必 每 次 都 这 

样 做 。 我 们 可 以 利用 Firefox 的 一 个 强大 的 革命 性 的 插件 Firebug ( 见 图 

1-1， 可 以 从 http://getfirebug.com/ 下 载 Firebug) 来 运行 这 些小 段 代码 ， 

而 且 如 今 的 Web 浏 览 器 带 有 很 多 开发 工具 ， 可 以 用 来 调试 、 试 验 和 学 
习 。 通 常 在 浏览 如 的 “工具 ”菜单 中 可 以 看 到 类 似 “ 开 发 者 工具 ”或 

者 “Web 控 制 台 ” 的 选项 (Firefox 4 内 置 『 了 “Web 控制 台 ， 不 过 更 推荐 使 

用 Firebug) 。 可 以 通过 按 F12 键 或 者 Ctrl+Shift+J 快 捷 键 来 唤醒 控制 台 山 
。 控制 台 工 具 通 常会 在 浏览 絮 窗 口 的 顶部 或 底部 ， 有 时 候 也 可 以 单独 

打开 一 个 窗口 ( 见 图 1-1) ， 这 样 会 更 加 方便 。 


通常 开发 者 工具 面板 "窗口 包含 了 很 多 选项 卡 ， 可 以 查看 HTML 文 档 结 
构 、CSS 样 式 、 网 络 请 求 等 。 其 中 第 一 个 选项 卡 是 cJavaScript 控 制 台 ”， 
可 以 直接 输入 JavaScript 代 码 并 运行 出 结果 。 用 这 种 方式 来 调试 
lavascnip 这 简单 实用， 这 里 强 玲 荐 这 者 使 用 这 种 方式 来 捕 助 你 呆 


一 些 现 代 浏览 絮 有 可 能 实现 了 一 个 简单 的 控制 台 API。 可 以 通过 使 用 六 
数 console.log() 来 同 控制 台 输 出 消 轧 ， 使 用 console.log() 来 做 简单 的 输出 
演示 ， 通 过 这 种 方式 可 以 非常 方便 地 调试 本 书 的 示例 人 代码。 同样 ， 也 
可 以 通过 给 alert0) 函 数 传 入 一 段 文本 来 弹出 一 个 对 话 框 ， 但 这 种 输出 调 
试 信息 的 方法 更 具 侵 入 性 。 
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图 1-1 Firebug 控 制 台 


1.1 JavaScript 语言 核心 


本 节 是 JavaScript 语 言 的 一 个 快速 概 哎 ， 也 是 本 书 第 一 部 分 的 快速 概 
览 。 在 本 章 之 后 ， 我 们 将 着 重 关 注 JavaScript 的 基础 知识 : 第 2 章 讲解 
JavaScript 注 释 、 分 号 和 Unicode 字 符 集 ; 第 3 划 会 更 加 有 意思 ， 主 要 讲 
解 JavaScript 变 量 和 赋值 。 这 里 有 一 些 示 例 代 码 来 说 明 这 两 章 的 重点 内 
合 : 


// 所 有 在 双 和 斜 线 之 后 的 内 容 都 居 


于 注释 


上 


// 仔 细 阅 读 这 里 的 注释 : 它们 对 JavaSscript 代 码 做 了 解释 


// 变 量 是 表示 值 的 一 个 符号 名 字 


// 变 量 是 通过 var 关 键 字 声明 的 


var X;// 声 明 一 个 变量 x 


// 值 可 以 通过 等 号 赋值 给 变量 


x=0;// 现 在 变量 x 的 值 为 0 


x//=>0: 通 过 变量 获取 其 值 


//JavaScript 支 持 多 种 数据 类 型 


x=1; // 数 字 


Xx=0 .01;// 整 数 和 实数 共用 一 种 数据 类 型 


x="hello world";// 由 双 引 号 内 的 文本 构成 的 字符 串 


x='JavaScript';// 单 引号 内 的 文本 同样 构成 字符 串 


x=true;// 布 尔 值 


x=false;// 男 一 个 布尔 值 


x=null;//null 是 一 个 特殊 的 值 ， 意 思 是 " 空 " 


x=undefined;//undefined 和 null 非 常 类 似 


JavaScript 中 两 个 非常 重要 的 数据 类 型 是 对 象 和 数组 。 第 6 草 介绍 对 
象 ， 第 7 章 介绍 数组 ， 对 象 和 数组 在 JavaScript 中 是 如 此 之 重要 ， 以 至 
于 你 在 本 书 中 处 处 都 能 看 到 它们 的 吴 影 。 


//JavaScript 中 的 最 重要 的 类 型 就 是 对 象 


到 值 映射 的 集合 


十 二 


// 对 象 是 名 / 值 对 的 集合 ， 或 字符 有 


var book={// 对 象 是 由 花 括号 括 起 来 的 


topic:"JavaScript",// 属 性 "topic" 的 值 是 "Javascript" 


fat:true// 属 性 "fat" 的 值 是 true 


};// 右 伦 括 号 标记 了 对 象 的 结束 


// 通 过 "." 或 "[]" 来 访问 对 象 属性 


book.topic//=>"Javascript" 


book["fat"]//=>true: 男 外 一 种 获取 属性 的 方式 


book .author="Flanagan";// 通 过 赋值 创建 一 个 新 属性 


book .contents={};// 侣 是 一 个 空 对 象 ， 它 没有 属性 


//JavaScript 同 样 支持 数组 (以 数字 为 索引 的 列表 ) 


var primes=[2,3,5,7];// 拥 有 4 个 值 的 数组 ， 由 "[" 和 "]" 划 定 边界 


primes[0]//=>2: 数 组 中 的 第 一 个 元 素 (索引 为 0) 


primes .length//=>4: 数 组 中 的 元 素 个 数 


primes[primes.length-1]//=>7: 数 组 的 最 后 一 个 元 素 


primes[4]=9;// 通 过 赋值 来 添加 新 元 素 


primes[4]=11;// 或 通过 赋值 来 改变 已 有 的 元 素 


var empty=[];//[] 是 空 数 组 ， 它 具有 9 个 元 素 


empty.length//=>0 


// 数 组 和 对 象 中 都 可 以 包含 男 一 个 数组 或 对 象 : 


var points=[// 具 有 两 个 元 素 的 数组 


{XxX:0,y:0},// 每 个 元 素 都 是 一 个 对 象 


{x:1,y:1} 


]; 


var data={// 一 个 包含 两 个 属性 的 对 象 


trial1:[[1,2],[3,4]],// 每 一 个 属性 都 是 数组 


trial2:[[2,3],[4,5]]// 数 组 的 元 素 也 是 数组 


}; 


上 段 代码 中 通过 方 括号 定义 数组 元 素 和 通过 花 括 号 定义 对 象 属性 名 和 
属性 值 之 间 的 映射 关系 的 语法 称 为 初始 化 表达 式 (initializer 
expression) ， 第 4 章 有 专门 的 介绍 。 表 达 式 是 JavaScript 中 的 一 个 短 
语 ， 这 个 短语 可 以 通过 运算 得 出 一 个 值 。 通 过 “.” 和 “[]” 来 引用 对 象 属 
性 或 数组 元 素 的 值 就 构成 一 个 表达 式 。 比 如 ， 请 看 一 下 上 述 代码 中 独 
占 一 行 的 表达 式 ， 其 后 的 注释 中 箭头 (=>) 后 的 值 就 是 表达 式 的 运 
算 结 果 。 这 种 写法 是 本 书 中 的 一 种 约定 表述 方式 。 


JavaScript 中 最 利 见 的 表达 式 写 法 是 像 下 面 代码 这 样 使 用 运算 符 


(operator) 


// 运 算 符 作用 于 操作 数 ， 生 成 一 个 新 的 值 


// 最 常见 的 是 算 


3+2/V/=>5: 加 法 


3-2//=>1: 减 法 


上 


上 


3*2//=>6: 乘 法 


3/2//=>1.5: 除 法 


points[1].x-points[0] .x//=>1: 更 复杂 的 操作 数 


N34+"2"//=> "32" :+ 可 以 完 


//JavaScript 定 义 了 


var count=0;// 定 义 一 个 变量 


count++;// 


count--;// 自 减 1 


count+=2;// 


count*=3;//E 


增 1 


增 2， 和 "count=count+2; "写法 一 样 


乘 3:;: 和 "count=count*3;" 写 法 一 样 


此 算 


能 照常 工作 


count//=>6: 


A 


文 里 关 个 


运算 符 的 简写 


身 也 是 一 个 表达 式 


MY 


式 


T 


成 加 法 运算 也 可 以 作 字 符 串 ; 


// 相 等 关系 运算 符 用 来 判断 两 值 是 否 相 等 
// 不 等 、 大 于 、 小 于 运算 符 的 运算 结果 是 true 或 false 
var X=2,y=3;// 这 里 的 = 等 号 是 赋值 的 意思 ， 不 是 比较 相等 


x==y//=>false: 相 等 


x!=y//=>true: 不 等 


x<y//=>true: 小 于 


x<=y//=>true: 小 于 等 于 


x>y//=>false: 大 于 等 于 


x>=y//=>false: 大 于 等 ] 


"two"=="three"//=>false: 两 个 字符 串 不 相等 


"two">>"three"//=>true:"tw" 在 字母 表 中 的 索引 大 于 "th" 


false==(x>y)//=>true:false 和 false 相 等 


// 逻 辑 运 算 符 是 对 布尔 值 的 合并 或 求 反 


(x==2) 久 以 (y==3)//=>true: 两 个 比较 都 是 true， 纹 改 表 示 " 与 " 


(x>3)|11(y<3)//=>false: 两 个 比较 不 都 是 true，| | 表示 "或 " 


1(x==y)//=>true: ! 求 反 


如 果 JavaScript 中 的 “短语 ”是 表达 式 的 话 ， 那 么 整个 句子 就 称 做 语句 
(statement) ， 第 5 章 会 详细 讲解 。 在 上 述 代码 中 ， 以 分 号 结束 的 行 均 
是 一 条 语句 (下面 的 代码 中 ， 会 看 到 省 略 分 号 的 多 行 语句 ) 。 实 际 
上 ， 语 句 和 表达 式 之 间 有 很 多 共同 之 处 ， 粗 略 地 讲 ， 表 达 式 仅仅 计算 
出 一 个 值 但 并 不 作 任何 操作 ， 它 并 不 改变 程序 的 运行 状态 。 而 语句 并 
不 包含 一 个 值 (或 者 说 它 包 含 的 值 我 们 并 不 关心 ) ， 但 它们 改变 程序 
的 运行 状态 。 在 上 文中 已 经 见 过 变量 声明 语句 和 赋值 语句 。 另 一 类 语 
句 是 “控制 结构 ”(control structure) ， 比 如 条 件 判 断 和 循环 。 在 介绍 完 
函数 之 后 ， 我 们 给 出 相关 的 示例 代码 。 


函数 是 带 有 名 称 (named) [人 和 参数 的 JavaScript 代 码 段 ， 可 以 一 次 定 
义 多 次 调用 。 第 8 章 会 正式 详细 地 讲解 函数 。 与 对 象 和 数组 一 样 ， 在 本 
书 的 很 多 地 方 都 会 提 到 函数 。 这 里 是 一 些 简 单 的 示例 代码 ; 


// 画 数 是 一 段 带 有 参数 的 JavaScript 代 码 端 ， 可 以 多 次 调用 


function plus1i(x){// 定 义 了 名 为 plus1 的 一 个 函数 ， 带 有 参数 x 


return x+1;// 返 回 一 个 比 传 入 的 参数 大 的 值 


Tt 


// 函 数 的 代码 块 是 由 花 括 


号 包 庄 起 来 的 部 分 


plus1i(y)//=>4:y 为 3， 调 用 函数 的 结果 为 3+1 


var square=function(x){// 画 数 是 一 种 值 ， 可 以 赋值 给 变量 


return x*x;// 计 算 函 数 的 值 


}; 7// 分 号 标识 了 赋值 语句 的 结束 


square(plus1i(y))//=>16: 在 一 个 


tl 


达 式 中 调用 两 个 函数 


当 将 函数 和 对 象 合 写 在 一 起 时 ， 函 数 就 变 成 了 “方法 ”method) 


// 当 函数 赋值 给 对 象 的 属性 ， 我 们 称 为 


//" 方 法 "， 所 有 的 JavaScript 对 象 都 含有 方法 


var a=[];// 创 建 一 个 空 数组 


a.push(1,2,3);//push() 方 法 向 数组 中 添加 元 素 


a.reverse();// 另 一 个 方法 : 将 数组 元 素 的 次 序 反 转 


// 我 们 也 可 以 定义 自己 的 方法 ，"this" 关 键 字 是 对 定义 方法 


// 的 对 象 的 引用 : 这 里 的 例子 是 上 文中 提 到 的 包含 两 个 点 位 置信 息 的 数组 


points.dist=function(){// 定 义 


个 方法 用 来 计算 两 点 之 间 的 距离 


var pili=this[0];// 通 过 this 获 得 对 当前 数组 的 引 


var p2=this[1];// 并 取得 调用 的 数组 前 两 个 元 素 


var a=p2.x-p1.x;//X 坐 标 轴 上 的 距离 


var b=p2,.y-p1.y;V/Y 坐 标 轴 上 的 距离 


return Math.sqrt(a*a+// 勾 股 定理 


二 


}; 


points.dist()//=>1.414: 求 得 两 个 点 之 间 的 距离 


现在 ， 给 出 一 些 控制 语句 的 例子 ， 这 里 的 示例 函数 体内 包 
的 JavaScript 控 制 语 句 : 


判断 和 循环 


TT 


// 这 些 JavaScript 语 句 使 用 该 语法 包含 条 人 


// 使 用 了 类 似 C、C++、Java 和 其 他 语言 的 语法 


function abs(x){// 求 绝对 值 的 函数 


if(x>=0){//if 语 句 ... 


return x;// 如 果 比 较 结果 为 true 则 执行 这 里 的 代码 ， 


《二 


// 子 句 的 结 弹 


else{// 当 if 条 件 不 满足 时 执行 else 子 句 


return-x; 


D> 


// 如 果 分 支 中 


// 注 意 if/elsed 


function factorial(n){// 计 


| 


F 模 套 的 return 语 句 


var product=1;// 给 product 赋 值 为 1 


条 语句 ， 花 括号 是 可 以 省 略 的 


while(n>1){// 当 () 内 的 表达 式 为 true 时 循环 执行 {} 内 的 代码 


product*=n;//"product=product*n;" 的 简写 形式 


n--;//"n=n-1; "的 简写 
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// 循 环 结 身 


return product;// 返 区 


NS 


式 


product 


factorial(4)//=>24:1*4*3*2 


function factorial2(n){// 实 


var iproduct=1;// 给 product 赋 值 为 1 


for (i=2;i<=n;i++)// 将 i 从 2 


product*=i;// 循 环 体 ， 当 循环 体 中 只 有 


return product;// 返 世 


IE 
内 
S 


计算 好 的 


山特 环 的 男 一 种 写 


Tt 


这 


factorial2(5)//=>120:1*2*3*4*5 


名 代码 ， 可 以 省 略 { 


JavaScript 征 一 种 面 所 回 对 象 的 编程 语言 ， 但 和 传统 的 面 癌 对 象 又 有 很 大 
区 别 。 第 9 章 将 详细 讲解 JavaScript 中 的 面向 对 象 编程， 这 一 章 有 大 量 
的 示例 代码 ， 是 本 书 中 最 长 的 一 章 。 这 里 有 一 个 简单 的 示例 ， 这 段 代 
码 展示 了 如 何在 JavaScript 中 定义 一 个 类 来 表示 2D 平 面 几 何 中 的 点 。 这 
个 类 实例 化 的 对 象 拥 有 一 个 名 为 r0 的 方法 ， 用 来 计算 该 点 到 原点 的 距 
疯 : 


// 定 义 一 个 构造 钞 数 以 初始 化 一 个 新 的 Point 对 象 


function Point(x,y){// 按 照 惯 例 ， 构 造 函 数 均 以 大 写字 母 开始 


this .x=x;// 关 键 字 this 指 代 初 始 化 的 实例 


this ,y=y;// 将 函数 参数 存储 为 对 象 的 属性 


IW 


} 


// 不 需要 return 


// 使 用 new 关 键 字 和 构造 本 数 来 创建 一 个 实例 


var p=new Point(1,1);// 平 面 儿 何 中 的 点 (1,1) 


// 通 过 给 构造 函数 的 prototye 对 象 赋值 


// 来 给 Point 对 象 定义 方法 


Point.prototype.r=function(){ 


return Math.sqrt(// 返 回 x 


+y 2 的 平方 根 


this,x*this.x+//this 指 代 调 用 这 个 方法 的 对 象 


this.y*this.y); 


};//Point 的 实例 对 象 p 〈 以 及 所 有 的 Point 实 例 对 象 ) 继承 了 方法 r( ) 


p.r()//=>1.414... 


第 9 章 是 第 一 部 分 的 精华 所 在 ， 后 仁 的 各 章 做 了 一 些 雪 星 的 延伸 ， 将 我 
们 对 JavaScript 语 言 核 心 的 探索 带 癌 尾声 。 第 10 划 主要 讲解 了 正则 表达 
式 的 语法 ， 并 演示 了 如 何 使 用 这 些 “ 正 则 表达 式 ” 进 行文 本 的 模式 匹 
配 。 第 11 章 介绍 JavaScript 语 言 核 心 的 子 集 和 超 集 。 最 后 ， 在 进入 客户 
端 JavaSaript 的 内 容 之 前 ， 第 12 章 介绍 两 种 在 Web 浏览 器 之 外 的 两 种 
JavaScirpt 运 行 环境 。 


[1 F12 用 来 唤醒 /关闭 Firebug 操 作 面 板 ，Ctrl+Shift+J 用 来 唤醒 错误 控制 


台 (Error Console)。 


[2]. 这 里 “名 称 ” 仿 义 是 指 函 数 具 有 固定 标识 ， 并 不 是 指 函 数 变 量 名 称 。 


1.2 ”客户 端 JavaScript 


JavaScript 语 言 核 心 部 分 的 内 容 中 的 知识 点 交叉 引用 比较 多 ， 且 知识 点 
的 层次 感 并 不 分 明 。 而 在 客户 端 JavaScript 部 分 的 内 容 编 排 方 式 有 了 较 
大 改变 。 依 照 本 书 给 定 的 知识 点 顺序 进行 学 习 ， 完 全 可 以 学 会 如 何在 
Web 浏 抽 锅 中 使 用 JavaScript。 但 如 果 你 想 通 过 阅读 本 书 来 学 习 客 户 端 
JavaScript 的 话 ， 不 能 只 将 眼光 落 在 第 二 部 分 ， 所 以 本 三 会 对 于 客户 并 
编程 技术 做 一 个 快速 概 贤 ， 随 后 会 给 出 一 个 有 深度 的 示例 。 


第 13 章 是 第 二 部 分 的 第 一 章 ， 该 章 介绍 如 何 让 JavaScript 在 Web 浏 览 右 
中 运行 起 来 。 从 该 章 学 到 的 最 重要 的 内 容 是 ，JavaScript 代 码 可 以 通过 
<scirpt> 标签 来 答 入 到 HTML 文 件 中 : 


<html> 


<head> 


<script src="library.js"></script><1!-- 引 入 一 个 JavaScript 库 --> 


</head> 


<body> 


<p>This is a paragraph of HTML</p> 


<script>// 在 这 里 编写 嵌入 到 HTML 文 件 中 的 JavaScript 代 码 


</script> 


<p>Here is more HTML</P> 


</body> 


</html> 


第 14 章 讲解 Web 浏 览 右 端 脚本 技术 ， 并 涵盖 客户 端 JavaScript 中 的 一 些 
重要 全 局 函数 ， 例 如 : 


<script> 


function moveon(){// 通 过 弹出 一 个 对 话 框 来 询问 用 户 一 个 问题 


FE 


var answer=confirm(" 谁 备 好 了 吗 ?") ;// 单 击 "确定 "按钮 ， 浏 览 器 会 加 载 一 个 新 页 面 


if(answer)window.location="http://taobao.com"; 


} 


// 在 1 分 钟 (6 万 毫秒 ) 后 执行 定义 的 这 个 函数 


setTimeout (moveon, 60000); 


</script> 


我 们 注意 到 ， 本 市 展示 的 客户 端 示例 代码 要 比 前 面 的 示例 代码 要 长 很 
多 。 这 里 的 示例 代码 并 不 是 用 来 在 Firebug (或 者 其 他 调试 工具 ) 控制 
台 窗 口中 直接 输入 的 ， 而 是 作为 一 个 单独 的 HTML 文 件 ， 并 在 Web 浏 贤 
井中 直接 打开 运行 的 。 比 如 ， 上 述 代 码 段 束 是 一 个 HTML 文 件 的 完整 内 


Fp 


谷 。 


第 15 章 的 内 容 更 加 务实 一 一 通过 脚本 来 操纵 HTML 文 档 内 容 。 它 将 展示 
如 何 选 取 特定 的 HTML 元 素 、 如 何 给 HTML 元 素 设 置 属性 、 如 何 修 改元 
素 内 容 ， 以 及 如 何 给 文档 添加 新 节点 。 这 里 的 示例 函数 展示 了 如 何 查 
找 和 修改 基本 文档 的 内 容 : 


// 在 document 中 的 一 个 指定 的 


[xl 


或 输出 调试 消息 


他 


// 如 果 document 不 存在 这 样 一 个 区 域 ， 则 创建 一 个 


查看 HTML 元 素 id 属 性 来 查找 文档 的 调试 部 分 


function debug(msg){// 通 过 


var 1Log=document .getElementById("debuglog");// 如 果 这 个 元 素 不 存在 ， 则 创建 一 个 


if(!110g){ 


1og=document .createElement ("div");// 创 建 一 个 新 的 <div>> 元 素 


lo0g.id="debuglog";// 给 这 个 元 素 的 HTML id 赋值 


1og.innerHTML="<h1>Debug Log</h1i>";// 定 义 初始 内 容 


I 


document .body.appendchild(10g);// 将 其 添加 到 文档 的 末尾 


// 将 消息 包装 在 <pre> 中 ， 并 添加 至 log 中 


var pre=document.createElement("pre");// 创 建 <pre>> 标 签 


var text=document.createTextNode(msg);// 将 msg 包 装 在 一 个 文本 节点 中 


pre.appendchild(text);// 将 文本 添加 至 <pre> 


log.appendChild(pre);// 将 <pre>> 添 加 至 log 


第 15 章 讲述 JavaScript 如 何 操纵 HTML 中 定义 Web 内 容 的 元 素 。 第 16 章 讲 
述 如 何 使 用 JavaScript 来 进行 CSS 样 式 操作 ，CSS 样 式 定 义 了 内 容 的 展示 
方式 。 这 通常 会 使 用 到 HTML 元 素 的 style 和 class 属 性 : 


function hide(e,reflow){// 通 过 JavaScript 操 纵 样式 来 隐藏 元 素 e 


if(reflow){// 如 果 第 二 个 参数 是 true 


e.style.display="none"// 隐 藏 这 个 元 素 ， 其 所 占 的 空间 也 随 之 消失 


else{// 和 否则 


e.style.visibility="hidden";// 将 e 隐 藏 ， 但 是 保留 其 所 占 的 空间 


} 


} 


function highlight(e){// 通 过 设置 CSS 类 来 高 亮 显 示 e 


// 简 单 地 定义 或 追加 HTML 类 属性 


里 假设 CSs 样 式 表 中 已 经 有 "hilite" 类 的 定义 


六 
SS 
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if(!e.className)e.className="hilite"; 
else e.className+="hilite",; 


} 


可 以 通过 JavaScript 来 操控 Web 浏 览 器 中 的 HTML 内 容 和 文档 的 CSS 样 
式 ， 同 样 ， 也 可 以 通过 事件 处 理 程序 (event handler) 来 定义 文档 的 行 
为 。 事 件 处 理 程序 是 一 个 在 浏 虎 器 中 注册 的 JavaScript 函 数 ， 当 特定 类 
型 的 事件 发 生 时 浏览 右 便 调用 这 个 函数 。 通 第 我 们 关心 的 事件 类 型 是 
鼠标 点 击 事件 和 键盘 按键 事件 〈 在 智能 手机 中 则 是 各 种 触 碰 事 件 ) 。 
或 者 说 ， 当 浏览 器 完成 了 文档 的 加 载 ， 当 用 户 改 变 窗口 大 小 或 当 用 户 
可 HTML 表 单元 素 中 输入 数据 时 便 会 触发 一 个 事件 。 第 17 间 详细 描述 如 
人 以 及 在 事件 发 生 时 浏览 器 是 如 何 调 用 它 
| ‘| o 


定义 事件 处 理 程序 最 简单 的 方法 是 ， 给 HTML 的 以 "on" 为 前 缀 的 属性 绑 
定 一 个 回调 。 当 写 一 些 简 单 的 测试 程序 时 ， 最 实用 的 方法 就 是 

给 "onclick" 处 理 程序 绑 定 回 调 。 假 定 已 经 将 上 文中 的 debug0 和 hide() 两 
个 函数 保存 至 名 为 debug.js 和 hide.js 的 文件 中 ， 那 么 就 可 以 写 一 个 简单 

ee 
理 程序 : 


<script src="debug.js"></script> 

<script src="hide.js"></script> 

Hello 

<button onclick="hide(this,true);debug('hide button 1');">Hide1i</button> 
<button onclick="hide(this);debug('hide button 2');">Hide2</button> 

world 

下 面 这 些 客户 端 JavaScript 代 码 用 到 了 事件 ， 它 给 一 个 很 重要 的 事件 


一 一 "load" 事 件 注册 了 一 个 事件 处 理 程序 。 同 时 ， 也 展示 了 注 
册 "click" 事 件 处 理 函 数 更 高 级 的 一 种 方法 : 


//"1load" 事 件 只 有 在 文档 加 载 完成 后 才 会 触发 


// 通 常 需要 等 待 1oad 事 件 发 生 后 才 开 始 执行 JavaScript 代 码 


window.onload=function( ){// 当 文档 加 载 完 成 时 执行 这 里 的 代码 


// 找 到 文档 中 所 有 的 < img > 标签 


var images=document .getElLementsByTagName("img") ;// 遍 历 images， 给 每 个 节点 的 "clLick" 事 件 添 加 
了 件 处 理 程序 


由 


// 在 点 击 图 片 的 时 候 将 图 片 隐藏 


for(var i=0;i<images.length;i++){ 


var image=images[i]; 


if(image.addEventListener )// 注 册 事 件 处 理 程序 的 另 一 种 方法 


image.addEventListener("click",hide,false); 


else// 兼 容 IE8 及 以 前 的 版 本 


image.attachEvent("onclick",hide); 


} 


// 这 便 是 上 面 注册 的 事件 处 理 函 数 


function hide(event){event.target,.style.visibility="hidden",;} 


}; 


第 15~-17 章 讲述 了 如 何 使 用 JavaScript 来 操控 网 页 的 内 容 (HTML) 、 
样式 (CSS) 以 及 行为 (事件 处 理 ) 。 这 些 章 所 讨论 的 API 多 少 有 些 复 
杂 ， 且 至 今 仍 具 有 糟糕 的 浏览 器 兼容 人 性。 也 正 是 由 于 这 个 原因 ， 很 多 
客户 端 JavaScript 程 序 员 选 择 使 用 * 库 ?或 “框架 "来 简化 他 们 的 编码 工 

作 。 最 流行 的 库 非 jQuery 英 属 。 第 19 章 将 会 详细 介绍 jQuery 库 。jQuery 
定义 了 一 套 灵 巧 易 用 的 API， 用 来 操控 文档 内 容 、 样 式 和 行为 。jQuery 
经 过 了 完整 的 测试 ， 在 所 有 现代 主流 浏览 器 ， 甚 至 在 IE6 这 种 早期 浏览 
器 中 都 可 以 照常 运行 。 


jQuery 代码 非常 易于 识别 ， 因 为 它 充 分 利用 了 一 个 名 为 $0 的 函数 。 这 
里 用 jQuery 重 写 了 上 文中 提 到 的 debug0) 函 数 : 


function debug(msg){ 


var lo0g=$("#debuglog");// 找 到 要 显示 msg 的 元 素 . 


if(1log.length==0){// 如 果 不 存在 则 创建 2 


log=$("<div id='debuglog' ><h1>Debug Log</h1i></div>"); 


1og.appendTo(document .body);// 并 将 其 追加 到 body 里 


} 


log.append($("<pre/>").text(msg));// 将 msg 包 装 在 <pre> 中 ， 再 追加 到 log 里 


} 


目前 我 们 所 提 到 的 第 二 部 分 的 4 章 都 是 围绕 网 页 展开 讨论 的 。 后 续 的 4 
章 将 着 眼 点 转向 Web 应 用 。 这 几 章 的 内 容 并 不 是 讨论 如 何 通过 编写 操控 
内 容 、 样 式 和 行为 的 脚本 使 用 Web 浏 贤 絮 来 泻 染 文 档 ， 而 是 讲解 如 何 将 
Web 浏 览 恬 当 做 应 用 平台 ， 并 摘 述 了 用 以 文 持 更 复杂 精细 的 客户 端 Web 
应 用 的 现代 浏览 器 API。 第 18 章 讲解 如 何 使 用 JavaScript 来 发 起 HTTP 请 
求 。 第 20 章 描述 数据 存储 的 机 制 以 及 客户 端 应 用 中 的 会 话 状态 的 保 

持 。 第 21 章 涵盖 基于 HTML 的 <vanvas > 标签 的 客户 端 API， 用 来 进行 
任意 形状 图 形 的 绘制 。 最 后 ， 第 22 章 讲解 HTML5 所 提供 的 新 一 代 Web 
应 用 API。 网 络 、 存 储 、 图 形 : 这 些 都 是 Web 浏 唤 右 提供 的 操作 系统 级 
的 服务 ， 它 们 定义 了 全 新 的 跨 平台 的 应 用 环境 。 如 果 你 正在 进行 基于 
那些 文 持 这 些 新 API 的 浏览 器 的 开发 ， 这 将 是 你 作为 客户 端 JavaScript 程 
序 员 最 激动 人 心 的 时 刻 。 最 后 4 章 并 没有 太 多 示例 代码 ， 但 下 面 的 例子 
使 用 了 这 些 新 的 API。 


示例 : 一 个 JavaScript 贷 款 计 算 器 
本 章 最 后 展示 一 个 例子 ， 这 个 例子 集中 使 用 了 诸多 技术 ， 展 示 了 真实 


环境 下 的 客户 端 JavaScript (包括 HTML 和 CSS) 编程 。 例 1-1 给 出 了 一 
个 简单 的 贷 识 计算 器 应 用 的 代码 ， 如 图 1-2 所 示 。 
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图 1-2 一 个 贷 球 计算 器 Web 应 用 
在 看 代码 〈 例 1-1) 之 前 应 当先 仔细 阅读 本 段 文字 。 你 不 需要 理解 所 有 
内 容 ， 代 人 码 中 有 着 完整 的 注释 ， 至 少 你 应 该 能 正确 运行 这 段 代 码 得 到 
如 图 1-2 所 示 的 界面 。 这 里 的 例子 展示 了 诸多 JavaScript 语 言 核心 特性 ， 
同样 展示 了 重要 的 客户 端 JavaScript 技 术 : 
:如 何在 文档 中 查找 元 素 
-如何 通 过 表单 input 元 素来 获取 用 户 的 输入 数据 
.如 何 通过 文档 元 素来 设置 HTML 内 容 
-如何 将 数据 存储 在 浏览 娇 中 
.如 何 使 用 脚本 发 起 HITP 请 求 


.如 何 利 用 < canvas > 元素 绘图 


例 1-1: 基于 JavaScript 实 现 的 贷款 计算 需 


<IDOCTYPE html> 
<html> 
<head> 


<title>Javascript Loan Calculator</title> 


<style>/* 这 是 一 个 CSS 样 式 表 :定义 了 程序 输出 的 样式 */ 


.Output{font-weight:bold;}/* 计 算 结 果 定 义 为 粗 体 */ 


#payment{text-decoration:underline;}/* 定 义 ijd="payment" 的 元 素 样式 */ 


#graph{fborder:solid black 1px;}/* 图 表 有 一 个 1 像素 的 边框 */ 


th, td{vertical-align:top;}/* 表 格 单元 格 对 其 方式 为 顶端 对 齐 */ 


</style> 


</head> 


<body> 


<1-- 


这 是 一 个 HTML 表 格 ， 其 中 包含 <input > 元 素 可 以 用 来 输入 数据 。 


程序 将 在 <span > 元 素 中 显示 计算 结果 ， 这 些 元 素 都 具有 类 似 "interset" 和 "years" 的 id 


EN: 


这 些 id 将 在 表格 下 面 的 JavaScript 代 码 中 用 到 。 我 们 注意 到 ， 有 一 些 


input 元 素 定义 了 人 "onchange" 或 "onclick" 的 事件 处 理 程序 ， 以 便 用 户 在 输入 数据 或 者 点 


执行 指定 的 JavaScript 代 码 段 


盱 inputs 时 


<table> 


<tr><th>Enter Loan Data: </th> 


<td></td> 


<th>Loan Balance,Cumulative Equity,and Interest Payments</th></tr> 


<tr><td>Amount of the loan($):</td> 


<td><input id="amount"onchange="calculate();"></td> 


<td rowspan=8> 


<canvas id="graph"width="400"height="250"></canvas> </td> </tr> 


<tr><td>Annual interest(%):</td> 


<td><input id="apr"onchange="calculate();"></td></tr> 


<tr><td>Repayment period(years):</td> 


<td><input id="years"onchange="calculate();"></td> 


<tr><td>Zipcode(to find lenders):</td> 


<td><input id="zipcode"onchange="calculate();"></td> 


<tr><th>Approximate Payments: </th> 


<td><button onclick="calculate();">Calculate</button></td></tr> 


<tr><td>Monthly payment: </td> 


<td>$<span class="output"id="payment"></span> </td> </tr> 


<tr><td>Total payment:</td> 


<td>$<span class="output"id="total"></span> </td> </tr> 


<tr><td>Total interest:</td> 


<td>$<span class="output"id="totalinterest"></span></td></tr> 


<tr><th>Sponsors:</th><td colspan=2> 


Apply for your loan with one of these fine lenders: 


<div id="lenders"></div></td></tr> 


</table> 


< 1!-- 随 后 是 JavaScirpt 代 码 ， 这 些 代码 内 骨 在 了 一 个 <script>> 标 签 里 - - > 


上 


十 
V 


<1!1- -通常 情况 下 ， 这 些 脚本 代码 应 当 放 在 <head > 标签 


<1-- 将 JavaScript 代 码 放 在 HTML 代 码 之 后 仅仅 是 为 了 便于 理解 - - > 


<script> 


"use strict";// 如 果 浏 览 器 支持 的 话 ， 则 开启 ECMAScript 5 的 严格 模式 /* 


* 这 里 的 脚本 定义 了 caculate() 画 数 ， 在 HTML 代 码 中 绑 定 事件 处 理 程序 时 会 调用 它 


4 


* 这 个 函数 从 <input > 元 素 中 读 取 数据 ， 计 算 贷 款 赔付 信息 ， 并 将 结果 显示 在 < span> 元 素 


ba 


展示 了 放贷 人 链接 并 绘制 出 了 图 对 


* 同 样 ， 这 里 还 保存 了 用 户 数 


HU 
/ 


A 


TH 
0 


于 输入 输出 的 元 素 


function calculate( ){// 查 找 文档 


var amount=document .getElementById("amount"); 


var apr=document .getElementById("apr"); 


Var years=document .getElementById("years"); 


var zipcode=document .getElementById("zipcode"); 


var payment=document .getElementById("payment"); 


Var total=document .getElementById("total"); 


var totalinterest=document.getElementById("totalinterest");// 假 设 所 有 的 输入 都 是 合法 的 ， 将 
从 input 元 素 中 获取 输入 数据 


// 将 百分比 格式 转换 为 小 数 格式 ， 并 从 年 利率 转换 为 月 利率 


// 将 年 度 赔付 转换 为 


度 赔 付 


var principal=parseFloat(amount .Value ) ， 


var interest=parseFloat(apr.value)/100/12; 


var payments=parseFloat(years.value)*12;// 现 在 计算 月 度 赔付 的 数据 


var x=Math.pow(1+interest,payments);//Math.pow( ) 进 行 究 次 运算 


var monthly=(principal*x*interest)/(x-1);// 如 果 结 果 没 有 超过 JavaScript 能 表示 的 数字 范围 ， 
户 的 输入 也 正 胡 


二 


// 这 里 所 展示 的 结果 就 是 合法 的 


if(isFinite(month1ly) ){// 将 数据 填充 至 输出 字段 的 位 置 ， 四 会 五 入 到 小 数 点 后 两 位 数字 


汪 


payment.innerHTML=monthly.toFixed(2); 


total.innerHTML=(monthly*payments).toFixed(2); 


totalinterest.innerHTML=( (monthly*payments)-principal).toFixed(2);// 将 用 户 的 输入 数据 保存 
下 来 ， 这 样 在 下 次 访问 时 也 能 取 到 数据 


本 地 放贷 人 ， 但 忽略 网 络 错 


尊 
ll 


save(amount .value, apr .value, years.value,zipcode.value);// 找 到 


误 


try{// 捕 获 这 段 代 码 抛 出 的 所 有 异常 


getLenders(amount ,value,apr,.value,years,VvValue zipcode.value ) 


catch(e){/* 名 上 略 这 些 异 常 */}// 最 后 ， 用 图 


展示 贷款 余额 、 利 息 和 资产 收益 


计 | 


chart(principal,interest,monthly,payments); 


else{// 计 算 结 有 果 不 是 数字 或 者 是 无 穷 大 ， 意 味 着 输入 数据 是 非法 或 不 完整 的 


// 清 空 之 前 的 输出 数据 


payment .innerHTML="";// 清 空 元 素 的 文本 内 容 


total.innerHTML="" 


totalinterest.innerHTML=""， 


ba 


chart () ; // 不 传 参数 的 话 就 是 清除 图 


// 将 用 户 的 输入 保存 至 1ocalStorage 对 象 的 属性 中 


// 这 些 属 性 在 再 次 访问 时 还 会 继续 保持 在 原 位 置 


// 如 果 你 在 浏览 器 中 按照 file://URL 的 方式 直接 打 地 文 从 


让 


// 则 无 法 在 某 些 浏览 器 中 使 用 存储 功能 〈 比 如 FireFox) 


// 而 通过 HTTP 打 开 文 件 是 可 行 的 


瑟 


function Save(amount, apr,years, zipcode){ 


if(window.1localStorage)f{// 只 有 


竺 浏览 器 支持 的 时 候 才 运行 这 里 的 代码 


Be 


上 


localStorage.loan_amount=amount,; 


localStorage.1loan_apr=apr; 


localStorage.1loan_years=years; 


localStorage.1loan zipcode=zipcode,; 


// 在 文档 首次 加 载 时 ， 将 会 尝试 还 原 输 入 字段 


window.onload=function( ){// 如 果 浏 览 器 支持 本 地 存储 并 


上 次 保存 的 值 是 存在 的 


if(window.localStorage&&localStorage.loan amount){ 


document .getElementById("amount").value=localStorage.loan amount; 


document .getElementById("apr").value=localStorage.loan apr; 


document .getElementById("years").value=localStorage.1loan years,; 


document .getElementById("zipcode").value=localStorage.loan zipcode; 


};// 将 用 户 的 输入 发 送 至 服务 器 端 脚本 (理论 上 ) 将 


UD 


// 返 回 一 个 本 地 放贷 人 的 链接 列 对 


在 这 个 例子 


没 


ba 


// 但 如 果 该 服务 存在 ， 该 函数 会 使 用 它 


function getLenders(amount,apr,years,zipcode){// 如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 ， 


有 实现 这 利 


查找 放贷 人 的 服务 


所 口号 


if(!window.XMLHttpRequest)return;// 找 到 要 显示 放贷 人 列表 的 元 素 


var ad=document.getElementById("lenders"); 


则 退 


PP 


if(!ad)r 


// 将 用 户 的 输入 数据 进行 URL 编 码 ， 并 作为 查询 参数 附加 在 URL 里 


Var url= 


"3amt="+encodeURIComponent (amount )+// 使 用 查询 串 中 的 数据 


eturn;// 如 果 返 回 为 空 ， 则 退出 


"getLenders .php"+// 处 理 数 和 


"&apr="+encodeURIComponent(apr )+ 


"Cyrs="t+encodeURIComponent (years )+ 


"&zip="+encodeURIComponent(zipcode);// 通 过 XMLHttpRequest 对 象 来 提取 返 


var req=new XMLHttpRequest();// 发 起 一 个 


req.open 


req.send 


居 的 URL 地 址 


NE 


I 


数据 


新 的 请 求 


("GET", Url1);// 通 过 URL 发 起 一 个 HTTP GET 请 求 


(null);// 不 带 任何 正文 发 送 这 个 请 求 


// 在 返回 数据 之 前 ， 注 册 了 一 个 事件 处 理 函 数 ， 这 个 处 理 函 数 


// 将 会 在 服务 器 的 响应 返回 至 窜 


Wy 


NE 


// 这 种 异步 


ASS 


忌 


req.onreadystatechange=function(){ 


if(req.readyState==4&&%&req.status==200){// 如 果 代 码 运 行 至 


HTTP 响 应 


var response=req.responseText;//VHTTP 响 


var lenders=JSON.parse(response);// 将 


// 将 数组 


P 的 放贷 人 对 象 转换 为 HTML 字 符 


Var list=""; 


户 端 的 时 候 调用 


for(var 1=0);1I<lenders, length;I++){ 


出 程 模 型 在 客户 端 JavaScript 中 是 非常 常见 的 


有 ， 说 明 我 们 得 到 了 一 个 合法 


[8 
In 


完整 的 


应 是 以 字符 串 的 形式 呈现 的 


其 解析 为 JS 数 组 


list+="<1i><a href='"+Jenders[I] ,Url+"”' > "二 


lender 


// 将 数 


s[il].name+"</a>",; 


居 在 HTML 元 素 中 呈现 出 来 


ad.innerHTML="<Uul>"+list+"</ul>",，; 


// 在 HTML< canvas > 元 素 中 用 民 


// 如 果 不 传 入 参数 的 话 ， 则 清空 


伙 / 让 修 


前 的 图 表 数 据 


] 度 贷款 余额 、 利 息 和 资 


产 收益 


function chart(principal,interest,monthly,payments)t{ 


var graph=document .getElementById("graph");// 得 至 


graph .width=graph .width;// 


// 如 果 不 传 入 参数 ， 或 者 浏览 器 不 支持 下 


El 


由 


站 


上 < canvas > 标签 


中 
tp 


巧妙 的 手法 清除 


i 布 ， 则 直接 返 


| 


if(arguments.length==0||!graph.getcontext)return;// 获 得 画布 元 素 的 "context" 对 象 ， 这 个 对 象 


义 了 一 组 绘画 API 


var g=graph.getCcontext("2d");// 所 有 的 绘画 操作 都 将 基 了 


Var wi 


height 


dth=graph .width, 


=graph .height;// 获 得 


画布 大 4 


// 这 里 的 函数 作用 是 将 付款 数字 和 


functi 


on paymentToX(n){ 


美元 数 


四 转换 为 像素 


这 个 对 象 


Pm 


下 


return n*width/payments;} 


function amountToY(a){ 


return height-(a*height/(monthly*payments*1.05));}// 付 款 数 据 是 一 条 从 (0, 0) 到 


(payments,monthly*payments ) 的 直线 


g.moveTo(paymentToX(0),amountToY(0));// 从 左下 方 开始 


g.lineTo(paymentToX(payments),// 绘 至 右上 方 


amountToY(monthly*payments)); 


g.lineTo(paymentToX(payments),amountToY(0));// 再 至 右 下 方 


g .closePath( ) ;// 将 结尾 连接 至 开头 


g.fillStyle="#f88";// 亮 红色 


g.fil1();// 填 充 矩 


ROY 


g.font="bold 12px sans-serif";// 定 义 一 种 字体 


g.fillText("Total Interest Payments",20,20);// 将 文字 绘制 到 图 例 中 


// 很 多 资产 数据 并 不 是 线性 的 ， 很 难 将 其 反映 3 


图 表 中 


ty 


Var equity=0; 


g,beginPath( );// 开 始 绘制 新 图 形 


g.moveTo(paymentToX(0),amountToY(0));// 从 左下 方 开始 


for(var p=1;p<=payments;p++){// 计 算出 每 一 笔 赔付 的 利息 


var thisMonthsIinterest=(principal-equity)*interest,; 


equity+=(monthly-thisMonthsInterest);// 得 到 资产 额 


g.lineTo(paymentToX(p),amountToY(equity));// 将 数据 绘制 到 画布 上 


g.lineTo(paymentToX(payments),amountToY(0));// 将 数据 线 绘 1 


g .closePath( );// 将 线条 结尾 连接 至 线条 开头 


g.fillsStyle="green";// 使 用 绿色 绘制 民 


g.fi11();// 


g.fillText("Total Equity",20,35);// 文 本 颜色 设置 为 绿色 


// 再 次 循环 ， 余 额 数 


/| 
ROY 


Var bal=principal; 


g.beginpath(); 


线 之 下 的 部 分 均 填 充 


g.moveTo(paymentToX(0),amountToY(bal)); 


for(var p=1;p<=payments;p++)f{ 


var thisMonthsInterest=bal*interest,; 


bal-=(monthly-thisMonthsInterest );// 得 到 资产 额 


g.lineTo(paymentToX(p),amountToY(bal));// 将 直线 连接 至 某 点 


g.linewidth=3;// 将 


g .Stroke( ) ;// 绘 制 余额 的 


g.fillstyle="black";// 


线 宽度 加 粗 
线 
区 用 黑色 字体 


g.fillText("Loan Balance",20,50);// 图 例文 字 


// 将 入 


度数 


居 夏 


EX 轴 


做 标记 


所 


2 


至 x 


g.textAlign="center";// 文 字 居 中 对 齐 


var y=amountToY(0);//Y 坐 标 设 为 0 


for(var year=1;year*12<=payments;year++){// 遍 历 每 


var x=paymentToX(year*12);//i 


算 标记 位 


g.fillRect (x-0.5,y-3,1,3);// 开 始 绘制 标记 


if(year==1)g.fillText("Year",x,y-5);// 在 坐标 肌 


if(year%5==0&&year*121==payments )// 每 


g.fillText(String(year),x,y-5); 


// 将 赔付 数额 标记 在 右边 界 


g.textAlign="right";// 文 字 右 对 齐 


/全 


g.textBaseline="middle";// 文 字 于 


蔬 


var ticks=[monthly*payments,principal];// 我 们 将 要 


var rightEdge=paymentToX(payments);// 设 


for(var i=0;i<ticks.length;i++){// 对 每 


5 


Hy 


FE 的 数据 


Ho 


做 标记 


XxX 坐标 


g.fillRect(rightEdge-3,y-0.5,3,1);// 绘 和 


g.fillText(String(ticks[i].toFixed(0)),// 绘 制 文本 


rightEdge-5,y); 


var y=amountToY(ticks[i]);// 计 算 每 个 标记 自 


个 点 做 循环 


这 
Sl 


周 标 记 


到 的 两 个 点 


</script> 


</body> 


</html> 


第 一 部 分 “JavaScript 语言 核心 


本 书 该 部 分 (第 2~12 章 ) 描述 JavaScript 语 言 核心 。 这 部 分 是 该 语言 
的 主要 参考 资料 9 学 习 之 初 通读 一 届 该 部 分 ， 以 后 在 遇 到 JavaScript 的 
难点 时 ， 回 到 这 里 重新 查阅 相关 内 容 以 巩固 知识 的 掌握 : 


第 2 章 ” 词 法 结构 
第 3 半 ”类 型 、 值 和 变量 
第 4 章 ”表达 式 和 运算 符 
第 5 章 ”语句 

第 6 章 ”对 象 

第 7 草 ”数组 

第 8 章 ”函数 


第 9 草 ”类 和 模块 
第 10 章 ”正则 表达 式 的 模式 匹配 
第 11 章 。 JavaScript 的 子 集 和 扩展 


第 12 章 ”服务 器 端 JavaScript 


第 2 章 ”词法 结构 


编程 语言 的 词法 结构 是 一 套 基础 性 规则 ， 用 来 描述 如 何 使 用 这 门 语言 
来 编写 程序 。 作 为 语法 的 基础 ， 它 规定 了 诸如 变量 名 是 什么 样 的 、 怎 
么 写 注 释 ， 以 及 程序 语句 之 间 如 何 分 隅 等 规则 。 本 章 用 很 短 的 篇 幅 来 
介绍 JavaScript 的 词法 结构 。 


2.1 字符 集 


JavaScript 程 序 是 用 Unicode 字 符 集 编写 的 。Unicode 是 ASCII 和 Latin-1 的 
超 集 ， 并 文 持 地 球 上 几乎 所 有 在 用 的 语言 。ECMAScript 3 要 求 
JavaScript 的 实现 必须 支持 Unicode 2.1 及 后 续 版 本 ，ECMAScript 5 则 要 
求 文 持 Unicode 3 及 后 续 版 本 。 可 以 参考 3.2 帮 的 “边栏 ?来 了 解 更 多 天 于 
Unicode 和 JavaScript 的 信息 。 


2 区 个 小生 


JavaScript 是 区 分 大 小 写 的 语言 。 也 就 是 说 ， 关 键 子 、 变 量 、 碎 数 名 和 
所 有 的 标识 符 (identifier) 都 必须 采取 一 致 的 大 小 写 形 式 。 比 如 ， 关 键 
字 '"while" 必 须 写 成 "while"， 而 不 能 写成 "While" 或 者 "WHILE"。 同 

样 ，"online"、"Online"、"OnLine" 和 "ONLINE" 是 4 个 不 同 的 变量 名 。 


但 需要 注意 的 是 ，HTML 并 不 区 分 大 小 写 (尽管 XHTML 区 分 大 小 \ 

写 ) 。 由 于 它 和 客户 端 JavaScript 联 系 紧密 ， 因 此 这 点 区 别 很 容易 混淆 
1。 许多 客户 端 JavaScript 对 象 和 属性 与 它们 所 表示 的 HTML 标签 和 属 
性 同名 。 在 HTML 中 ， 这 些 标签 和 属性 名 可 以 使 用 大 写 也 可 以 是 小 写 ， 
而 在 JavaScript 中 则 必须 是 小 写 。 例 如 ， 在 HTML 中 设置 事件 处 理 程序 
时 ，onclick 属 性 可 以 写成 onClick， 但 在 JavaScript 代 码 (或 者 XHTML 文 
档 ) 中 ， 必 须 使 用 小 写 的 ondlick 。 


2.1.2 空格、 换行 符 和 格式 控制 符 


JavaScript 会 忽略 程序 中 标识 (token) I! 全 之 间 的 空格 。 多 数 情 况 下 ， 
JavaScript 同 样 会 包 略 换行 符 〈2.5 节 提 到 了 一 种 意外 情形 ) 。 由 于 可 以 
在 代码 中 随意 使 用 空格 和 换行 ， 因 此 可 以 采用 整齐 、 一 致 的 缩 进来 形 
成 统一 的 编码 风格 ， 从 而 提高 代码 的 可 读 性 。 


除了 可 以 识别 普通 的 空格 符 (u0020) ，JavaScript 还 可 以 识别 如 下 这 
些 表示 空格 的 字符 : 水 平 制 表 符 (0009) 、 垂 直 制 表 符 (W000B) 
换 页 符 (u000C) 、 不 中 断 空白 (u00A0)、 字 节 序 标记 (QuFEFF)， 以 及 
在 Unicode 中 所 有 Zs 类 别 的 字符 Bi. 。JavaScript 将 如 下 字符 识别 为 行 结 
符 : 换行 符 (\u000A) ， 回 车 符 (\u000D) ， 行 分 隔 符 (u2028) ， 段 
分 隔 符 《2029) 。 回 车 符 加 换行 符 在 一 起 被 解析 为 一 个 单行 结束 符 。 


Unicode 格 式 控制 字符 〈Cf 类 4) ， 比 如 “从 右 至 左 书写 标 

记 ”(\u200F) 和 “从 左 至 右 书写 标记 ”(\u200E) Bl.， 控 制 着 文本 的 视 
觉 显示 ， 这 对 于 一 些 非 英 语文 本 的 正确 显示 来 说 是 至 关 重 要 的 ， 这 些 
字符 可 以 用 在 JavaScirpt 的 注释 、 字 符 串 直接 量 和 正则 表达 式 直 接 量 
中 ， 但 不 能 用 在 标识 符 (比如 ， 变 量 名 ) 中 。 但 有 个 例外 ， 零 宽 连 接 
符 (200D) 和 零 宽 非 连 接 符 (WFEFF) -是 可 以 出 现在 标识 符 中 
的 ， 但 不 能 作为 标识 符 的 首 字 符 。 上 文 也 提 到 了 ， 字 节 序 标记 格式 控 
制 符 (uFEFF) 被 当成 了 空格 来 对 待 。 


2.1.3” ”Unicode 转 义 序列 


在 有 些 计算 机 硬件 和 软件 里 ， 无 法 显示 或 输入 Unicode 字 符 全 集 。 为 了 
支持 那些 使 用 老 旧 技术 的 程序 员 ，JavaScript 定 义 了 一 种 特殊 序列 ， 使 
用 6 个 ASCII 字 符 来 代表 任意 16 位 Unicode 内 码 。 这 些 Unicode 转 义 序列 
均 以 \u 为 前 级 ， 其 后 跟随 4 个 十 六 进 制 数 (使 用 数字 以 及 大 写 或 小 写 的 
字母 A~F 表 示 ) 。 这 种 Unicode 转 义 写法 可 以 用 在 JavaScript 字 符 串 直接 
量 、 正 则 表达 式 直 接 量 和 标识 符 中 (关键 字 除 外 ) 。 例 如 ， 字 符 6 的 
Unicode 转 义 写 法 为 un00E9， 如 下 两 个 JavaScript 字 符 串 是 完全 一 样 的 : 


"cafe"==="caf\u00e9"/V/=>true 


Unicode 转 义 写 法 也 可 以 出 现在 注释 中 ， 但 由 于 JavaScript 会 将 注释 忽 
略 ， 它 们 只 是 被 当成 上 下 文中 的 ASCII 字 符 处 理 ， 而 且 并 不 会 被 解析 为 
其 对 应 的 Unicode 字 符 。 


2.1.4 ”标准 化 


Unicode 人 允许 使 用 多 种 方法 对 同一 个 字符 进行 编码 。 比 如 ， 了 字符 “6” 可 以 
使 用 Unicode 字 符 \u00E9 表 示 ， 也 可 以 使 用 普通 的 ASCII 字 符 e 跟 随 一 个 


语调 符 u0301。 在 文本 编辑 吉 中 ， 这 两 种 编码 的 显示 结 采 一 模 一 样 ， 但 
它们 的 二 进 制 编码 表示 是 不 一 样 的 ， 在 计算 机 里 也 不 相等 。Unicode 标 
准 为 所 有 字符 定义 了 一 个 首选 的 编码 格式 ， 并 给 出 了 一 个 标准 化 的 处 
理 方 式 将 文本 转换 为 一 种 适合 比较 的 标准 格式 ，JavaScript 会 认为 它 正 
在 解析 的 程序 代码 已 经 是 这 种 标准 格式 ， 不 会 再 对 其 标识 符 、 字 符 串 
或 正则 表达 式 作 标准 化 处 理 。 


2.2 ”注释 


JavaScript 文 持 两 种 格式 的 注释 。 在 行 尾 %/* 之 后 的 文本 都 会 彼 JavaScript 
当做 注释 忽略 掉 的 。 此 外 ，”*” 和 “*/" 之 间 的 文本 也 会 当做 注释 ， 这 种 
但 不 能 有 赂 套 的 注释 。 下 面 都 是 合法 的 JavaScript 
壮 任 : 


// 这 里 是 单行 注释 


讲 


/* 这 里 是 一 段 注 释 */// 这 里 是 男 一 段 注 科 


* 这 又 是 一 段 注释 


II 


注释 可 以 连 写 多 行 


* 这 里 


*/ 


2.3 直接 量 

所 谓 直接 量 (iteral) ， 就 是 程序 中 直接 使 用 的 数据 值 。 下 面 列 出 的 都 
是 直接 量 ; 

12// 数 字 

1.2// 小 数 


"hello wor1d"7V/ 字 符 串 文本 


'Hi'// 男 一 个 字符 串 


true// 布 尔 值 


false// 另 一 个 布尔 值 


/javascript/gi 


// 正 则 表达 式 直接 是 


做 模式 匹配 ) 


null// 空 


第 3 章 会 详细 讲解 数字 和 字符 串 直 接 量 。 正 则 表达 式 直 接 量 会 在 第 10 章 
ee (参见 4.2 节 ) 可 以 写成 数组 或 对 象 直 接 
量 ， 例 如 : 


{X:1,y:2}// 对 象 


[1, 2, 3,4, 5]// 数 组 


2.4 标识 符 和 保留 字 


标识 符 就 是 一 个 名 字 。 在 JavaScript 中 ， 标 识 符 用 来 对 变量 和 函数 进行 
命名 ， 或 者 用 做 JavaScript 代 码 中 某 些 循环 语句 中 的 跳 转 位 置 的 标记 。 
JavaScript 标 识 符 必 须 以 字母 下划线 (_) 或 美元 符 ($) 开始 。 后 续 
的 字符 可 以 是 字母 、 数 字 、 下 划 线 或 美元 符 (数字 是 不 允许 作为 首 字 
符 出 现 的 ， 以 便 JavaScript 可 以 轻易 区 分 开标 识 符 和 数字 ) 。 下 面 是 合 
法 的 标识 符 : 


工 


my_variable_name 


V13 


_dummy 


$str 


出 于 可 移植 性 和 易于 书写 的 考虑 ， 通 常 我 们 只 使 用 ASCII 字 母 和 数字 来 
书写 标识 符 。 然 而 需要 注意 的 是 ，JavaScript 允 许 标 识 符 中 出 现 Unicode 
字符 全 集中 的 字母 和 数字 。 (从 技术 上 讲 ，ECMAScript 标 准 也 允许 在 
标识 符 的 首 字 符 后 面 出 现 Unicode 字 符 集中 的 Mn 类 、Mc 类 和 Pc 类 7 
) 。 由 此 ， 程 序 员 也 可 以 使 用 非 英 语 语言 或 数学 符号 来 书写 标识 符 : 


Var si=true; 

varTn=3.14; 

和 其 他 任何 编程 语言 一 样 ，JavaScript 保 留 了 一 些 标识 符 为 自己 所 用 。 
这 些 “ 保 留 字 ”不 能 用 做 普通 的 标识 符 ， 下 面 会 讲 到 。 

体 久 字 


JavaScript 把 一 些 标识 符 拿 出 来 用 做 目 己 的 关键 子 。 因 此 ， 束 不 能 再 在 
程序 中 把 这 些 关 键 字 用 做 标识 符 了 : 


break delete function return typeof 
case do if switch var 
catch else in this void 
continue false instanceof throw while 
debugger finally new true with 
default for null try 


JavaScript 同 样 体 留 了 一 些 天 键 子 ， 这 些 关 键 子 在 当前 的 语言 版 本 中 并 
和 使 用 ， 但 在 未 来 版 本 中 可 能 会 用 到 。ECMAScript 5 保留 了 这 些 天 
建 字 : 


class const enum export extends import super 


此 外 ， 下 面 这 些 关键 字 在 普通 的 JavaScript 代 码 中 是 合法 的 ， 但 是 在 严 
格 模式 下 是 保留 字 : 


implements let private public yield 


interface package protected static 


严格 模式 同样 对 下 面 的 标识 符 的 使 用 做 了 严格 限制 ， 它 们 并 不 完全 是 
保留 字 ， 但 不 能 用 做 变量 名 、 画 数 名 或 参数 名 : 


arguments eval 


ECMAScript 3 将 Java 的 所 有 关键 字 都 列 为 目 己 的 保留 字 ， 尽 管 这 些 体 留 
字 在 ECMAScript 5 中 放宽 了 限制 ， 但 如 采 你 和 希望 代码 能 在 基于 

3 实现 的 解释 右上 运行 的 话 ， 应 当 避 人 免 使 用 这 些 天 键 字 作 
人 未 识 符 : 


abstract double goto native static 
boolean enum implements package super 

byte export import private synchronized 
char extends int protected throws 

class final interface public transient 
const float long short volatile 


JavaScript 预 定义 了 很 多 全 局 变量 和 函数 ， 应 当 避 免 把 它们 的 名 字 用 做 
变量 名 和 函数 名 : 


arguments encodeURI Infinity Number RegExp 


Array encodeURIComponent isFinite € 0Qbject String 
Boolean Error isNaN parseFloat SyntaxError 
Date eval JSON parseInt TypeError 
decodeURI EvalError Math RangeError undefined 
decodeURIComponent Function Na ReferenceError URIError 


JavaScript 的 具体 实现 可 能 定义 独 有 的 全 局 变量 和 函数 ， 每 一 种 特定 的 
JavaScript 运 行 环境 〈 客 户 端 、 服务 器 闪 等 ) 都 有 目 己 的 一 个 全 局 属性 
列表 ， 这 一 点 是 需要 牢记 的 。 参 照 第 四 部 分 的 Window 对 象 来 了 解 客户 
端 JavaScript 中 定义 的 全 局 变 : 量 和 而 数 列表 。 


2.5 ”可 选 的 分 号 


和 其 他 许多 编程 语言 一 样 ，JavaScript 使 用 分 号 (;) 将 语句 (参见 
章 ) 分 隔 开 。 这 对 增强 代码 的 可 读 性 和 整洁 性 是 非常 重要 的 : 2 
隔 伯 ， 一 条 语句 的 结束 就 成 了 下 一 条 语句 的 开始 ， 反 之 亦 然 。 在 
JavaScript 中 ， 如 果 语 句 各 目 独 占 一 行 ， 通常 可 以 省 略语 句 之 间 的 分 号 
(程序 结尾 或 右 花 括号 “}”* 之 前 的 分 号 也 可 以 省 略 ) 。 许 多 JavaScript 程 
序 员 (包括 本 书 中 的 示例 代码 ) 使 用 分 号 来 明确 标记 语句 的 结束 ， 即 
使 在 并 不 完全 需要 分 号 的 时 候 也 是 如 此 。 另 一 种 风格 就 是 ， 在 任何 可 
以 省 略 分 号 的 地 方 都 将 其 省 略 ， 只 有 在 不 得 不 用 的 时 候 才 使 用 分 号 。 
关于 javascript 中 可 选 先 分 号 的 问题 有 几 个 细 市 
需要 } 


0 代码， 因为 两 条 语句 用 两 行书 写 ， 第 一 个 分 写 是 可 以 省 略 挥 


如 琳 按 照 如 下 格式 书写 ， 第 一 个 分 号 则 不 能 省 略 挥 : 


a=3;b=4; 


需要 注意 的 是 ，JavaScript 并 不 是 在 所 有 换行 处 都 填补 分 号 : 只 有 在 缺 
少 了 分 号 束 无 法 正确 解析 代码 的 上 时候 ，JavaScript 才 会 填补 分 号 。 换 句 
话 讲 《类 似 下 面 代码 中 的 两 处 异常 ) ， 如 果 当 前 语句 和 随后 的 非 空格 
字符 不 能 当成 一 个 整体 来 解析 的 话 ，JavaScript 束 在 当前 语句 行 结束 处 
填补 分 号 。 看 一 下 如 下 代码 : 


Var a 


3 


console.1og(al) 


JavaScript 将 其 解析 为 : 


var a;a=3;console.1o0g(a); 


JavaScript 给 第 一 行 换行 处 添加 了 分 号， 因为 如 果 没 有 分 号 ，JavaScript 
就 无 法 解析 代码 var aa。 第 二 个 a 可 以 单独 当做 一 条 语句 "a;"， 但 
JavaScript 并 没有 给 第 二 行 结尾 填补 分 号 ， 因 为 它 可 以 和 第 三 行内 容 一 
起 解析 成 “a=3;”。 


这 些 语句 的 分 隔 规 则 会 导致 一 些 意 想不到 的 情形 ， 这 上段 代码 写成 了 两 
行 ， 看 起 来 是 两 条 独立 的 语句 : 


Var y=x+f 


(a+b).tostring() 


但 第 二 行 的 圆 插 号 却 和 第 一 行 的 { 组 成 了 一 个 函数 调用 ，JavaScript 会 把 
这 段 代 码 看 做 : 


Var y=x+f(a+b).toSstring(); 


而 这 段 代 码 的 本 意 并 不 是 这 样 。 为 了 能 让 上 述 代码 解析 为 两 条 不 同 的 
语句 ， 必 须 手 动 填写 行 尾 的 显 式 分 号 。 


通 肖 来 讲 ， 如 琳 一 条 语句 以 “<” 、“[”、“/*”、“+” 或 “-” 开 始 ， 那 么 它 极 有 

可 能 和 前 一 条 语句 合 在 一 起 解析 。 以 %”、“+” 和 和 “-” 开 始 的 语句 并 不 常 

见 ， 而 以 “和 “开始 的 语句 则 非常 单 见 ， 至 少 在 一 些 JavaScript 编 码 风 

格 中 是 很 普遍 的 。 有 些 程序 员 喜 欢 保守 地 在 语句 前 加 上 一 个 分 号 ， 这 

i ` 分 号 被 误 删 除了 ， 当 前 语句 还 古 会 正确 
牛 : 


var Xx=0// 这 里 省 略 了 分 号 


E 确 地 语句 解析 


; [x, x+1, x+2] .forEach(console.10g)// 前 面 的 分 号 保证 


i 
[ 
er 


如 果 当 前 语句 和 下 一 行 语句 无 法 合并 解析 ，JavaScript 则 在 第 一 行 后 填 
付 分 号 ， 这 是 通用 规则 ， 但 有 两 个 例外 。 第 一 个 例外 是 在 涉及 return、 
break 和 continue 语 句 (参见 第 5 章 ) 的 场景 中 。 如 果 这 三 个 关键 字 后 紧 
跟着 换行 ，JavaScript 则 会 在 换行 处 填补 分 号 。 例 如 ， 这 上 段 代 码 : 


return 


true; 


JavaScript 会 解析 成 : 


return;true; 


而 代码 的 本 意 是 这 样 : 


return true; 


也 就 是 说 ， 在 return、break 和 continue 和 随后 的 表达 式 之 间 不 能 有 换 
行 。 如 果 添 加 了 换行 ， 程 序 则 只 有 在 极 特 殊 的 情况 下 才 会 报错 ， 而 且 
程序 的 调试 非常 不 方便 。 


第 二 个 例外 是 在 涉及 “++” 和 “一 一 ”运算 符 ( 见 4.8 节 ) 的 上 时候。 这 些 运 
算 符 可 以 作为 表达 式 的 前 级 ， 也 可 以 当做 表达 式 的 后 级 。 如 果 将 其 用 
做 后 缀 表达 式 ， 它 和 表达 式 应 当 在 同一 行 。 否 则 ， 行 尾 将 填补 分 号 ， 
同时 “++4” 或 “一 一 ”将 会 作为 下 一 行 代码 的 前 缀 操作 和 从 并 与 之 一 起 解 
析 ， 例 如 ， 这 段 代 码 : 


这 段 代码 将 解析 为 "c++y"， 而 不 是 "x++:y" 。 
[1 严格 讲 XHTML 是 区 分 大 小 写 的 ， 但 由 于 浏览 器 有 着 非常 较 强 大 的 


纠 错 能 力 ， 即 使 文档 中 包含 很 多 不 闫 格 的 大 小 写 ， 济 名 如 还 古 比 较 “ 宽 
容 " 地 正确 解析 洽 染 。 


[2]. 请 参照 http://en.wikipedia.org/wiki/Token 。 
[3].Unicode 对 其 所 有 字符 做 了 分 类 ， 这 种 分 类 使 用 “通用 类 别 值 ” 表 示 ， 


这 里 的 "Zs" 既 是 其 中 一 种 类 别 值 ， 特 指 没 有 标志 符号 但 不 属于 控制 或 格 
式 字 待 的 空格 字符 。 更 多 类 别 值 的 描述 请 参见 


http://www.unicode.org/reports/tr44/ 中 天 于 General Category Values 的 内 
窑 。 


[4].Cf 是 Unicode 中 的 一 种 “通用 类 别 值 ”， 指 代 那 些 影响 文本 布局 或 文本 
处 理 操作 但 通 肖 不 会 呈现 的 格式 字符 。 


[5]“ 从 右 至 左 书写 标记 ”(RIGHT-TO-LEFT MARK) 和 “从 左 至 右 书写 
标记 ” (LEFT-TO-RIGHT MARK) 均 属于 双向 字符 集 语 言 ， 字 符 是 带 
有 方向 的 ， 比 如 在 阿拉 伯 语 言 中 ， 标 点 位 于 单词 的 左 侧 ， 而 不 是 我 们 
通常 熟悉 的 右 侧 。 


[6].ZERO WIDTH(NON-)JOINER， 零 宽 ( 非 ) 连 接 符 ， 指 没有 宽度 的 不 可 
见 连 接 符 ， 在 蒙 文 、 满 文 、 锡 伯 文 等 少数 民族 语言 中 会 使 用 到 。 


[7]_Unicode 对 其 所 有 字符 做 了 分 类 ， 这 种 分 类 使 用 “通用 类 别 值 ”* 表 示 ， 
这 里 的 "Mn"、"Mc" 和 "Pc" 就 是 其 中 三 种 类 别 值 ，Mn 表 示 基 字符 的 修改 
中 出 现 的 非 间距 字符 ，Mec 表 示 基 字符 的 修改 中 影响 了 基 字 符 标 志 位 的 
宽度 的 间距 字符 ，Pc 指 连接 两 个 字符 的 连接 符 或 标点 符号 。 更 多 类 别 
值 的 描述 请 参见 http:/www.unicode.org/reports/tr44/ 中 关 于 General 
Category Values 的 内 容 。 


第 3 章 ”类 型 、 值 和 变量 


计算 机 程序 的 运行 需要 对 值 (value) (比如 数字 3.14 或 文本 "hello 
world") 进行 操作 。 在 编程 语言 中 ， 能 够 表示 并 操作 的 值 的 类 型 称 做 数 
据 类 型 (type) ， 编 程 语 言 最 基本 的 特性 就 是 能 够 文 持 多 种 数据 类 型 。 
当 程序 需要 将 值 保存 起 来 以 备 将 来 使 用 时 ， 便 将 其 赋值 给 (将 值 “ 保 
存 ”到 ) 一 个 变量 (variable) 。 变 量 是 一 个 值 的 符号 名 称 ， 可 以 通过 名 
称 来 获得 对 值 的 3 引用。 变量 的 工作 机 制 古 编程 语言 的 妨 一 个 基本 特 

性 。 本 章 将 详细 讲解 JavaScript 中 的 类 型 、 值 和 变量 。 这 里 的 引言 只 做 
你 可 以 通过 参照 1.1 节 来 帮助 理解 本 章 内 容 。 后 续 章 节 会 更 深入 

讲解 。 


JavaScript 的 数据 类 型 分 为 两 类 : 原始 类 型 (primitive type) 和 对 象 类 型 
(object type) 。JavaScript 中 的 原始 类 型 包括 数字 、 字 符 串 和 布尔 值 ， 
本 章 会 有 单独 的 章节 专门 讲述 JavaScript 中 的 数字 ( 见 3.1 节 ) 和 字符 串 ( 见 

3.2 廊 )， 布 尔 值 将 会 在 3.3 节 讲解 。 


JavaScript 中 有 两 个 特殊 的 原始 值 ，null 〈 空 ) 和 undefined (未 定义 ) ， 
它们 不 是 数字 、 字 符 串 和 布尔 值 。 它 们 通常 分 别 代表 了 各 目 特殊 类 型 
的 唯一 的 成 员 。3.4 世 将 会 详细 讲解 null 和 undefined 。 


JavaScript 中 除了 数字 、 字 人 符 串 、 布 尔 值 、nul 和 undefined 之 外 的 残 是 对 
象 了 。 对 象 (object) 是 属性 (property) 的 集合 ， 每 个 属性 都 由 “名 / 值 
对 ”( 值 可 以 是 原始 值 ， 比 如 数字 、 字 符 串 ， 也 可 以 是 对 象 ) 构成 。 其 
中 有 一 个 比较 特殊 的 对 象 一 一 全 局 对 象 (global object) 一 一 会 在 3.5 闻 
介绍 ， 第 6 章 会 有 更 完整 详细 的 描述 。 


普通 的 JavaScript 对 象 是 “命名 值 ”的 无 序 集合 。JavaScript 同 样 定义 了 一 
种 特殊 对 象 数组 (array) ， 表 示 带 编号 的 值 的 有 序 集合 。 
JavaScript 为 数组 定义 了 专用 的 语法 ， 使 数组 拥有 一 些 和 普通 对 象 不 同 
的 特有 行为 特性 。 第 7 章 将 专门 讲述 数组 。 


JavaScript 还 定义 了 为 一 种 特殊 对 象 一 一 画 数 。 函 数 是 具有 与 它 相 关联 
的 可 执行 代码 的 对 象 ， 通 过 调用 函数 来 运行 可 执行 代码 ， 并 返回 运算 
结果 。 和 数组 一 样 ， 函 数 的 行为 特征 和 其 他 对 象 都 不 一 样 。JavaScript 
为 使 用 函数 定义 了 专用 语法 。 对 于 JavaScript 函 数 来 讲 ， 最 重要 的 是 ， 


它们 都 是 真 值 ， 并 且 JavaScript 可 以 将 它们 当做 普通 对 和 象 来 对 待 。 第 8 章 
会 专门 讲述 而 数 。 


如 果 函 数 用 来 初始 化 (使 用 new 运 算 符 ) 一 个 新 建 的 对 象 ， 我 们 称 之 为 
构造 函数 (constructor) 。 每 个 构造 函数 定义 了 一 类 (class) 对 象 
由 构造 函数 初始 化 的 对 象 组 成 的 集合 。 类 可 以 看 做 是 对 象 类 型 的 子 类 
型 。 除 了 数组 (Array) 类 和 函数 (Function) 类 之 外 ，JavaScript 语 言 
核心 定义 了 其 他 三 种 有 用 的 类 。 日 期 (Date) 类 定义 了 代表 日 期 的 对 
象 。 正 则 (RegExp) 类 定义 了 表示 正则 表达 式 (一 种 强大 的 模式 匹配 
工具 ， 在 第 10 章 会 讲 到 ) 的 对 象 。 错 误 (Error) 类 定义 了 那些 表示 
JavaScript 程 序 中 运行 时 错误 和 语法 错误 的 对 象 。 可 以 通过 定义 自己 的 
构造 函数 来 定义 需要 的 类 。 这 会 在 第 9 章 讲述 。 


JavaScript 解 释 器 有 自己 的 内 存 管理 机 制 ， 可 以 自动 对 内 存 进 行 垃圾 回 
从 (garbage collection) 。 这 意味 着 程序 可 以 按 需 创建 对 象 ， 程 序 员 则 
不 必 担 心 这 些 对 象 的 销毁 和 内 存 回 收 。 当 不 再 有 任何 引用 指向 一 个 对 

象 是 解释 器 就 会 知道 这 个 对 象 没 用 了 ， 然 后 自动 回收 它 所 占用 的 内 存 

资源 。 


JavaScript 是 一 种 面向 对 象 的 语言 。 不 严格 地 讲 ， 这 意味 着 我 们 不 用 全 
局 的 定义 函数 去 操作 不 同类 型 的 什 ， 数 据 类 型 本 喘 可 以 定义 方法 
(method) 来 使 用 值 。 例 如 ， 要 对 数组 a 中 的 元 素 进 行 排序 ， 不 必要 将 
a 传 入 sort0 落 数 ， 而 是 调用 a 的 一 个 方法 sort(): 


a.Ssort();//sort(a) 的 面向 对 象 的 版 本 


第 9 章 将 会 讲述 方法 的 定义 。 从 技术 上 讲 ， 只 有 JavaScript 对 象 才 能 拥有 
方法 。 然 而 ， 数 字 、 字 符 串 和 布尔 值 也 可 以 拥有 目 己 的 方法 〈3.6 贡 解 
释 其 工作 机 制 ) 。 在 JavaScript 中 ， 只 有 null 和 undefined 是 无 法 拥有 方法 
的 值 。 


JavaScript 的 类 型 可 以 分 为 原始 类 型 和 对 象 类 型 ， 也 可 分 为 可 以 拥有 方 
法 的 类 型 和 不 能 拥有 方法 的 类 型 ， 同 样 可 分 为 可 变 (mutable) 类 型 和 
不 可 变 (immutable) 类 型 。 可 变 类 型 的 值 是 可 修改 的 。 对 象 和 数组 属 
于 可 变 类 型 : JavaScript 程 序 可 以 更 改 对 象 属 性 值 和 数组 元 素 的 值 。 数 
字 、 布 尔 值 、null 和 undefined 属 于 不 可 变 类 型 一 一 比如 ， 修 改 一 个 数值 


的 内 容 本 喘 殉 说 不 通 。 字 符 串 可 以 看 成 由 字符 组 成 的 数组 ， 你 可 能 会 
认为 它 是 可 变 的 。 然 而 在 JavaScript 中 ， 字 符 串 是 不 可 变 的 : 可 以 访问 
字符 串 任 意 位 置 的 文本 ， 但 JavaScript 并 未 提供 修改 已 知 字 符 串 的 文本 
内 容 的 方法 。3.7 太 会 详细 讲解 可 变 类 型 和 不 可 变 类 型 的 不 同 之 处 。 


JavaScript 可 以 自由 地 进行 数据 类 型 转换 。 比 如 ， 如 果 在 程序 期 望 使 用 
字符 哩 的 地 方 使 用 了 数字 ，JavaScript 会 自动 将 数字 转换 为 字符 串 。 如 
条 在 期 望 使 用 布尔 值 的 地 方 使 用 了 非 布 尔 值 ，JavaScript 也 会 进行 相应 
的 转换 。 类 型 较 换 规则 将 在 3.8 讲 述 。JavaScript 中 灵活 的 类 型 转换 规 


的 类 型 转换 细 市 将 在 3.8.1 节 详细 摘 述 。 


JavaScript 变 量 是 无 类 型 的 (untyped)， 变 量 可 以 被 赋予 任何 类 型 的 值 ， 
同样 一 个 变量 也 可 以 重新 赋予 不 同类 型 的 值 。 使 用 var 关 键 字 来 声明 

(declare) 变量 。JavaScript 采 用 词法 作用 域 (exical scoping) 。 不 在 
任何 函数 内 声明 的 变量 称 做 全 局 变量 (global variable) ， 它 在 
JavaScript 程 序 中 的 任何 地 方 都 是 可 见 的 。 在 函数 内 声明 的 变量 具有 画 
数 作 用 域 (function scope) ， 并 且 只 在 函数 内 可 见 。 变 量 声明 和 作用 域 
将 会 在 3.9 节 和 3.10 节 详细 讲解 。 


91 数字 


和 其 他 编程 语言 ! 直 不 同 ，JavaScript 不 区 分 整数 值 和 浮 点 数值 。 
JavaScript 中 的 所 有 数字 均 用 浮 点 数值 表示 。JavaScript 采 用 IEEE 754 标 
准 呈 -定义 的 64 位 浮 点 格式 表示 数字 ， 这 意味 着 它 能 表示 的 最 大 值 是 
+1.7976931348623157x10 308 ， 最 小 值 是 +5x10 -324 。 


按照 JavaScript 中 的 数字 格式 ， 能 够 表示 的 整数 范围 是 从 -9 007 199 254 
740 992~9 007 199 254 740 992( 即 -23~253)， 包 含 边界 值 。 如 果 使 用 
了 超过 此 范围 的 整数 ， 则 无 法 保证 低位 数字 的 精度 。 然 而 需要 注意 的 
是 ，JavaScript 中 实际 的 操作 (比如 数组 索引 ， 以 及 第 4 章 讲 到 的 位 操作 
符 ) 则 是 基于 32 位 整数 。 


当 一 个 数字 直接 出 现在 JavaScript 程 序 中 ， 我 们 称 之 为 数字 直接 量 

(numeric literal) 。JavaScript 支 持 多 种 格式 的 数字 直接 量 ， 在 接 下 来 
的 小 万 中 会 有 讨论 。 注 意 ， 在 任何 数字 直接 量 前 添加 人 负 号 (-) 可 以 得 
到 它们 的 负 值 。 但 负 号 是 一 元 求 反 运算 符 (参见 第 4 章 ) ， 并 不 是 数字 
直接 量 语法 的 组 成 部 分 。 


3.1.1” 整 型 直接 量 


在 JavaScript 程 序 中 ， 用 一 个 数字 序列 表示 一 个 十 进 制 整数 。 例 如 : 


0 
3 


10000000 


除了 十 进 制 的 整 型 直接 量 ，JavaScript 同 样 能 识别 十 六 进 制 (以 16 为 基 
数 ) 值 。 所 谓 十 六 进 制 的 直接 量 是 指 以 "0x" 或 "0X" 为 前 级 ， 其 后 跟随 十 
六 进 制 数 串 的 直接 量 。 十 六 进 制 值 是 0~9 之 间 的 数字 和 a (A) 一 

(F) 之 间 的 字母 构成 ，a~{ 的 字母 对 应 的 表示 数字 10~15。 下 面 是 十 
六 进 制 整 型 直接 量 的 例子 : 


Oxff//15*16+15=255( 十 进 各 


心 
\ 一 


OxCAFE911 


尽管 ECMAScript 标 准 不 文 持 八 进 制 直接 量 ， 但 JavaScript 的 某 些 实现 可 
以 允许 采用 八进制 〈 基 数 为 8) 形式 表示 整数 。 八 进 制 直接 量 以 数字 0 
于 其 后 跟随 一 个 由 0~7 (包括 0 和 7) 之 间 的 数字 组 成 的 序列 ， 例 
0D: 


0377//3*64+7*8+7=255( 十 进 制 ) 


由 于 某 些 JavaScript 的 实现 文 持 八进制 直接 量 ， 而 有 毕 不 文 持 ， 因 此 最 
好 不 要 使 用 以 0 为 前 组 的 整 型 直接 量 ， 毕 竞 我 们 也 无 法 得 知 当前 
JavaScript 的 实现 是 否 支持 八进制 的 解析 。 在 ECMAScript 6 〈 见 5.7.3 
节 ) 的 严格 模式 下 ， 八 进 制 直接 量 是 明令 禁止 的 。 


3.1.2 ” 浮 点 型 直接 量 


浮上 扣 型 直接 量 可 以 含有 小 数 点 ， 它 们 采用 的 是 传统 的 实数 写法 。 一 个 
实数 由 整数 部 分 、 小 数 点 和 人 小数 部 分 组 成 。 
此 外 ， 还 可 以 使 用 指数 记 数 法 表示 浮 点 型 直接 量 ， 即 在 实数 后 跟 字 苹 e 
或 已， 后 面 再 跟 正 负 号 ， 其 后 再 加 一 个 整 型 的 指数 。 这 种 记 数 方法 表示 
的 数值 ， 是 由 前 面 的 实数 乘 以 10 的 指数 次 项。 


可 以 使 用 更 位 涪 的 语法 表示 : 


[digits][.digits][(Ele)[(+|-)]digits] 


例如 : 


3.14 
2345.789 

.333333333333333333 
6.02e23//6.02x10 23 


1.4738223E-32//1.4738223x10 -32 


3.1.3 JavaScript 中 的 算术 运算 


JavaScript 程 序 是 使 用 语言 本 身 提 供 的 算术 运算 符 来 进行 数字 运算 的 。 
这 些 运 算 符 包括 加 法 运算 符 (+) 、 减 法 运算 符 (-) 、 乘 法 运算 符 
(*) 、 除 法 运算 符 〈(/) 和 求 余 ( 求 整除 后 的 余数 ) 运算 符 (%) 。 第 
4 章 将 详细 介绍 这 些 以 及 更 多 的 运算 符 。 


除了 基本 的 运算 符 外 ，JavaScript 还 文 持 更 加 复杂 的 算 林 运算， 这些 复 
杂 运 算 通 过 作为 Math 对 象 的 属性 定义 的 钞 数 和 常量 来 实现 : 


Math.pow(2,53)//=>9007199254740992 :2 的 53 次 客 


Math.round(.6)//=>1.0: 四 舍 五 入 


Math.ceil(.6)//=>1.0: 向 上 求 整 


Math.floor(.6)//=>0.0: 向 下 求 整 


Math.abs(-5)//=>5: 求 绝对 值 


Math.max(x,y,z)// 返 回 最 大 值 


Math.min(x,y,z)// 返 回 最 小 值 


Math.random( )// 生 成 一 个 大 于 等 于 9 小 于 1 .0 的 伪 随 机 数 


Math.PIVZVXT :圆周 率 


Math.E//e :自然 对 数 的 底数 


Math. sqrt(3)//3 的 平方 根 


Math .pow(3,1/3)//3 的 立方 根 


Math.sin(0)// 三 角 辑 数 :还 有 Math.cos,Math.atan 等 


Math.1log(10)//19 的 自然 对 数 

Math.1log(100)/Math .LN10// 以 10 为 底 100 的 对 数 

Math.1log(512)/Math .LN2// 以 2 为 底 512 的 对 数 

Math .exp(3)//e 的 三 次 窜 

参阅 第 三 部 分 中 关于 Math 对 象 的 介绍 ， 那 里 列 出 了 JavaScript 所 支持 的 
所 有 数学 画 数 。 


JavaScript 中 的 算术 运算 在 溢出 (overflow) 、 下 滋 (underflow) 或 被 零 
整除 时 不 会 报销 。 当 数字 运算 结果 超过 了 JavaScript 所 能 表示 的 数字 上 


限 ( 洲 出 ) ， 结 果 为 一 个 特殊 的 无 穷 大 (infinity) 值 ， 在 JavaScript 中 
以 Infinity 表 示 。 同样 地 ， 当 负数 的 值 超过 了 JavaScript 所 能 表示 的 负数 
范围 ， 结 果 为 负 无 穷 大 ， 在 JavaScript 中 以 -Infinity 表 示 。 无 穷 大 值 的 行 
为 特性 和 我 们 所 期 望 的 是 一 致 的 ， 基 于 它们 的 加 、 减 、 乘 和 除 运 算 结 
果 还 是 无 穷 大 值 (当然 还 保留 它们 的 正 负 号 ) 。 


下 洲 (underflow) 是 当 运 算 结 果 无 限 接近 于 零 并 比 JavaScript 能 表示 的 
最 小 值 还 小 的 时 候 发 生 的 一 种 情形 。 这 种 情况 下 ，JavaScript 将 会 返回 
0。 当 一 个 负数 发 生 下 洲 时 ，JavaScript 返 回 一 个 特殊 的 值 “ 负 零 ”。 这 个 
值 ( 负 零 ) 几乎 和 正常 的 零 完 全 一 样 ，JavaScript 程 序 员 很 少 用 到 负 
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必 


被 零 整 除 在 JavaScript 并 不 报错 : 它 只 是 简单 的 返回 无 穷 大 (Infinity) 

或 负 无 穷 大 (-Infinity) 。 但 有 一 个 例外 ， 零 除 以 零 是 没有 意义 的 ， 这 
种 整除 运算 结果 也 是 一 个 非 数字 (not-a-number) 值 ， 用 NaN 表 示 。 无 
穷 大 除 以 无 穷 大 、 给 任意 负数 作 开 方 运算 或 者 算术 运算 符 与 不 是 数字 
或 无 法 转换 为 数字 的 操作 数 一 起 使 用 时 都 将 返回 NaN 。 


JavaScript 预 定义 了 全 局 变量 Infinity 和 NaN ， 用 来 表示 正 无 穷 大 和 非 数 
字 值 。 在 ECMAScript 3 中 ， 这 两 个 值 是 可 读 / 写 的 ， 并 可 修改 。 
ECMAScript 5 修正 了 这 个 错误 ， 将 它们 定义 为 只 读 的 。 在 ECMAScript 
3 中 Number 对 和 象 定义 的 属性 值 也 是 只 读 的 。 这 里 有 一 些 例子 : 


Infinity// 将 一 个 可 读 / 写 的 变量 初始 化 为 infinity 


Number .POSITIVE_INFINITY// 同 样 的 值 ， 只 读 


1/9// 这 也 是 同样 的 值 


Number . MAX_VALUE+1// 计 算 结 果 还 是 Infinity 


Number .NEGATIVE_INFINITY// 该 表达 式 表 示 了 负 无 穷 大 


-InNfinity 


-1/0 


-Number .MAX_VALUE-1 


NaN// 将 一 个 可 读 / 写 的 变量 初始 化 为 NaN 


Number . NaN// 同 样 的 值 ， 但 是 只 读 


0/0// 计 算 结 果 是 NaN 


Number .MIN_VALUE/2// 发 生 下 洲 : 计算 结果 为 0 


-Number .MIN_VALUE/2// 负 零 


锡 


-1/Infinity// 同 样 是 负 和 才 


-0 


JavaScript 中 的 非 数 字 值 有 一 点 特殊 : 它 和 任何 值 都 不 相等 ， 包 括 目 
上身。 也 就 是 说 ， 没 办 法 通过 x==NaN 来 判断 变量 x 是 否 是 NaN。 相 反 ，， 
应 当 使 用 x!=x 来 判断 ， 当 且 仅 当 x 为 NaN 的 时 候 ， 表 达 式 的 结果 才 为 
true。 峡 数 isNaN() 的 作用 与 此 类 似 ， 如 果 参 数 是 NaN 或 者 是 一 个 非 数 字 
值 (比如 字符 串 和 对 象 ，， 则 返回 true。JavaScript 中 有 一 个 类 似 的 函数 
isFinite()， 在 参数 不 是 NaN、Infinity 或 -Infinity 的 时 候 返 回 true 。 


负 零 值 同样 有 些 特 殊 ， 它 和 正 震 值 是 相等 的 (甚至 使 用 JavaScript 的 志 
ee 这 意味 着 这 两 个 值 几乎 一 模 一 样 ， 除 了 作为 除 


var zero=0;// 正 常 的 零 值 


var negz=-0;// 负 零 值 


zero===negz//=>true: 正 零 值 和 负 零 值 相等 


1/zero===1/negz//=>false: 正 无 穷 大 和 负 无 穷 大 不 等 


3.1.4” ”二进制 浮 点 数 和 四 含 五 入 错误 


实数 有 无 数 个 ， 但 JavaScript 通 过 浮 点 数 的 形式 只 能 表示 其 中 有 限 的 个 
数 (确切 地 说 是 18 437 736 874 454 810 6 。 也 就 是 说 ， 当 在 
JavaScript 中 使 用 实数 的 时 候 ， 常 常 只 是 真实 值 的 一 个 近似 表示 。 


JavaScript 采 用 了 IEEE-754 浮 点 数 表示 法 (几乎 所 有 现代 编程 语言 所 采 
用 ) ， 这 是 一 种 二 进 制 表示 法 ， 可 以 精确 地 表示 分 数 ， 比 如 1/2、1/8 和 
1/1024。 遗 憾 的 是 ， 我 们 常用 的 分 数 (特别 是 在 金融 计算 方面 ) 都 是 十 
进 制 分 数 /10、1/100 等 。 二 进 制 浮 点 数 表 示 法 并 不 能 精确 表示 类 似 0.1 
这 样 简单 的 数字 。 


JavaScript 中 的 数字 具有 足够 的 精度 ， 并 可 以 极其 近似 于 0.1。 但 事实 
是 ， 数 字 不 能 精确 表述 的 确 市 来 了 一 些 问 题 。 看 下 这 段 代 码 : 


var x=.3-.2;//30 美 分 减 去 20 美 分 


var y=.2- .1;//20 美 分 减 去 10 美 分 


x==y//=> false : 网 值 不 相等 | 


x==.1//=>false: ,3- ,2 不 等 于 .1 


y==.1//=>true: .2-.1 等 于 .1 


由 于 舍 入 误差 ，0.3 和 0.2 之 间 的 近似 差 值 实际 上 并 不 等 于 0.2 和 0.1 之 间 
的 近似 差 值 3。 这 个 问题 并 不 只 在 JavaScript 中 才 会 出 现 ， 理 解 这 一 点 
非常 重要 : 在 任何 使 用 二 进 制 浮 点 数 的 编程 语言 中 都 会 有 这 个 问题 。 
同样 需要 注意 的 是 ， 上 述 代 码 中 x 和 y 的 值 非常 接近 彼此 和 最 终 的 正确 
值 。 这 种 计算 结果 可 以 胜任 大 多 数 的 计算 任务 : 这 个 问题 也 只 有 在 比 
较 两 个 值 是 否 相 等 的 时 候 才 会 出 现 。 

JavaScript 的 未 来 版 本 或 许 会 支持 十 进 制 数字 类 型 以 避免 这 些 舍 入 问 

题 。 在 这 之 前 你 可 能 更 愿意 使 用 大 整数 进行 重要 的 金融 计算 ， 例 如 ， 

要 使 用 整数 “分 ”而 不 要 使 用 小 数 “ 元 ”进行 基于 货币 单位 的 运算 。 


3.1.5 ”日 期 和 时 间 


Javascript 语 言 核心 包括 Date0 构 造 画 数 ， 用 来 创建 表示 日 期 和 时 间 的 对 
象 。 这 些 日 期 对 象 的 方法 为 白 期 计算 提供 了 简单 的 API。 日 期 对 象 不 像 
数字 那样 是 基本 数据 类 型 。 本 节 给 出 了 使 用 日 期 对 象 的 一 个 简单 孝 
程 。 在 第 三 部 分 可 以 查阅 更 多 细节 : 


var then=new Date(2011,0,1);//2011 年 1 月 1 


var later=new Date(2011,09,1,17,10,30);// 同 一 天 , 当地 时 间 5:10:30pm， 


期 和 时 间 


var now=new Date( ) ;// 当 育 


| 


var elapsed=now-then;// 日 期 减法 计算 时 间 间 隔 的 之 秒 交 


later .getFullYear()//=>2011 


later .getMonth()//=>0: 从 0 开始 计数 的 月 份 


later .getDate()//=>1: 从 1 开始 计数 的 天 数 


i 


later .getDay()//=>5: 得 到 星期 几 ，0 代 表 星 期 日 ，5 代 表 星 期 


later .getHours()//=> 当 地 时 间 17:5pm 


later .getUTCHours( )// 使 用 UTC 表 示 小 时 的 时 间 ， 基 于 时 


区 


32 文本 


字符 串 (string) 是 一 组 由 16 位 值 组 成 的 不 可 变 的 有 序 序 列 ， 每 个 字符 
通 利 来 目 于 Unicode 字 符 集 。JavaScript 通 过 字符 串 类 型 来 表示 文本 。 字 
符 串 的 长 度 (length) 是 其 所 含 16 位 值 的 个 数 。JavaScript 字 符 串 (和 其 
数组 ) 的 索引 从 零 开始 : 第 一 个 字符 的 位 置 是 0， 第 二 个 字符 的 位 置 是 
1， 以 此 类 推 。 空 字符 串 (empty string) 长 度 为 0，JavaScript 中 并 没有 
表示 单个 字符 的 “字符 型 ”。 要 表示 一 个 16 位 值 ， 只 需 将 其 赋值 给 字符 

串 变 量 即 可 ， 这 个 字符 串 长 度 为 1。 


字符 集 ， 内 码 和 JavaScript 字 人 符 串 


JavaScript 采 用 UTF-16 编 码 的 Unicode 字 符 集 ，JavaScript 字 人 符 串 是 由 一 
组 无 符号 的 16 位 值 组 成 的 序列 。 最 常用 的 Unicode 字 符 〈 这 些 字 符 属 
于 “基本 多 语种 平面 * I4) 都 是 通过 16 位 的 内 码 表 示 ， 并 代表 字符 串 中 
的 单个 字符 ， 那 些 不 能 表示 为 16 位 的 Unicode 字 符 则 遵循 UTF-16 编 码 规 
则 一 一 用 两 个 16 位 值 组 成 的 一 个 序列 ( 亦 称 做 “代理 项 对 ”) 表示。 这 
意味 着 一 个 长 度 为 2 的 JavaScript 字 符 串 (两 个 16 位 值 ) 有 可 能 表示 一 个 
Unicode 字 符 : 


var p="n";//N 由 16 位 内 码 表 示 9x03c0 


var e="e";//e 由 17 位 内 码 表 示 9x1d452 


p.length//=>1:p 包 含 一 个 16 位 值 


e.length//=>2:e 通 过 UTF-16 编 码 后 包含 两 个 16 位 值 :"\ud835\udc52" 


JavaScript 定 义 的 各 式 子 符 串 操作 方法 均 作 用 于 16 位 值 ， 而 非 学 人 特 ， 且 
不 会 对 代理 项 对 做 单独 处 理 ， 同 样 JavaScript 不 会 对 字符 串 做 标准 化 的 
加 工 ， 甚 至 不 能 保证 子 符 串 是 合法 的 UTF-16 格 式 。 


3.2.1 字符 串 直 接 量 
在 JavaScript 程 序 中 的 字符 串 直接 量 ， 是 由 单 引 号 或 双 引 号 括 起 来 的 字 


符 序列 。 由 单 引号 定 界 的 字符 串 中 可 以 包含 双 引 号 ， 由 双 引 号 定 界 的 
字符 串 中 也 可 以 包含 单 引 号 。 这 里 有 儿 个 字符 串 直 接 量 的 例子 : 


"Wf/ 空 字符 串 : 它 包 含 6 个 字符 


"testing' 


中 S Be 


"name="myform'" 


"Wouldn't you prefer O'Reilly's book?" 


"This string\nhas two lines" 


"nis the ratio of a circle's circumference to its diameter" 


在 ECMAScript 3 中 ， 字 符 串 直接 量 必须 写 在 一 行 中 ， 而 在 ECMAScript 
5 中 ， 字 符 串 直接 量 可 以 拆 分 成 数 行 ， 每 行 必须 以 反 斜 线 (\) 结束 ， 反 
和 斜 线 和 行 结束 符 都 不 算是 字符 串 直 接 量 的 内 容 。 如 有 果 和 希望 在 字符 串 直 

接 量 中 男 起 一 行 ， 可 以 使 用 转 义 字符 \n (后 续 会 有 介绍 ) : 


"two\nlines"// 这 里 定义 了 一 个 显示 为 两 行 的 字符 串 


"one\V/ 用 三 行 代码 定义 了 显示 为 单行 的 字符 串 ， 只 在 ECMAScript 5 中 


Ee | 


long\ 


line" 


需要 注意 的 是 ， 当 使 用 单 引 号 来 定 界 字 符 串 时 ， 需 要 格外 小 心 英文 中 

的 缩写 和 所 有 格 写法 ， 比 如 cant 和 OReillys。 因 为 撒 号 和 单 引 号 是 同一 

所 以 必须 使 用 反 斜 线 () 来 转 义 ( 转 义 符 将 在 下 一 章 讲 解 ， 所 
外 本 O 


在 客户 端 JavaScript 程 序 设 计 中 ，JavaScript 人 代码 会 夹杂 HTML 代 码 的 字 
符 串 ，HITML 代 码 也 会 夹杂 JavaScript 代 码 。 和 JavaScript 一 样 ，HTML 
也 使 用 单 引号 或 者 双 引 号 来 定 界 字 符 串 ， 因 此 ， 当 JavaScript 代 码 和 
HTML 代 码 混杂 在 一 起 的 时 候 ， 最 好 在 JavaScript 和 和 HTML 代码 中 各 目 使 
用 独立 的 引号 风格 。 例 如 ， 在 JavaScript 表 达 式 中 使 用 单 引 号 表示 字符 
a you"， 而 在 HTML 事 件 处 理 程序 属性 中 则 使 用 双 引 号 表示 字 
付 中 : 


<button onclick="alert('Thank you')">Click Me</button> 


3.2.2” 转 义 字 符 


在 JavaScript 字 符 串 中 ， 反 和 斜 线 人 有 春 符 殊 的 用 途 ， 反 条 线 符号 后 加 一 


个 字符 ， 融 不 再 表示 它们 的 字面 侣 义 了 ， 比 如 ，Nn 丈 是 一 个 转 义 字符 
(escape sequence) 3， 它 表 示 的 是 一 个 换行 符 。 


另 一 个 例子 是 上 世 中 提 到 的 转 义 字符 \， 表 示 单 引号 (或 撤 号 ; 。 当 需 
要 在 一 个 单 引 号 定 弄 的 字符 串 内 使 用 搬 号 的 时 候 ， 它 束 显 得 非常 有 
用 。 现 在 你 就 会 明白 我 们 为 什么 把 它们 叫做 转 义 字符 了 ， 因 为 反 斜 线 
可 以 使 我 们 避免 使 用 单 规 方式 解释 单 引号 ， 当 单 引 写 不 是 用 来 标记 字 
符 串 结尾 时 ， 它 只 是 一 个 搬 号 : 


'You\'re right,it can\'t be a quote' 


表格 3-1 列 出 了 JavaScript 中 的 转 义 字符 以 及 它们 所 代表 的 含义 。 其 中 有 

两 个 是 通用 的 ， 通 过 十 六 进 制 数 表 示 Latin-1 或 Unicode 中 的 任意 字 人 码 。 

例如 ，\xA9 表 示 版 权 符号 ， 版 权 符 号 的 Latin-1 编 码 是 十 六 进 制 数 A9。 

i \u 表 示 由 4 个 十 六 进 制 数 指 定 的 任意 Unicode 字 符 ， 比 如 ，Nu03c0 
示 字 人 符 T 。 


表 3.1，JavaScript 转 义 字符 


转 义 字符 。 含义 
\0 UL 字符 (\u0000) 
vb 退 格 符 (\u0008 ) 


\t 水 平 制 表 符 (\u0009 ) 


表 9.1，JavagScript 转 义 字符 ( 续 ) 
转 义 字符 。 ”含义 


\n 换行 符 (\u000A) 

V 垂直 制 表 香 (\u000B) 

\f 换 页 符 (\uo00C) 

\r 回 车 符 (\u000D) 

加 双 引 号 (\u0022) 

V 扳 号 或 单 引号 (\u0027) 

\ 反 竺 线 (\u005(C) 

\xAX 由 两 位 十 六 进 制 数 XX 指 定 的 Latin-1 字 符 
NUXXXX 由 4 位 十 六 进 制 数 XXXX 指 定 的 Unicode 字 符 


如 果 “ 字 符 位 于 没有 在 表 3-1 中 列 出 的 字符 前 ， 则 忽略 (当然 ， 
JavaScript 语 言 将 来 的 版 本 可 能 定义 新 的 转 义 符 ) 。 比 如 ，<“wf" 和 “jp 等 
价 。 最 后 ， 上 文 提 到 过 ， 在 ECMAScript 5 中 ， 人 允许 在 一 个 多 行 字符 串 
直接 量 里 的 每 行 结束 处 使 用 反 斜 线 。 


3.2.3 ”字符 串 的 使 用 
JavaScript 的 内 置 功 能 之 一 就 是 字符 串 连 接 。 如 果 将 加 号 (+) 运 算 符 用 于 


数字 ， 和 表示 两 数 相 加 。 但 将 它 作用 于 字符 串 ， 则 表示 字符 串 连 接 ， 将 
第 二 个 字符 串 拼 接 在 第 一 个 之 后 ， 例 如 : 


msg="Hello, "+"world";// 生 成 字符 串 "Hello, world" 


greeting="Welcome to my blog,"+""+name; 


要 确定 一 个 字符 串 的 长 度 一 一 其 所 包含 的 16 位 值 的 个 数 一 一 可 以 使 用 
字符 串 的 length 属 性 。 比 如 ， 要 得 到 字符 串 s 的 长 度 : 


s.length 


除了 length 属 性 ， 字 符 串 还 提供 许多 可 以 调用 的 方法 (可 以 在 第 三 部 分 
查 到 详细 信息 ) : 


re ts Es 


var s="hello,world"// 定 义 一 个 字符 串 


JW 


.CharAt (90)//=>"h": 第 一 个 字符 


JW 


.CharAt(s,length-1)//=>"d" :最 后 一 个 字符 


JW 


,substring(1,4)//=>"ell": 第 2~4 个 字符 


JW 


.Slice(1,4)//=>"ell": 同 上 


JW 


,Slice(-3)//=>"rld": 最 后 三 个 字符 


JW 


.index0f("1")//=>2: 字 符 1 首 次 出 现 的 位 


JW 


.lastIndexof("1")//=>10: 字 符 1 最 后 一 次 出 现 的 位 置 


JW 


.index0of("1",3)//=>3: 在 位 置 3 及 之 后 首次 出 现 字 符 1 的 位 


JW 


,Split(",")//=>["hello", "wor1d"] 分 割 成 子 串 


JW 


.replace("h'""H")VXX=>"Hello,wor1d" :全 文字 符 替 换 


JW 


.toUpperCase()//=>"HELLO,WORLD" 


记 住 ， 在 JavaScript 中 字符 串 是 固定 不 变 的 ， 类 似 replace0 和 
toUpperCase() 的 方法 都 返回 新 字符 串 ， 原 字符 串 本 里 并 没有 发 生 改 


A 

在 ECMAScript 5 中 ， 字 符 串 可 以 当做 只 读数 组 ， 除 了 使 用 charAt() 方 
法 ， 也 可 以 使 用 方 括号 来 访问 字符 串 中 的 单个 字符 〈16 位 值 ) : 
s="hello,world"; 

s[0]//=>"h" 


s[s.length-1]//=>"d" 


基于 Mozilla 的 Web 浏 览 器 (比如 Firefox) 很 久之 前 就 支持 这 种 方式 的 字 
符 串 索引 ， 多 数 现代 浏览 器 (IE 除 外 ) 也 紧 跟 Mozilla 的 脚步 ， 在 
ECMAScript 5 成 型 之 前 葡文 持 了 这 一 特性 。 


3.2.4 ”模式 匹配 


JavaScript 定 义 了 RegExp0 构 造 琅 数 ， 用 来 创建 表示 文本 匹配 模式 的 对 
象 。 这 些 模式 称 为 “正则 表达 式 ” (regular expression) ，JavaScript 采 用 
Perl 中 的 正则 表达 式 语 法 。String 和 RegExp 对 象 均 定义 了 利用 正则 表达 
式 进 行 模式 匹配 和 得 找 与 替换 的 函数 。 


RegExp 并 不 是 JavaScript 的 基本 类 型 。 和 Date 一 样 ， 它 只 是 一 种 具有 实 
用 API 的 特殊 对 象 。 正 则 表达 式 的 语法 很 复杂 ，API 也 很 丰富 。 在 第 10 
童 有 详尽 的 文档 介绍 。RgeExp 是 一 种 强大 和 常用 的 文本 处 理工 具 ， 本 


市 只 是 一 个 概述 。 


尽管 RegExp 并 不 是 语言 中 的 基本 数据 类 型 ， 但 是 它们 依然 具有 直接 量 
写法 ， 可 以 直接 在 JavaScript 程 序 中 使 用 。 在 两 条 斜 线 之 间 的 文本 构成 
了 一 个 正则 表达 式 直 接 量 。 第 二 条 人 冬 线 之 后 也 可 以 跟随 一 个 或 多 个 字 
母 ， 用 来 修饰 匹配 模式 的 含义 ， 例 如 : 


/AHTMLVVV 匹 配 以 HTML 开 始 的 字符 串 


/[1-9] [09-9]*/// 匹 配 一 个 非 堆 数字， 后 面 是 任意 个 数 


/bjavascriptXxb/iV/ 匹 配 单词 "javascript"， 忽 略 大 小 写 


RegExp 对 象 定义 了 很 多 有 用 的 方法 ， 字 符 串 同样 具有 可 以 接收 RegExp 
参数 的 方法 ， 例 如 : 


var text="testing:1,2,3";// 文 本 示例 


var pattern=/\d+/g// 匹 配 所 有 包含 一 个 或 多 个 数字 的 实例 


pattern.test(text)//=>true: 匹 配 成 功 


text.search(pattern)//=>9: 首 次 匹配 成 功 的 位 


text.match(pattern)//=>["1","2","3"] :所 有 匹配 组 成 的 数组 


text.replace(pattern,"#");//=>"testing:#,#,#" 


text.split(/A\D+/);//=>>["", "4", "2","3"] :用 非 数字 字符 截取 字符 串 


3.3 布尔 值 
布尔 值 指 代 真 或 假 、 开 或 天 、 是 或 否 。 这 个 类 型 只 有 两 个 值 ， 保 留 字 


true 和 false。 


JavaScript 程 序 中 的 比较 语句 的 结果 通常 都 是 布尔 值 ， 例 如 : 


a==4 


这 上 段 代码 用 来 检测 变量 a 的 值 是 否 等 于 4。 如果 等 于 ， 比 较 结 末 的 布尔 
值 就 古 true; 如 来 不 等 ， 比 较 结 琳 则 为 false 。 


布尔 值 通常 用 于 JavaScript 中 的 控制 结构 中 。 例 如 ，JavaScript 中 的 if/else 
语句 ， 如 果 布 尔 值 为 true 执 行 第 一 段 逻 辑 ， 如 有 果 为 false 执 行 男 一 段 逻 


辑 。 通 常 将 一 个 创建 布尔 值 的 比较 直接 与 使 用 这 个 比较 的 语句 结合 在 
一 起 ， 结 果 如 下 所 示 : 

if(a==4) 

b=b+1; 

else 


a=a+1; 


这 段 代码 检测 变量 a 征 否 等 于 4。 如 有 果 等 于 ， 则 b 加 1; 否则 ，a 加 1。 我 
们 同样 会 在 3.8 节 讨论 到 ， 任 意 JavaScript 的 值 都 可 以 转换 为 布尔 值 。 下 
面 这 些 值 会 被 转换 成 false: 


undefined 
null 


0 


NaN 


Dd 


""// 空 字符 囊 


所 有 其 他 值 ， 包 括 所 有 对 象 (数组 ) 都 会 转换 成 true。false 和 上 面 6 个 
可 以 转换 成 false 的 值 有 时 称 做 “ 假 值 *(falsy value)， 其 他 值 称 做 “ 真 

值 *(truthy value)。JavaScript 期 望 使 用 一 个 布尔 值 的 时 候 ， 假 值 会 被 当 
成 false， 真 值 会 被 当成 true。 


来 看 一 个 例子 ， 假 设 变量 o 是 一 个 对 象 或 是 null， 可 以 通过 一 条 if 语句 来 
显 式 地 检测 o 是 否 是 非 nul] 值 : 


if(o!==nNull)... 


不 等 操作 符 “!==” 将 o 和 null 比 较 ， 并 得 出 结 末 为 true 或 false。 可 以 先 忽略 
这 里 的 比较 语句 ，null 是 一 个 假 值 ， 对 象 是 一 个 真 值 : 


if(0)... 


对 于 第 一 种 情况 ， 只 有 当 o 不 是 null 时 才 会 执行 ff 后 的 代码 ， 第 二 种 情况 

的 限制 没 那 么 严格 : 只 有 o 不 是 false 或 任何 假 值 (比如 null 或 

undefined) 时 它 才 会 执行 这 个 ff。 到 压 选 用 哪 条 语句 取决 于 期 望 赋 给 o 

ee 。 如果 需要 将 null 与 0 或 "区 分 开 来 ， 则 需要 使 用 一 个 显 式 的 
XE 0 


布尔 值 包 偏 toString0) 方 法 ， 因 此 可 以 使 用 这 个 方法 将 字符 串 转 换 
为 "true" 或 "false"， 但 它 并 不 包含 其 他 有 用 的 方法 。 除 了 这 个 不 重要 的 
API， 还 有 三 个 重要 的 布尔 运算 符 。 


“&& "运算 符 执 行 了 逻辑 与 (AND) 操作 。 当 且 仅 当 两 个 操作 数 都 是 
真 值 时 它 才 返回 true; 否则 返回 false。“|* 运 算 符 是 布尔 或 (OR) 操 
作 ， 如 采 两 个 操作 数 其 中 之 一 为 真 值 它 束 返回 true， 如 宁 两 个 操作 数 都 
是 假 值 则 返回 false。 最 后 ， 一 元 操作 符 “!” 执 行 了 布尔 非 (NOT) 操 
作 : 如 果 操 作 数 是 真 值 则 返回 false; 如 果 是 假 值 ， 则 返回 true。 比 如 : 


if( (x==0&%&y==0)||!(z==0)){//x 和 y 都 是 零 或 z 是 非 零 


} 


关于 操作 数 的 完整 的 细节 可 以 参照 4.10 节 。 
3.4 null 和 undefined 


null 是 JavaScript 语 言 的 关键 字 ， 它 表示 一 个 特殊 值 ， 常 用 来 描述 “ 空 
值 ”。 对 null 执 行 typeof 预 算 ， 结 果 返 回 字符 串 "object"， 也 就 是 说 ， 可 以 


将 nul 认 为 是 一 个 特殊 的 对 象 值 ， 含 义 是 “ 非 对 象 ”。 但 实际 上 ， 通 常 认 
为 null 是 它 目 有 类 型 的 唯一 一 个 成 员 ， 它 可 以 表示 数字 、 字 人 符 串 和 对 象 
是 “无 值 ” 的 。 大 多 数 编程 语言 和 JavaScript 一 样 含 有 null: 你 可 能 对 null 
或 nil 很 眼熟 。 


JavaScript 不 有 第 二 个 值 来 表示 值 的 空缺 。 用 未 定义 的 值 表示 更 深层 次 
的 “ 衬 值 ”。 它 是 变量 的 一 种 取 值 ， 表 明 变 量 没 有 初始 化 ， 如 有 果 要 查询 
对 象 属性 或 数组 元 素 的 值 时 返回 undefined 则 说 明 这 个 属性 或 元 素 不 存 
在 。 如 果 函 数 没 有 返回 任何 值 ， 则 返回 undefined。3 引 用 没有 提供 实 参 
的 函数 形 参 的 值 也 只 会 得 到 undefined。undefined 是 预定 义 的 全 局 变量 
( 它 和 null 不 一 样 ， 它 不 是 关键 字 ) ， 它 的 值 承 是 “未 定义 ”。 在 

ECMAScript 3 中 ，undefined 是 可 读 / 写 的 变量 ， 可 以 给 它 赋 任意 值 。 这 
个 错误 在 ECMAScript 5 中 做 了 修正 ，undefined 在 该 版 本 中 是 只 读 的 。 
如 果 使 用 typeof 运 算 符 得 到 undefined 的 类 型 ， 则 返回 "undefined"， 表 明 
这 个 值 是 这 个 类 型 的 唯一 成 员 。 


尽管 null 和 undefined 是 不 同 购 ， 但 它们 都 表示 “ 值 的 罕 缺 >， 两 者 往往 可 
以 互 换 。 判 断 相 等 运算 符 “==” 认 为 两 者 是 相等 的 〈 要 使 用 严格 相等 运 
算 符 “===” 来 区 分 它们 ) 。 在 希望 值 是 布尔 类 型 的 地 方 它们 的 值 都 是 假 
值 ， 和 false 类 似 。null 和 undefined 都 不 包含 任何 属性 和 方法 。 实 际 上 ， 
使 用 “.” 和 “[]”* 来 存 取 这 两 个 值 的 成 员 或 方法 都 会 产生 一 个 类 型 错误 。 


你 或 许 认 为 undefined 是 表示 系统 级 的 、 出 乎 意料 的 或 类 似 错误 的 值 的 
空缺 ， 而 nul] 是 表示 程序 级 的 、 正 常 的 或 在 意料 之 中 的 值 的 空 缺 。 如 有 果 
你 想 将 它们 赋值 给 变量 或 者 属性 ， 或 将 它们 作为 参数 传 入 函数 ， 最 佳 
选择 是 使 用 null 。 


3.5 ”全 局 对 象 


前 几 市 讨论 了 JavaScript 的 原始 类 型 和 原始 值 。 对 象 类 型 一 一 对 象 、 数 
组 和 函数 一 一 在 本 书 中 均 会 有 独立 章节 来 讲述 。 但 有 一 类 非常 重要 的 
对 象 ， 我 们 不 得 不 现在 就 把 它们 讲 清楚 一 一 全 局 对 象 。 全 局 对 象 

(global object) 在 JavaScript 中 有 着 重要 的 用 途 : 全 局 对 象 的 属性 是 全 
局 定义 的 符号 ，JavaScript 程 序 可 以 直接 使 用 。 当 JavaScript 解 释 器 启动 
时 《或 者 任何 Web 浏 览 右 加 载 新 页 面 的 时 候 ) ， 它 将 创建 一 个 新 的 全 局 
对 象 ， 并 给 它 一 组 定义 的 初始 属性 : 


.全 局 属性 ， 比 如 undefined、Infinity 和 NaN 。 


局 函数 ， 比 如 isNaNO、parseIntO0 〈 见 3.8.2 节 ) 和 eval0 ( 见 4.12 节 ) 


i 星 


造 画 数 ， 比 如 Date0、RegExp(O0、StringO0、Object0 和 Array0O 〈 见 
.2 市 ) 


.全 局 对 象 ， 比 如 Math 和 JSON( 见 6.9 世 ) 


全 局 对 象 的 初始 属性 并 不 是 保留 字 ， 但 它们 应 该 当做 保留 字 来 对 待 。 
2.4.1 节 列 出 了 所 有 这 些 属性 。 本 章 对 一 部 分 全 局 属性 也 有 描述 。 其 他 
属性 在 其 他 章节 也 会 讲述 。 可 以 在 第 三 部 分 中 通过 名 称 查找 到 ， 或 者 
通过 别名 "Global" 来 找到 这 些 全 局 对 象 。 对 于 客户 端 JavaScript 来 讲 ， 
nn 可 以 在 第 四 部 分 中 查看 它 
[J 


在 代码 的 最 顶级 不 在 任何 函数 内 的 JavaScript 代 码 
JavaScript 天 键 字 this 来 引用 全 局 对 象 : 


可 以 使 用 


var global=this;// 定 义 一 个 引用 全 局 对 象 的 全 后 


二 | 
内 
中 


在 客户 端 JavaScript 中 ， 在 其 表示 的 浏 质 器 窗口 中 的 所 有 JavaScript 代 人 三 
中 ，Window 对 象 充 当 了 全 局 对 象 。 这 个 全 局 Window 对 象 有 一 个 属性 
window 引 用 其 自身 ， 它 可 以 代替 this 来 引用 全 局 对 象 。Window 对 象 定 
义 了 核心 全 局 属性 ， 但 它 也 针对 Web 浏 览 句 和 客户 端 JavaScript 定 义 了 
一 少 部 分 其 他 全 局 属性 。 


当初 次 创建 的 时 候 ， 全 局 对 象 定 义 了 JavaScript 中 所 有 的 预定 义 全 局 
值 。 这 个 特殊 对 象 同样 包含 了 为 程序 定义 的 全 局 值 。 如 果 代码 声明 了 
一 个 全 局 变量 ， 这 个 全 局 变量 束 古 全 局 对 象 的 一 个 属性 ，3.10.2 节 有 关 
于 此 的 详尽 解释 。 


3.6 ”包装 对 象 

JavaScript 对 象 是 一 种 复合 值 ， 它 是 属性 或 已 命名 值 的 集合 。 通 过 “.” 符 
号 来 引用 属性 值 。 当 属性 值 是 一 个 函数 的 时 候 ， 称 其 为 方法 。 通 过 
o.m() 来 调用 对 象 o 中 的 方法 。 

我 们 看 到 字符 串 也 同样 具有 属性 和 方法 : 


se ER 


Var s="hello wor1Ld!";// 一 个 子 符 串 


var word=s.substring(s.index0of("")+1,s.length);// 使 用 字符 串 的 属性 


字符 串 既 然 不 是 对 象 ， 为 什么 它 会 有 属性 呢 ? 只 要 引用 了 字符 串 s 的 属 
性 ，JavaScript 吏 会 将 字符 串 值 通过 调用 new String(s) 的 方式 转换 成 对 
象 ， 这 个 对 象 继 承 了 字符 串 的 方法 〈 见 6.2.2 节 ) ， 并 被 用 来 处 理 属性 
的 引用 。 一 旦 属性 引用 结束 ， 这 个 新 创建 的 对 象 就 会 销毁 (其 实在 实 
人 
同 字 符 串 一 样 ， 数 字 和 布尔 值 也 具有 各 目的 方法 : 通过 Number0 和 
Boolean0 构 造 函 数 创 建 一 个 临时 对 象 ， 这 些 方法 的 调用 均 是 来 目 于 这 
人 bb 。 nul 和 undefined 没 有 包装 对 象 : 访问 它们 的 属性 会 造成 一 
类 型 错误。 


看 如 下 代码 ， 思 考 它 们 的 执行 结 


var s="test";// 创 建 一 个 字符 串 


Ss .1en=4;// 给 它 设 个 属性 


var t=s .len;// 查 询 这 个 属性 


当 运 行 这 段 代码 时 ，t 的 值 是 undefined。 第 二 行 代码 创建 一 个 临时 字符 
串 对 象 ， 并 给 其 len 属 性 赋值 为 4， 随 即 销毁 这 个 对 象 。 第 三 行 通过 原始 
的 (没有 被 修改 过 ) 字 符 串 值 创 建 一 个 新 字符 第 对 象 ， 务 试 读 取 其 len 属 

性 ， 这 个 属性 目 然 不 存在 ， 表 达 式 求 值 结 来 为 undefined。 这 上 段 代码 说 

明了 在 读 取 字 符 串 、 数 字 和 布尔 值 的 属性 值 (或 方法 ) 的 上 时候， 表现 

的 像 对 象 一 样 。 但 如 果 你 试图 给 其 属性 赋值 ， 则 会 忽略 这 个 操作 ， 修 

改 只 是 发 生 在 临时 对 象 映 上 ， 而 这 个 临时 对 象 并 未 继续 保留 下 来 。 


存 取 字符 串 、 数 字 或 布尔 值 的 属性 时 创建 的 临时 对 象 称 做 包装 对 象 ， 
它 只 是 偶尔 用 来 区 分 字符 串 值 和 字符 串 对 象 、 数 字 和 数值 对 象 以 及 布 


尔 值 和 布尔 对 象 。 通 常 ， 包 闭 对 象 只 是 被 看 做 是 一 种 实现 细节 ， 而 不 
用 特别 关注 。 由 于 字符 串 、 数 字 和 布尔 值 的 属性 都 是 只 读 的 ， 并 且 不 
能 给 它们 定义 新 属性 ， 因 此 你 需要 明白 它们 是 有 别 于 对 象 的 。 


需要 注意 的 是 ， 可 通过 String0，Number0 或 Boolean0 构 造 画 数 来 显 式 
创建 包装 对 象 : 


var s="test",n=1,b=true;// 一 个 字符 串 、 数 字 和 布尔 值 


A 


var S=new String(s);// 一 个 字符 串 对 象 


var N=new Number(n) ;// 一 个 数值 对 象 


var B=new Boolean(b);// 一 个 布尔 对 象 


JavaScript 会 在 必要 时 将 包装 对 象 转换 成 原始 值 ， 因 此 上 段 代 码 中 的 对 
象 5、N 和 B 常 常 但 不 总 是 一 表现 的 和 值 s、n 和 b 一 样 。“==” 等 于 
运算 符 将 原始 值 和 其 包装 对 象 视 为 相等 ， 但 “===” 全 等 运算 符 将 它们 视 
为 不 等 。 通 过 typeof 运 算 符 可 以 看 到 原始 值 和 其 包装 对 象 的 不 同 。 


3.7 不 可 变 的 原始 值 和 可 变 的 对 象 引用 


JavaScript 中 的 原始 值 (undefined、null、 布 尔 值 、 数 字 和 字符 串 ) 与 对 
象 (包括 数组 和 函数 ) 有 着 根本 区 别 。 原 始 值 是 不 可 更 改 的 :任何 方 
法 都 无 法 更 改 (或 “突变 ”) 一 个 原始 值 。 对 数字 和 布尔 值 来 说 显然 如 
此 一 一 改变 数字 的 值 本 里 就 说 不 通 ， 而 对 字符 串 来 说 就 不 那么 明显 
了 ， 因 为 字符 串 看 起 来 像 由 字符 组 成 的 数组 ， 我 们 期 望 可 以 通过 指定 
索引 来 修改 字符 串 中 的 字符 。 实 际 上 ，JavaScript 是 禁止 这 样 做 的 。 字 
人 符 串 中 所 有 的 方法 看 上 去 返回 了 一 个 修改 后 的 字符 串 ， 实 际 上 返回 的 
是 一 个 新 的 字符 串 值 。 例 如 : 


var s="hello";// 定 义 一 个 由 小 写字 母 组 成 的 文本 


s .toUpperCase();// 返 回 "HELLO"， 但 并 没有 改变 s 的 值 


S 


//=>"he1l1o" :原始 字符 串 的 值 并 未 改变 


原始 值 的 比较 是 值 的 比较 : 只 有 在 它们 的 值 相等 时 它们 才 相 等 。 这 对 
数字 、 布 尔 值 、null 和 undefined 来 说 听 起 来 有 点 儿 难 懂 ， 并 没有 其 他 办 
法 来 比较 它们 。 同 样 ， 对 于 字符 串 来 说 则 并 不 明显 : 如 采 比 较 两 个 单 
独 的 字符 串 ， 当 且 仅 当 它 们 的 长 度 相 等 且 每 个 索引 的 字符 都 相等 时 ， 

JavaScript 才 认为 它们 相等 。 


对 象 和 原始 值 不 同 ， 首 先 ， 它 们 古 可 变 的 一 一 它们 的 值 是 可 修改 的 : 


var 0={X:1};// 定 义 一 个 对 象 


0 .X=2;// 通 过 修改 对 象 属性 值 来 更 改 对 象 


0.y=3;// 再 次 更 改 这 个 对 象 ， 给 它 增加 一 个 新 属性 


var a=[1,2,3]// 数 组 也 是 可 修改 的 


a[0]=0;// 更 改 数组 的 一 个 元 素 


a[3]=4;// 给 数组 增加 一 个 新 元 素 


对 象 的 比较 并 非 值 的 比较 : 即使 两 个 对 象 包含 同样 的 属性 及 相同 的 
值 ， 它 们 也 息 个 相等 的 。 各 个 索引 元 素 完全 相等 的 两 个 数组 也 不 相 


人 A 
于? 


var o={X:1}, p={x:1};// 具 有 相同 属性 的 两 个 对 象 


0===p//=>false: 两 个 单独 的 对 象 永 不 相等 


var a=[],b=[];// 两 个 单独 的 空 数组 


a===b//=>false: 两 个 单独 的 数组 永 不 相等 


我 们 通常 将 对 象 称 为 引用 类 型 (reference type) ， 以 此 来 和 JavaScript 的 
基本 类 型 区 分 开 来 。 依 照 术语 的 叫 法 ， 对 象 值 都 是 引用 (reference) ， 
人 
EE 


var a=[];// 定 义 一 个 引用 空 数组 的 变量 a 


var b=a;// 变 量 b3 


同一 个 数组 


b[0]=1;// 通 过 变量 b 来 修改 引用 的 数组 


a[0]//=>1: 变 量 a 也 会 修改 


a===b//=>true:a 和 b 引 用 同一 个 数组 ， 因 此 它们 相等 


就 像 你 刚 看 到 的 如 上 代码 ， 将 对 象 或 数组 ) 赋值 给 一 个 变量 ， 仅 仅 
征 赋 值 的 引用 值 : 对 象 本 身 并 没有 复制 一 次 。 如 果 你 想得到 一 个 对 象 
或 数组 的 副本 ， 则 必须 显 式 复制 对 象 的 每 个 属性 或 数组 的 每 个 元 素 。 
下 面 这 个 例子 则 是 通过 循环 来 完成 数组 复制 〈 见 5.5.3 节 ) : 


var a=['a', 'b', 'c'];// 待 复制 的 数组 


var b=[];// 复 制 到 的 目标 空 数组 


for(var i=0;i<a.length;i++){// 遍 历 a[] 中 的 每 个 元 素 


人 
HH 


Sb 中 


b[i]=a[i];// 将 元 素 值 复 第 


} 


同样 的 ， 如 果 我 们 想 比 较 两 个 单独 的 对 象 或 者 数组 ， 则 必须 比较 它们 
的 属性 或 元 系 。 下 面 这 段 代码 定义 了 一 个 比较 两 个 数组 的 函数 : 


function equalArrays(a,b)t{ 


if(a.length!=b.length)return false;// 两 个 长 度 不 同 的 数组 不 相等 


for(var i=0;i<a.length;i+t+)// 循 环 遍历 所 有 元 素 


if(a[i]!==b[i] )return false;// 如 果 有 任意 元 素 不 等 ， 则 数组 不 相等 


return true;// 否 则 它们 相等 


} 


3.8 ”类 型 转换 


JavaScript 中 的 取 值 类 型 非常 灵活 ， 我 们 已 经 从 布尔 值 看 到 了 这 一 点 : 

当 JavaScript 期 望 使 用 一 个 布尔 值 的 时 候 ， 你 可 以 提供 任意 类 型 值 ， 
JavaScript 将 根据 需要 自行 转换 类 型 。 一 些 值 ( 真 值 ) 转换 为 tue， 其 他 
值 〈 假 值 ) 转换 为 false。 这 在 其 他 类 型 中 同样 适用 : 如 果 JavaScript 期 
望 使 用 一 个 字符 串 ， 它 把 给 定 的 值 将 转换 为 字符 串 。 如 果 JavaScript 期 
望 使 用 一 个 数字 ， 它 把 给 定 的 值 将 转换 为 数字 〈 如 果 转 换 结 果 无 意义 
的 话 将 返回 NaN) ， 一些 例 子 如 下 : 


10+"objects"//=>"10 objects" .数字 10 转 换 成 字符 串 


"7"*"4"//=> 28: 两 个 字符 串 均 转换 为 数字 


var n=1-"x";//=> NaN: 字 符 串 "x" 无 法 转换 为 数字 


n+"objects"//=>"NaN objects":NaN 转 换 为 字符 串 "NaN" 


表 3-2 简 要 说 明了 在 JavaScript 中 如 何 进行 类 型 转换 。 表 3-2 中 的 粗 体 部 分 
突出 中 示 了 那些 计 你 信 感 意外 的 类 型 转换 。 空 单元 覆 表 示 不 必要 也 放 
行 转换 。 


表 3-2，JavaScript 类 型 村 换 


什 


Undefined 
null 


NaN 

Infinity 

-Infinity 

1( 无 穷 大 , 非 零 ) 
{}( 任 六 对象) 

[] (任意 数组 ) 
[9](1 个 数字 元 系 ) 
['a']( 其 他 数组 ) 
function(){}( 任 意 函 数 ) 


字符 串 


“Undefined 
"null" 


"true" 
"false” 


"0 
"0 

“NaN 
"Infinity" 
Infinity- 
"1 

参考 3.8.3 市 


OO 


使 用 join() 方 法 


参考 3.8.3 市 


9 
Na 
Na 


布尔 值 对 象 

false throws TypeError 

false throws TypeError 
new Boolean(true) 
new Boolean(false) 

false new String(™") 

true new String("1,2") 

true new String("one") 

false new Number(0) 

false new Number(-0) 

false new Number(NaN) 

true new Number(Infinity) 

true new Number(-Infinity) 

true new Number(1) 

true 

true 

true 

true 

true 


表 3-2 中 提 到 的 原始 值 到 原始 值 的 转换 相对 简单 ， 我 们 已 经 在 3.3 节 讨论 
过 转换 为 布尔 值 的 情况 了 。 所 有 原始 值 转换 为 字符 串 的 情形 也 已 经 明 


确定 义 。 转 换 为 数字 的 情形 比较 微妙 。 那 些 以 数字 表示 的 字符 串 可 以 
直接 转换 为 数字 ， 也 人 允许 在 开始 和 结尾 处 带 有 空格 。 但 在 开始 和 结尾 
处 的 任意 非 空格 字符 都 不 会 被 当成 数字 直接 量 的 一 部 分 ， 进 而 造成 字 
符 第 转换 为 数字 的 结 休 为 NaN。 有 一 些 数字 转换 看 起 来 让 人 奇怪: true 
转换 为 1，false、 空 字符 串 "转换 为 0。 


原始 值 到 对 和 象 的 转换 也 非常 和 商 单 ， 原 始 值 通过 调用 String0、NumberO) 
或 Boolean0 构 造 画 数 ， 转 换 为 它们 各 自 的 包装 对 象 ( 见 3.6 节 ) 。 


null 和 undefined 属 于 例外 ， 当 将 它们 用 在 期 望 是 一 个 对 象 的 地 方 都 会 造 
成 一 个 类 型 错误 (TypeError) 异常 ， 而 不 会 执行 正常 的 转换 。 


对 象 到 原始 值 的 转换 多 少 有 些 复杂 ，3.8.3 世 将 以 此 为 专题 专门 讲述 。 
3.8.1 ”转换 和 相等 性 


等 的 售 义 灵活 多 变 。 例 如 ， 如 下 这 些 比 较 结果 均 钙 true: 


null==undefined// 这 两 值 被 认为 相等 


"9"==0// 在 比较 之 前 字符 串 转 换 成 数字 


9==false// 在 比较 之 前 布尔 值 转换 成 数字 


"0"==false// 在 比较 之 前 字符 串 和 布尔 值 都 转换 成 数字 


型 转换 。 


需要 特别 注意 的 是 ， 一 个 值 转换 为 另 一 个 值 并 不 意味 着 两 个 值 相等 。 
比如 ， 如 有 果 在 期 望 使 用 布尔 值 的 地 方 使 用 了 undefined， 它 将 会 转换 为 
false， 但 这 并 不 表明 undefined==false。JavaScript 运 算 符 和 语句 期 望 使 
用 多 样 化 的 数据 类 型 ， 并 可 以 相互 转换 。if 语 句 将 undefined 转 换 为 
false， 但 “==” 运 算 符 从 不 试图 将 其 操作 数 转换 为 布尔 值 。 


3.8.2 ” 显 式 类 型 转换 


尽管 JavaScript 可 以 上 自动 做 许多 类 型 转换 ， 但 有 时 仍 需 要 做 显 式 转换 ， 
或 者 为 了 使 代码 变 得 清晰 易 读 而 做 显 式 转换 。 


做 显 式 类 型 转换 最 简单 的 方法 就 是 使 用 Boolean()、Number()、String() 
或 Object0 玉 数 。 我 们 在 3.6 广 已 经 介绍 过 了 。 当 不 通过 new 运 算 和 从 调用 
0 它们 会 作为 类 型 转换 函数 并 按照 表 3-2 所 接 述 的 规则 做 类 


Number ("3")//=>3 


String(false)//=>"false" 或 使 用 false.toString() 
Boolean([])//=>true 


Object(3)//=>new Number(3) 


需要 注意 的 是 ， 除 了 null 或 undefined 之 外 的 任何 值 都 具有 toString0 方 
法 ， 这 个 方法 的 执行 结果 通常 和 String() 方 法 的 返回 结果 一 致 。 同 样 需 
要 注意 的 是 ， 如 果 试 图 把 null 或 undefined 转 换 为 对 象 则 会 像 表 3-2 所 接 
述 的 那样 抛 出 一 个 类 型 错误 (TypeError) 。Object(0) 函 数 在 这 种 情况 下 
不 会 抛 出 异常 ， 它 仅 简 单 地 返回 一 个 新 创建 的 空 对 象 。 


JavaScript 中 的 某 些 运 算 符 会 做 隐 式 的 类 型 转换 ， 有 时 用 于 类 型 转换 。 

如 果 “+” 运 算 符 的 一 个 操作 数 是 字符 串 ， 它 将 会 把 另外 一 个 操作 数 转 换 

为 字符 串 。 一 元 “+” 运 算 符 将 其 操作 数 转换 为 数字 。 同 样 ， 一 元 “! ” 运 

ee 尔 值 并 取 反 。 在 代码 中 会 经 常见 到 这 种 类 型 
J 惯用 法 : 


x+""// 等 价 于 String(x) 


+X// 等 价 于 Number (Xx) .也 可 以 写成 x-0 


!11x// 等 价 于 Boolean(x) .注意 是 双 叹 号 


在 计算 机 程序 中 数字 的 解析 和 格式 化 是 非常 普通 的 工作 ，JavaScript 中 
提供 了 专门 鸭 函 数 和 方法 用 来 做 更 加 精确 的 数字 到 字符 串 (number-to- 
string) 和 字符 串 到 数字 (string-to-number) 的 转换 。 


Number 类 定义 的 toString() 方 法 可 以 接收 表示 转换 基数 (radix) 中 的 可 
选 参数 ， 如 于 不 指定 此 参数 ， 转 换 规则 将 息 基 于 十 进 制 。 同 样 ， 亦 可 
以 将 数字 转换 为 其 他 进 制 数 (范围 在 2~36 之 间 ) ， 例 如 : 


var n=17 


binary_string=n.toString(2);// 转 换 为 "10001" 


octal_string="Q"+n.toString(8);// 转 换 为 "021" 


hex_string="Qx"+n.toString(16);// 转 换 为 "OQx11" 


当 处 理财 务 或 科学 数据 的 时 候 ， 在 做 数字 到 字符 串 的 转换 过 程 中 ， 你 
期 望 自 己 控 制 输出 中 小 数 点 位 置 和 有 效 数 字 位 数 ， 或 者 决定 是 否 需 要 

站 数 记 数 法 。Number 类 为 这 种 数字 到 字符 串 的 类 型 转换 场景 定义 了 二 
个 方法 。toFixed0 根 据 小 数 点 后 的 指定 位 数 将 数字 转换 为 字符 串 ， 它 从 
不 使 用 指数 记 数 法 。toExponential() 使 用 指数 记 数 法 将 数字 转换 为 指数 
形式 的 字符 串 ， 其 中 小 数 点 前 只 有 一 人 位， 小数点 后 的 位 数 则 由 参数 指 
定 (也 就 是 说 有 效 数 字 位 数 比 指定 的 位 数 要 多 一 位 ) ! 扩 ，toPrecision() 
根据 指定 的 有 效 数 字 位 数 将 数字 转换 成 字符 串 。 如 果 有 效 数 字 的 位 数 
少 于 数字 整数 部 分 的 位 数 ， 则 转换 成 指数 形式 。 我 们 注意 到 ， 所 有 三 
个 方法 都 会 适当 地 进行 四 舍 五 入 或 填充 0。 看 一 下 下 面 儿 个 例子 : 


var n=123456.789 


n.toFixed(0);//"123457" 


n.toFixed(2);//"123456.79" 


n.toFixed(5);//"123456.78900" 


n.toExponential(1);//"1.2e+5" 


n.toExponential(3);//"1.235e+5" 
n.toprecision(4);//"1.235e+5" 
n.toprecision(7);//"123456.8" 


n.toprecision(10);//"123456.7890" 


如 有 果 通 过 Number0 转 换 函 数 传 入 一 个 字符 串 ， 它 会 试图 将 其 转换 为 一 
个 整数 或 浮 点 数 直接 量 ， 这 个 方法 只 能 基于 十 进 制 数 进行 转换 ， 并 且 
不 能 出 现 非法 的 尾随 字符 。parseIntO 函 数 和 parseFloat0 函 数 (它们 是 全 
局 函数 ， 不 从 属于 任何 类 的 方法 ) 更 加 灵活 。parseInt() 只 解析 整数 ， 
而 parseFloat() 则 可 以 解析 整数 和 浮 点 数 。 如 有 果 字 符 串 前 级 是 "0x" 或 

者 "0X"，parseInt() 将 其 解释 为 十 六 进 制 数 3-，parseInt() 和 parseFloat() 
都 会 跳 过 任意 数量 的 前 导 空 格 ， 尽 可 能 解析 更 多 数值 字符 ， 并 忽略 后 
面 的 内 容 。 如 采 第 一 个 非 空 格 字符 是 非法 的 数字 和 直接 量 ， 将 最 终 返 回 
NaN: 


parseInt("3 blind mice")//=>3 


parseFloat("3.14 meters")//=>3.14 


parseInt("-12.34")//=> -12 


parseInt("OxFF")//=>255 


parseInt("Oxff")//=>255 


parseInt("-OXFF")//=> -255 


parseFloat(".1")//=>0.1 


parseInt("0.1")//=>0 


parseInt(",1")//=>NaN: 整 数 不 能 以 ". "开始 


parseFloat ("$72.47");//=> NaN: 数 字 不 能 以 "$" 开 始 


parseIntO 可 以 接收 第 二 个 可 选 参数 ， 这 个 参数 指定 数字 转换 的 基数 ， 
合法 的 取 值 范围 是 2~36， 例 如 : 


parseInt("11",2);//=>3(1*2+1) 
parseInt("ff",16);//=>255(15*16+15) 
parseInt("zz",36);//=>1295(35*36+35) 
parseInt("077",8);//=>63(7*8+7) 


parseInt("077",10);//=>77(7*10+7) 


3.8.3 ”对象 转换 为 原始 值 


对 象 到 布尔 值 的 转换 非常 简单 : 所 有 的 对 象 (包括 数组 和 函数 ) 都 转 
换 为 ttue。 对 于 包装 对象 订 是 如 此 : new Boolean(false) 是 一 个 对 象 而 不 
是 原始 值 ， 它 将 转换 为 true 。 


对 和 象 到 字符 串 (object-to-string) 和 对 象 到 数字 (object-to-number) 的 
转换 是 通过 调用 待 转换 对 象 的 一 个 方法 来 完成 的 。 一 个 麻烦 的 事实 
是 ，JavaScript 对 象 有 两 个 不 同 的 方法 来 执行 转换 ， 并 且 接 下 来 要 讨论 
的 一 些 特殊 场景 更 加 复杂 。 值 得 注意 的 是 ， 这 里 提 到 的 字符 串 和 数字 
的 转换 规则 只 适用 于 本 地 对 象 (native object) 。 宿 主 对 象 ( 例 如， 由 
Web 浏 览 器 定义 的 对 象 ) 根据 各 目的 算法 可 以 转换 成 字符 串 和 数字 。 


所 有 的 对 象 继承 了 两 个 转换 方法 。 第 一 个 是 toString0， 它 的 作用 是 返 
回 一 个 反映 这 个 对 象 的 字符 串 。 默 认 的 toString() 方 法 并 不 会 返回 一 个 
有 趣 的 值 (在 例 6-4 中 我 们 会 发 现 它 非常 有 用 ) : 


({x:1,y:2}).tostring()//=>"[object Object]" 


很 多 类 定义 了 更 多 特定 版 本 的 toString0 方 法 。 例 如 ， 数 组 类 (Array 
class) 的 toString() 方 法 将 每 个 数组 元 素 转 换 为 一 个 字符 串 ， 并 在 元 素 之 


间 添 加 过 号 后 合并 成 结果 字符 串 。 函 数 类 (Function class) 的 toString0) 
方法 返回 这 个 函数 的 实现 定义 的 表示 方式 。 实 际 上 ， 这 里 的 实现 方式 
是 通常 是 将 用 户 定 义 的 函数 转换 为 JavaScript 源 代码 字符 串 。 日 期 类 
(Date class) 定义 的 toString0 方 法 返回 了 一 个 可 读 的 (可 被 JavaScript 
解析 的 中) 日 斯 和 时 间 字 符 串 。RegExp 类 (RegExp class) 定义 的 
toString() 方 法 将 RegExp 对 象 转换 为 表示 正则 表达 式 直 接 量 的 字符 串 ; 


[1,2,3].toString()//=>"1,2,3" 
(function(x){f(x);}).tostring()//=>"function(x){\n f(x);\n}" 
/\d+/g.tostring() 

//=>"/\\d+/g" 


new Date(2010,0,1).tostring()//=>"Fri Jan 01 2010 00:00:00 GMT-0Q800(PST)" 


男 一 个 转换 对 象 的 函数 是 valueOf()。 这 个 方法 的 任务 并 未 详细 定义 : 

如 果 存 在 任意 原始 值 ， 它 就 默认 将 对 象 转换 为 表示 它 的 原始 值 。 对 象 
是 复合 值 ， 而 且 大 多 数 对 和 象 无 法 真正 表示 为 一 个 原始 值 ， 因 此 默认 的 
valueOfO) 方 法 简单 地 返回 对 象 本 导 ， 而 不 是 返回 一 个 原始 值 。 数 组 、 
函数 和 正则 表达 式 答 单 地 继承 了 这 个 默认 方法 ， 调 用 这 些 类 型 的 实例 
的 valueOf(0) 方 法 只 是 简单 返回 对 象 本 号 。 日 期 类 定义 的 valueOf(O 方 法 会 
返回 它 的 一 个 内 部 表示 : 1970 年 1 月 1 日 以 来 的 毫秒 数 。 


var d=new Date(2010,9,1);//2010 年 1 月 1 日 (太平 洋 时 间 ) 


d.valueof()//=>1262332800000 


通过 使 用 我 们 刚刚 讲解 过 的 toString0 和 valueOf0 方 法 ， 就 可 以 做 到 对 象 
到 字符 串 和 对 象 到 数字 的 转换 了 。 但 需要 注意 的 是 ， 在 某 些 特殊 的 场 
景 中 ，JavaScript 执 行 了 完全 不 同 的 对 象 到 原始 值 的 转换 。 这 些 特殊 场 
景 在 本 广 的 最 后 会 讲 到 。 


JavaScript 中 对 象 到 字符 串 的 转换 经 过 了 如 下 这 些 步 又 : 


.如 宁 对 象 具 有 toString0 方 法 ， 则 调用 这 个 方法 。 如 采 它 返回 一 个 原始 
值 ，JavaScript 将 这 个 值 转换 为 字符 串 ( 如 果 本 喘 不 是 字符 串 的 话 )， 并 返 
回 这 个 字符 串 结 果 。 需 要 注意 的 是 ， 原 始 值 到 字符 串 的 转换 在 表 3-2 中 
已 经 有 了 详尽 的 说 明 。 


-如果 对 象 没有 toString() 方 法 ， 或 者 这 个 方法 并 不 返回 一 个 原始 值 ， 那 
么 JavaScript 会 调用 valueOf() 方 法 。 如 果 存 在 这 个 方法 ， 则 JavaScript 调 
用 它 。 如 果 返 回 值 是 原始 值 ，JavaScript 将 这 个 值 转换 为 字符 串 (如 果 
本 和 喘 不 是 字符 串 的 话 ) ， 并 返回 这 个 字符 串 结 


否则， JavaScript 元 法 从 toString0 或 valueOfO 狼 记得 一 个 原始 值 ， 因 此 这 
时 它 将 抛 出 一 个 类 型 销 误 异 名 。 


在 对 象 到 数字 的 转换 过 程 中 ，JavaScript 做 了 同样 的 事情 ， 只 是 它 会 首 
先 尝 试 使 用 valueOf() 方 法 : 


:如果 对 象 具 有 valueOfO 方 法 ， 后 者 返回 一 个 原始 值 ， 则 JavaScript 将 这 
个 原始 值 转换 为 数字 (如 果 需 要 的 话 ) 并 返回 这 个 数字 。 


否则， 如 果 对 象 具有 toString() 方 法 ， 后 者 返回 一 个 原始 值 ， 则 
JavaScript 将 其 转换 并 返回 i 。 


:否则 ，JavaScript 抛 出 一 个 类 型 错误 异常 。 


对 和 象 较 换 为 数字 的 细节 解释 了 为 什么 空 数组 会 被 转换 为 数字 0 以 及 为 什 
么 具有 单个 元 聚 的 数组 同样 会 较 换 成 一 个 数字 。 数 组 继承 了 妹 认 的 
valueOfO 方 法 ， 这 个 方法 返回 一 个 对 象 而 不 是 一 个 原始 值 ， 因 此 ， 数 
组 到 数字 的 转换 则 调用 toString0 方 法 。 罕 数组 转换 成 为 空 字符 串 ， 择 
字符 串 转 换 成 为 数字 0。 含 有 一 个 元 素 的 数组 转换 为 字符 串 的 结 有 末 和 这 
个 元 素 转换 字符 串 的 结 末 一 样 。 如 采 数 组 只 包含 一 个 数字 元 素 ， 这 个 
数字 转换 为 字符 串 ， 再 转换 回 数字 。 

JavaScript 中 的 “+” 运 算 符 可 以 进行 数学 加 法 和 字符 串 连 接 操 作 。 如 果 它 
的 其 中 一 个 操作 数 是 对 象 ， 则 JavaScript 将 使 用 特殊 的 方法 将 对 象 转换 
隶 始 值 ， 而 个 态 使 用 其 他 务 相 运 遇 得 的 访 A 


换 将 会 旭 中 对 象 到 原始 值 的 转换 方式 进行 8 


“+” 和 “==” 应 用 的 对 象 到 原始 值 的 转换 包含 日 期 对 象 的 一 种 特殊 情形 。 
日 期 类 是 JavaScript 语 言 核心 中 唯一 的 预 完 定义 类 型 ， 它 定义 了 有 意义 
的 向 字符 串 和 数字 类 型 的 转换 。 对 于 所 有 非 日 期 的 对 象 来 说 ， 对 和 象 到 
原始 值 的 转换 基本 上 是 对 象 到 数字 的 转换 (首先 调用 valueOf0) , 日 
期 对 象 则 使 用 对 象 到 字符 串 的 转换 模式 ， 然 而 ， 这 里 的 转换 和 上 文 讲 
述 的 并 不 完全 一 致 : 通过 valueOf 或 toString0 返 回 的 原始 值 将 被 直接 使 
用 ， 而 不 会 被 强制 转换 为 数字 或 字符 串 。 


和 “==” 一 样 ,，“< ”运算 符 以 及 其 他 关系 运算 符 也 会 做 对 象 到 原始 值 的 
转换 但 要 除去 日 期 对 象 的 特殊 情形 : 任何 对 象 都 会 首先 皖 试 调用 


valueOfOD， 人 然后 调用 toString0。 不 管 得 到 的 原始 值 是 否 直接 使 用 ， 它 都 
不 会 进一步 被 转换 为 数字 或 字符 串 。 


“!=” 和 关系 运算 符 是 唯一 执行 这 种 特殊 的 字符 串 到 原始 值 
的 转换 方式 的 运算 答 其 他 运算 街 到 特定 基 型 的 转换 都 很 明确 ， 而 且 
对 日 期 对 象 来 讲 也 没有 特殊 情况 。 例 如 “-”( 减 号 ) 运算 伍 把 已 的 两 个 
下 面 的 代码 展示 了 日 期 对 象 和 “+” = 
“>” 的 运行 结 


var now=new Date();// 创 建 一 个 日 期 对 象 


typeof(now+1)//=>"string":"+" 将 日 期 转换 为 字符 串 


typeof(now-1)//=>"number":"-" 使 用 对 象 到 数字 的 转换 


now==now. toString()//=>true: 隐 式 的 和 显 式 的 字符 串 转 换 


now> (now-1)//=>true:"> "将 日 期 转换 为 数 


3.9 ”变量 声明 


在 JavaScript 程 序 中 ， 使 用 一 个 变量 之 前 应 当先 声明 。 变 量 是 使 用 关键 
字 var 来 声明 的 ， 如 下 所 示 : 


Var i; 


Var sum, 


也 可 以 通过 一 个 var 天 键 字 来 声明 多 个 变量 : 


Var 1 Sum， 


而 且 还 可 以 将 变量 的 初始 赋值 和 变量 声明 合 写 在 一 起 : 


Var message="hello"; 

Var i=0,]j=0,Kk=0; 

如 条 未 在 var 声 明 语句 中 给 变量 指定 初始 值 ， 那 么 虽然 声明 了 这 个 杰 
量 ， 但 在 给 它 存 入 一 个 值 之 前 ， 它 的 初始 值 承 是 undefined 。 
我 们 注意 到 ， 在 for 和 forvin 循 环 〈 在 第 5 章 会 讲 到 ) 中 同样 可 以 使 用 var 


， 这 样 可 以 更 簿 活 地 声明 在 循环 体 语法 内 中 使 用 的 循环 变量 。 例 
0: 


for(var i=0;i<10;i++)console.log(i); 
for(var i=0,j=10;i<10;i++,j--)console.log(i*j); 


for(var p in o)console.1o0g(p); 


如 果 你 之 前 编写 过 诸如 C 或 Java 的 静态 语言 出 -， 你 会 注意 到 在 
JavaScript 的 变量 声明 中 并 没有 指定 变量 的 数据 类 型 。JavaScript 变 量 可 
以 是 任意 数据 类 型 。 例 如 ， 在 JavaScript 中 首先 将 数字 赋值 给 一 个 变 
量 ， 随 后 再 将 字符 串 赋值 给 这 个 变量 ， 这 是 完全 合法 的 : 


Var i=10; 


i="ten"; 


重复 的 声明 和 遗漏 的 声明 


使 用 var 语 句 重 复 声明 变量 是 合法 且 无 害 的 。 如 采 重 复 声 明 这 有 初始 化 
硕 ， 那 么 这 束 和 一 条 简单 的 赋值 语句 没什么 两 样 。 


如 果 你 试图 读 取 一 个 没有 声明 的 变量 的 值 ，JavaScript 会 报错 。 在 
ECMAScript 5 严格 模式 ( 见 5.7.3 节 ) 中 ， 给 一 个 没有 声明 的 变量 赋值 
也 会 报错 。 然 而 从 历史 上 讲 ， 在 非 严 格 模式 下 ， 如 果 给 一 个 未 声明 的 
变量 赋值 ，JavaScript 实 际 上 会 给 全 局 对 象 创建 一 个 同名 属性 ， 并 且 它 
工作 起 来 像 (但 并 不 完全 一 样 ， 查 看 3.10.2 节 ) 一 个 正确 声明 的 全 局 变 
量 。 这 意味 着 你 可 以 侥幸 不 声明 全 局 变量 。 但 这 是 一 个 不 好 的 习惯 并 
会 造成 很 多 bug， 因 此 ， 你 应 当 始 终 使 用 var 来 声明 变量 。 


3.10 ”变量 作用 域 


一 个 变量 的 作用 域 (scope) 是 程序 源 代码 中 定义 这 个 变量 的 区 域 。 全 
局 变量 拥有 全 局 作用 域 ， 在 JavaScript 代 码 中 的 任何 地 方 都 是 有 定义 
的 。 然 而 在 函数 内 声明 的 变量 只 在 函数 体内 有 定义 。 它 们 是 局 部 变 
量 ， 作 用 域 是 局 部 性 的 。 男 数 参 数 也 是 局 部 变量 ， 它 们 只 在 芳 数 体内 
有 定义 。 

在 函数 体内 ， 局 部 变量 的 优先 级 高 于 同名 的 全 局 变量 。 如 果 在 函数 内 


声明 的 一 个 局 部 变量 或 者 函数 参数 中 市 有 的 变量 和 全 局 变量 重 名 ， 那 
么 全 局 变量 束 彼 局 部 变量 所 巡 盖 。 


圳 
人 


var scope="global";// 声 明 一 个 全 局 


function checkscope( ){ 


TA 


变量 


var scope="local";// 声 明 一 个 同名 的 局 前 


return scope;// 返 回 局 部 变量 的 值 ， 而 不 是 全 局 变量 的 值 


} 


checkscope()//=>"1local" 


尽管 在 全 局 作用 域 编写 代码 时 可 以 不 写 var 语 句 ， 但 声明 局 部 变量 时 则 
必须 使 用 var 语 杀 。 思 考 一 下 如 采 不 这 样 做 会 怎样 : 


scope="global";// 声 明 一 个 全 局 变量 ， 甚 至 不 用 var 来 声明 


function checkscope2(){ 


scope="1local";// 粳 糕 ! 我 们 刚 修 改 了 全 局 变量 


myscope="1local";// 这 里 显 式 地 声明 了 一 个 新 的 全 局 变量 
return[scope,myscope];// 返 回 两 个 值 

} 

checkscope2( )//=>["local", "local"] :产生 了 副 作 


scope//=>"local": 全 局 变量 修改 了 


myscope//=>"local" :全 局 命名 空间 搞 乱 了 


函数 定义 是 可 以 舱 矢 的 。 由 于 每 个 函数 都 有 它 目 己 的 作用 域 ， 因 此 会 
出 现 几 个 局 部 作用 域 插 套 的 情况 ， 例 如 : 


var scope="global scope";// 全 局 变量 


function checkscope( ){ 


var scope="local scope";// 局 部 变量 


function nested(){ 


var scope="nested scope";// 髓 套 作用 域内 的 局 部 变 二 


加 | 


return scope;// 返 回 当前 作用 域内 的 值 


} 


return nested(); 


} 


Eh 


或 " 


checkscope( )//=> "由 套 作 


3.10.1 函数 作用 域 和 声明 提前 


在 一 些 类 似 C 语 言 的 编程 语言 中 ， 人 花 括 号 内 的 每 一 段 代码 都 具有 各 上 自 的 
作用 域 ， 而 且 变 量 在 声明 它们 的 代码 段 之 外 是 不 可 见 的 ， 我 们 称 为 块 
级 作用 域 (block scope) ， 而 JavaScript 中 没有 块 级 作用 域 。JavaScript 
取而代之 地 使 用 了 函数 作用 域 (function scope) : 变量 在 声明 它们 的 画 
数 体 以 及 这 个 函数 体 髓 套 的 任意 函数 体内 都 是 有 定义 的 。 


在 如 下 所 示 的 代码 中 ， 在 不 同位 置 定义 了 变量 i、j 和 k， 它 们 都 在 同一 
个 作用 域内 一 一 这 三 个 变量 在 函数 体内 均 是 有 定义 的 。 


function test(o){ 


var i=0;//i 在 整个 画 数 体内 均 是 有 定义 的 


if(typeof o=="object"){ 


var j=0;//j 在 范 数 体内 是 有 定义 的 ， 不 仅仅 是 在 这 个 代码 段 内 


for (var k=0;k<10;k++){//k 在 函数 体内 是 有 定义 的 ， 不 仅仅 是 在 循环 内 


console.1og(k) ;// 输 出 数字 9~-9 


} 


console.10g(k);//k 已 经 定义 了 ， 输 出 10 


} 


console.10g(j);//j 已 经 定义 了 ,但 可 能 没有 初始 化 


} 


JavaScript 的 函数 作用 域 是 指 在 函数 内 声明 的 所 有 变量 在 玉 数 体内 始终 
是 可 见 的 。 有 意思 的 是 ， 这 意味 着 变量 在 声明 之 前 甚至 已 经 可 用 。 
JavaScript 的 这 个 特性 被 非 正式 地 称 为 声明 提前 (hoisting) ， 即 
JavaScript 函 数 里 声明 的 所 有 变量 〈 但 不 涉及 赋值 ) 都 被 “提前 ”至 函数 
体 的 顶部 绊 -， 看 一 下 如 下 代码 : 


Var Scope="global"， 


function f(){ 


console.1l0g(scope);// 输 出 "undefined"， 而 不 是 "global" 


var scope="1ocal";// 变 量 在 这 里 赋 初 始 值 ， 但 变量 本 身 在 函数 体内 任何 地 方 均 是 有 定义 的 


console.10g(scope);// 输 出 "local" 


} 


你 可 能 会 误 以 为 函数 中 的 第 一 行 会 输出 "global"， 因 为 代码 还 没有 执行 
到 var 语 句 声 明 局 部 变量 的 地 方 。 其 实 不 然 ， 由 于 画 数 作用 域 的 特性 ， 
局 部 变量 在 整个 函 数 体 始终 在 有 定义 的 ， 也 束 是 说 ， 在 函数 体内 局 部 
变量 遮盖 了 同名 全 局 变量 。 尽 管 如 此 ， 只 有 在 程序 执行 到 var 语 句 的 时 
候 ， 局 部 变量 才 会 被 真正 赋值 。 因 此 ， 上 述 过 程 等 从 于: 将 函数 内 的 
变量 声明 “提前 ”至 函数 体 顶 部 ， 同 时 变量 初始 化 留 在 原来 的 位 置 : 


function f(){ 


var scope;// 在 函数 顶部 声明 了 局 部 变量 


加 | 


console.1og(scope) ;// 变 量 存 在 ， 但 其 值 是 "undefined" 


scope="local";// 这 里 将 其 初始 化 并 赋值 


console.1og(scope);// 这 里 它 具 有 了 我 们 所 期 望 的 值 


} 


在 具有 块 级 作用 域 的 编程 语言 中 ， 在 狭小 的 作用 域 里 让 变量 声明 和 使 
用 变量 的 代码 尽 可 能 靠近 彼此 ， 通 第 来 讲 ， 这 古 一 个 非 第 不 错 的 编程 
习惯 。 由 于 JavaScript 没 有 块 级 作用 域 ， 因 此 一 些 程序 员 特 意 将 变量 声 
明 放 在 函数 体 项 部 ， 而 不 古 将 声明 靠近 放 在 使 用 变量 之 处 。 这 种 做 法 
使 得 他 们 的 源 代码 非常 清晰 地 反映 了 真实 的 变量 作用 域 。 


3.10.2 ”作为 属性 的 变量 


当 声 明 一 个 JavaScript 全 局 变量 时 ， 实 际 上 是 定义 了 全 局 对 象 的 一 个 属 

性 〈 见 3.5 节 ) 。 当 使 用 var 声 明 一 个 变量 时 ， 创 建 的 这 个 属性 是 不 可 配 
置 的 ( 见 6.7 节 ) ， 也 就 是 说 这 个 变量 无 法 通过 delete 运 算 符 删除 。 可 能 
你 已 经 注意 到 了 ， 如 果 你 没有 使 用 严格 模式 并 给 一 个 未 声明 的 变量 赋 

值 的 话 ，JavaScript 会 自动 创建 一 个 全 局 变量 。 以 这 种 方式 创建 的 变量 

是 全 局 对 象 的 正常 的 可 配 值 必 性， 并 可 以 删除 它们 : 


var truevar=1;// 声 明 一 个 不 可 删除 的 全 局 变量 


fakevar=2;// 创 建 全 局 对 象 的 一 个 可 删除 的 属性 


this.fakevar2=3;// 同 上 


没有 被 删除 


delete truevar//=>false: 变 量 


delete fakevar//=>true: 变 量 被 删除 


delete this,.fakevar2//=>true :变量 被 删除 


JavaScript 全 局 变量 是 全 局 对 象 的 属性 ， 这 是 在 ECMAScript 规 范 中 强制 
规定 的 。 对 于 局 部 变量 则 没有 如 此 规定 ， 但 我 们 可 以 想象 得 到 ， 局 部 
变量 当做 跟 函 数 调用 相关 的 某 个 对 象 的 属性 。ECMAScript 3 规范 称 该 
对 象 为 “调用 对 象 "(call object)，ECMAScript 5 规范 称 为 “声明 上 下 文 对 
象 ”(declarative environment record) 。JavaScript 可 以 允许 使 用 this 关 键 
字 来 引用 全 局 对 象 ， 却 没有 方法 可 以 引用 局 部 变量 中 存放 的 对 象 。 这 
种 存放 局 部 变量 的 对 象 的 特有 性 质 ， 是 一 种 对 我 们 不 可 见 的 内 部 实 
0 我 们 会 在 下 
一 节 展开 讲述 。 


3.10.3 ”作用 域 链 


JavaScript 是 基于 词法 作用 域 的 语言 : 通过 阅读 包含 变量 定义 在 内 的 数 
行 源码 束 能 知道 变量 的 作用 域 。 全 局 变量 在 程序 中 始终 都 是 有 定义 
的 局 部 变量 在 声明 它 的 芳 数 体内 以 及 其 所 敬 套 的 函数 内 始终 是 有 害 
义 YY O 


如 果 将 一 个 局 部 变量 看 做 是 自 定 义 实现 的 对 象 的 属性 的 话 ， 那 么 可 以 
换个 角度 来 解读 变量 作用 域 。 每 一 段 JavaScript 代 码 (全 局 代码 或 函 
数 ) 都 有 一 个 与 之 关联 的 作用 域 链 (scope chain) 。 这 个 作用 域 链 是 一 
个 对 象 列 表 或 者 链表 ， 这 组 对 象 定义 了 这 段 代 码 “ 作 用 域 中 ”的 变量 。 
当 JavaScript 需 要 查找 变量 x 的 值 的 时 候 (这 个 过 程 称 做 “变量 解 

析 ” (variable resolution) ) ， 它 会 从 链 中 的 第 一 个 对 象 开 始 查 找 ， 如 
果 这 个 对 象 有 一 个 名 为 x 的 属性 ， 则 会 直接 使 用 这 个 属性 的 值 ， 如 果 第 
一 个 对 象 中 不 存在 名 为 x 的 属性 ，JavaScript 会 继续 查找 链 上 的 下 一 个 对 
象 。 如 果 第 二 个 对 象 依然 没有 名 为 x 的 属性 ， 则 会 继续 查找 下 一 个 对 
象 ， 以 此 类 推 。 如 果 作 用 域 链 上 没有 任何 一 个 对 象 售 有 属性 x， 那 么 就 
认为 这 段 代码 的 作用 域 链 上 不 存在 x<， 并 最 终 抛 出 一 个 引用 错误 


(ReferenceError) 异常 。 


在 JavaScript 的 最 顶层 代码 中 〈 也 就 是 不 包含 在 任何 范 数 定义 内 的 代 

码 ) ， 作 用 域 链 由 一 个 全 局 对 象 组 成 。 在 不 包含 肉 套 的 函数 体内 ， 作 
用 域 链 上 有 两 个 对 象 ， 第 一 个 是 定义 函数 参数 和 局 部 变量 的 对 象 ， 第 
二 个 是 全 局 对 象 。 在 一 个 藤 侠 的 函数 体内 ， 作 用 域 链 上 至 少 有 三 个 对 
象 。 理 解 对 象 链 的 创建 规则 是 非常 重要 的 。 当 定义 一 个 函数 时 ， 它 实 
际 上 保存 一 个 作用 域 链 。 当 调用 这 个 函数 时 ， 它 创建 一 个 新 的 对 象 来 
存储 它 的 局 部 变量 ， 并 将 这 个 对 象 添 加 至 保存 的 那个 作用 域 链 上 ， 同 
时 创建 一 个 新 的 更 长 的 表示 函数 调用 作用 域 的 “ 链 ”。 对 于 骨 套 函数 来 


讲 ， 事 情 变 得 更 加 有 趣 ， 每 次 调用 外 部 函数 时 ， 内 部 函数 又 会 重新 定 
义 一 再 。 因 为 每 次 调用 外 部 函数 的 时 候 ， 作 用 域 链 都 征 不 同 的 。 内 部 
函数 在 每 次 定义 的 时 候 都 有 微妙 的 老 别 一 一 在 每 次 调用 外 部 函数 时 ， 
部 函数 的 代码 都 是 相同 的 ， 而 且 关 联 这 段 代码 的 作用 域 链 也 不 相 


作用 域 链 的 概念 对 于 理解 with 语句 〈 见 5.7.1T) 是 非常 有 帮助 的 ， 同 样 
对 理解 闭 包 〈 见 8.6 节 ) 的 概念 也 至 关 重 要 。 


[1] 例 如 C 和 和 Java。 


[2] Java 程 序 员 应 该 很 熟悉 这 种 格式 ， 就 像 他 们 熟悉 双 精度 (double) 
类 型 一 样 。 在 C 和 C++ 的 所 有 现代 实现 中 也 都 用 到 了 双 精度 类 型 。 


[3] 在 JavaScript 的 真实 运行 环境 中 ，0.3-0.2=0.099 999 999 999 999 98。 


[4]“ 基 本 多 语种 平面 ”Basic Multilingual Plane ，BMP)， 也 称 * 零 断 
面 ”( Plan 0), 是 Unicode 中 的 一 个 编码 区 段 。 编 码 介 于 U+0000 一 U+EFFFEF 
之 间 。 


[5]_escape sequence 译 为 “ 转 义 序列 *"， 有 了 时 也 译 成 “ 转 义 字符 "和 “逃逸 
符 ”， 本 蔬 中 统一 译 为 “ 转 义 字符 ”。 

[6]. 这 里 的 转换 基数 是 指 二 进 制 、 八 进 制 、 十 六 进 制 等 。 

[Z]. 如 果 指 定 的 参数 为 93， 有 效 数 字 位 数 为 4 位 。 


[8]_ 在 ECMAScript 3 中 ， parseImnt0 可 以 对 前 缀 为 “”( 不 能 
是 "0x" 或 "0X") 的 数字 做 八进制 转换 。 由 于 其 细节 没有 详细 说 明 ， 你 并 
无 法 直接 使 用 parseInt() 来 对 前 级 为 0 的 值 进行 解析 ， 除 非 你 明确 指出 所 
使 用 的 转换 基数 ! 在 ECMAScript 5 中 ，parseInt() 只 有 在 明确 传 入 第 二 
个 参数 8 时 才 会 解析 八进制 数 。 


[9] 这 里 的 原文 是 JavaScript-parsable， 意 指 可 以 通过 JavaScript 的 方法 过 
滤 并 再 做 封装 。 


[10] 对 象 的 toString0 方 法 返回 一 个 字符 串 直 接 量 〈 作 者 所 说 的 原始 
值 ) ，JavaScript 将 这 个 字符 串 转 换 为 数字 类 型 ， 并 返回 这 个 数字 。 


[11] 编程 语言 分 为 动态 (类 型 ) 语言 和 静态 (类 型 ) 语言 ， 动 态 类 型 语 
言 是 指 在 运行 期 间 才 去 做 数据 类 型 检查 的 语言 ， 也 就 是 说 ， 在 用 动态 
类 型 的 语言 编程 时 ， 永 远 也 不 用 给 任何 变量 指定 数据 类 型 ， 该 语言 会 
在 第 一 次 赋值 给 变量 时 ， 在 内 部 将 数据 类 型 记录 下 来 。Python 、Ruby 
和 JavaScript 就 是 典型 的 动态 类 型 语言 。 静 态 类 型 语言 与 动态 类 型 语言 
刚好 相反 ， 它 的 数据 类 型 是 在 编译 其 间 检 查 的 ， 也 就 是 说 在 写 程序 时 
要 声明 所 有 变量 的 数据 类 型 ，C/C++ 是 静态 类 型 语言 的 典型 代表 ， 其 他 
的 静态 类 型 语言 还 有 C#、JAVA 等 。 


[121 “声明 提前 ”这 步 操作 是 在 Javascript 引 擎 的 “ 预 编译 "时 进行 的 ， 是 在 
代码 开始 运行 之 前 ， 更 多 细 和 请 阅读 相关 ppt: 
http://www.slideshare.net/lijing00333/javascript-engine ° 


第 4 章 “” 表达 式 和 运算 符 


表达 式 (expression) JavaScript 中 的 一 个 短语 ，JavaScript 解 释 器 会 将 其 
计算 (evaluate) 出 一 个 结果 。 程 序 中 的 常量 是 最 简单 的 一 类 表达 式 。 
变量 名 也 是 一 种 简单 的 表达 式 ， 它 的 值 就 是 赋值 给 变量 的 值 。 复 杂 表 
达 式 是 由 简单 表达 式 组 成 的 。 比 如 ， 数 组 访问 表达 式 是 由 一 个 表示 数 
组 的 表达 式 、 左 方 括号 、 一 个 整数 表达 式 和 右 方 括号 构成 。 它 们 所 组 
成 的 新 的 表达 式 的 运算 结果 是 该 数组 的 特定 位 置 的 元 素 值 。 同 样 的 ， 
a 表达 式 由 一 个 表示 函数 对 象 的 表达 式 和 0 个 或 多 个 参数 表达 式 


将 简单 表达 式 组 合成 复杂 表达 式 最 常用 的 方法 就 是 使 用 运算 符 
(operator) 。 运 算 符 按照 特定 的 运算 规则 对 操作 数 (通常 是 两 个 ) 进 

行 运算 ， 并 计算 出 新 值 。 乘 法 运算 符 “*” 是 比较 简单 的 例子 。 表 达 式 

x*y 是 对 两 个 变量 表达 式 x 和 y 进 行 运算 并 得 出 结果 。 有 了 时 我 们 更 愿意 说 

运算 符 返 回 了 一 个 值 而 不 是 “计算 ”出 了 一 个 值 。 

本 章 将 讲解 所 有 的 JavaScript 运 算 符 ， 同 时 也 讲解 不 涉及 运算 符 的 表达 

式 《比如 访问 数组 元 素 和 函数 调用 ) 。 如 果 你 熟悉 C 语 法 风格 的 其 他 编 

程 语言 ， 你 会 发 现 大 多 数 JavaScript 表 达 式 和 运算 符 都 似曾相识 。 

4.1 原始 表达 式 

最 简单 的 表达 式 是 “原始 表达 式 ”(primary expression) 。 原始 表达 式 是 

表达 式 的 最 小 单位 一 一 它们 不 再 包含 其 他 表达 式 。JavaScript 中 的 原始 

表达 式 包 含 常 量 或 直接 量 、 关 键 字 和 变量 。 

直接 量 是 直接 在 程序 中 出 现 的 常数 值 。 它 们 看 起 来 像 : 


1 .23// 数 字 直 接 和 


"he1L1o"V/ 字 符 串 直接 旧 


/pattern/// 正 则 表达 式 直 接 引 


JavaScript 数 字 和 直接 量 的 语法 在 3.1 节 已 经 做 了 讲解 。 字 符 串 直接 量 在 3.2 
节 做 了 讲解 。 正 则 表达 式 直 接 量 语 法 在 3.2.4 市 做 了 简单 介绍 ， 在 第 10 
章 将 做 专门 讲解 。 


JavaScript 中 的 一 些 保留 字 构 成 了 原始 表达 式 : 


true// 返 回 一 个 布尔 值 ， 真 


false// 返 回 一 个 布尔 值 : 假 


null// 返 回 一 个 值 ， 空 


this// 返 回 "当前 "对 象 


我 们 在 3.3 广 和 3.4 广 中 学 习 了 true、false 和 null。 和 其 他 关键 字 不 同 ， 

this 并 不 是 一 个 常量 ， 它 在 程序 的 不 同 地 方 返 回 的 值 也 不 相同 。this 关 
键 字 经 常 在 面 癌 对 象 编程 中 出 现 。 在 一 个 方法 体内 ，this 返 回调 用 这 个 
0 ° 参照 4.5 节 、 第 8 章 (8.2.2 廊 ) 和 第 9 章 来 获取 关于 this 的 详 
细 言 轧 号 


最 后 ， 第 三 种 原始 表达 式 是 变量 : 


i// 返 回 变量 i 的 值 


sum// 返 回 sum 的 值 


undefined//undefined 是 全 局 变量 ， 和 null 不 同 ， 它 不 是 一 个 关键 字 


当 JavaScript 代 码 中 出 现 了 标识 符 ，JavaScript 会 将 其 当做 变量 而 去 查找 
它 的 值 。 如 果 变 量 名 不 存在 ， 表 达 式 运算 结果 为 undefined。 然 而 ， 在 
ECMAScript 5 的 严格 模式 中 ， 对 不 存在 的 变量 进行 求 值 会 抛 出 一 个 引 


用 错误 异 解 。 


4.2 对象 和 数组 的 初始 化 表达 式 


对 象 和 数组 初始 化 表达 式 实 际 上 是 一 个 新 创建 的 对 象 和 数组 。 这 些 初 
台 化 表达 式 有 时 称 做 “对 象 直接 量 ” 和 “数组 直接 量 ”。 然 而 和 布尔 直接 量 
不 同 ， 它 们 不 是 原始 表达 式 ， 因 为 它们 所 包含 的 成 员 或 者 元 素 都 古 了 于 
表达 式 。 效 组 初始 化 表达 式 语 法 非常 商 单 ， 我 们 以 此 开始 。 


数组 初始 化 表达 式 是 通过 一 对 方 括号 和 其 内 由 逗号 隅 开 的 列表 构成 
和 
J 人 ITVH, : 


[] // 一 个 空 数组 : [] 内 留 空 即 表示 该 数组 没有 任何 元 素 


[1+2, 3+4]// 拥 有 两 个 元 素 的 数组 ， 第 一 个 是 3， 第 二 个 是 7 


数组 初始 化 表达 式 中 的 元 取 初 始 化 表达 式 也 可 以 是 数组 初始 化 表达 
式 。 也 束 古 说 ， 这 些 表达 式 古 可 以 舱 仅 的 : 


Var matrix=[[1,2,3],1[4,5,6],1[7,8,9]]; 


JavaScript 对 数组 初始 化 表达 式 进 行 来 值 的 时 候 ， 数 组 初始 化 表达 式 中 
的 元 素 表 达 式 也 都 会 各 目 计 算 一 次 。 也 束 是 说 ， 数 组 初始 化 表达 式 每 
次 计算 的 值 有 可 能 是 不 同 的 。 


数组 直接 量 中 的 列表 逗号 之 间 的 元 素 可 以 省 略 ， 这 时 省 略 的 空位 会 填 
充值 undefined。 人 例如， 下面 这 个 数组 包含 5 个 元 素 ， 其 中 三 个 元 素 是 
Undefined: 


var sparseArray=[1,,,,5]; 


数组 直接 量 的 元 素 列表 结尾 处 可 以 留 下 单个 喜 号 ， 这 时 并 不 会 创建 一 
个 新 的 值 为 undefined 的 元 素 。 

对 和 象 初始 化 表达 式 和 数组 初始 化 表达 式 非 常 类 似 ， 只 是 方 插 号 被 花 括 
号 代 蔡 ， 并 日 每 个 子 表 达 式 都 包含 一 个 属性 名 和 一 个 冒号 作为 前 级 : 


var p={x:2.3,y:-1.2};// 一 个 拥有 两 个 属性 成 员 的 对 象 


var gd={]};// 一 个 空 对 象 


q.X=2.3;q.y=-1.2;//q 的 属性 成 员 和 p 的 一 样 


对 象 直接 量 也 可 以 肉 侠 ， 比 如 : 


var rectangle={upperLeft:{x:2,y:2}, 


lowerRight:{x:4,y:5}}; 


JavaScript 求 对 象 初始 化 表达 式 的 值 的 时 候 ， 对 象 表达 式 也 都 会 各 自 计 
算 一 次 ， 并 且 它 们 不 必 包 含 常 数值 : 它们 可 以 是 任意 JavaScript 表 达 
式 。 同 样 ， 对 象 直接 量 中 的 属性 名 称 可 以 是 字符 串 而 不 是 标识 符 (这 
En 0 


Var side=1; 
Var square={"upperLeft":{x:p.x,y:p.y}, 


'lJowerRight':{x:p.x+side,y:p.yt+side}}; 


第 6 章 和 第 7 章 会 再 次 讨论 对 象 和 数组 的 初始 化 表达 式 。 
4.3 轴 数 定义 表达 去 


函数 定义 表达 式 定 义 一 个 JavaScript 函 数 。 表 达 式 的 值 是 这 个 新 定义 的 
函数 。 从 某 种 意义 上 讲 ， 函 数 定义 表达 式 可 称 为 “函数 直接 量 ”， 毕 况 
对 象 初始 化 表达 式 也 称 为 “对象 直接 量 ”。 一 个 典型 的 函数 定义 表达 式 
包含 关键 字 function， 跟 随 其 后 的 是 一 对 圆 括 号 ， 括 号 内 是 一 个 以 逗号 


分 割 的 列表 ， 列 表 含 有 0 个 或 多 个 标识 符 (参数 名 ) ， 然 后 再 跟随 一 个 
由 花 括号 包 焉 的 JavaScript 代 码 段 (函数 体 ) ， 例 如 : 


// 这 个 函数 返回 传 入 参数 值 的 平方 


Var square=function(x){return x*x;} 


畏 数 定义 表达 式 同样 可 以 包 合 函 数 的 名 字 。 画 数 也 可 以 通过 函数 语句 
来 定义 ， 而 不 是 函数 表达 式 。 更 多 详情 会 在 第 8 章 中 讨论 。 


4.4 属性 访问 表达 式 


属性 访问 表达 式 运 算得 到 一 个 对 象 属性 或 一 个 数组 元 素 的 值 。 
JavaScript 为 属性 访问 定义 了 两 种 语法 : 


expression.identifer 


expression[expression] 


第 一 种 写法 是 一 个 表达 式 后 跟随 一 个 句点 和 标识 人 特 。 表 达 式 指定 对 
象 ， 标 识 符 则 指定 需要 访问 的 属性 的 名 称 。 第 二 种 写法 是 使 用 方 括 
号 ， 方 括号 内 是 另外 一 个 表达 式 《这 种 方法 适用 于 对 象 和 数组 ) 。 第 
二 个 表达 式 指定 要 访问 的 属性 的 名 称 或 者 代表 要 访问 数组 元 素 的 索 
引 。 这 里 有 一 些 具体 的 例子 : 


var 0={X:1,y:{z:3}};// 一 个 示例 对 象 


var a=[o,4, [5,6]];// 一 个 包含 这 个 对 象 的 示例 数组 


[还 


0.X//=>1: 表 达 式 0 的 x 属性 


0.y.Z//=>3: 表 达 式 0.y 的 z 属 性 


o["x"]//=>1: 对 象 o 的 x 属性 


| 圭 


a[1]//=>4: 表 达 式 a 中 素 引 为 1 的 元 素 


a[2]["1"]//=>6: 表 达 式 a[2] 中 索引 为 1 的 元 素 


= 


a[90] .x//=>1: 表 达 式 a[0] 的 x 属性 


[ 弃 


不 管 使 用 哪 种 形式 的 属性 访问 表达 式 ， 在 “.” 和 “[” 之 前 的 表达 式 总 是 会 
首先 计算 。 如 果 计 算 结果 是 null 或 者 undefined， 表 达 式 会 抛 出 一 个 类 型 
错误 异常 ， 因 为 这 两 个 值 都 不 能 包含 任意 属性 。 如 有 果 运 算 结 果 不 是 对 
象 〈 或 者 数组 ) ，JavaScript 会 将 其 转换 为 对 象 (参考 3.6 匠 ) 。 如 果 对 
象 表达 式 后 跟随 句点 和 标识 符 ， 则 会 查找 由 这 个 标识 符 所 指定 的 属性 
的 值 ， 并 将 其 作为 整个 表达 式 的 值 返回 。 如 果 对 象 表达 式 后 跟随 一 对 
方 括号 ， 则 会 计算 方 括号 内 的 表达 式 的 值 并 将 它 转换 为 字符 串 。 不 论 
哪 种 情况 ， 如 果 命 名 的 属性 不 存在 ， 那 么 整个 属性 访问 表达 式 的 值 就 


是 undefined 。 


显然 .identifier 的 写法 更 加 简单 ， 但 需要 注意 的 是 ， 这 种 方式 只 适用 于 
要 访问 的 属性 名 称 是 合法 的 标识 符 ， 并 且 需 要 知道 要 访问 的 属性 的 名 
字 。 如 果 属 性 名 称 是 一 个 保留 字 或 者 包含 空格 和 标点 符号 ， 或 是 一 个 
数字 〈 对 于 数组 来 说 ) ， 则 必须 使 用 方 括号 的 写法 。 当 属性 名 是 通过 
运算 得 出 的 值 而 不 是 固定 的 值 的 时 候 ， 这 时 必须 使 用 方 括号 写法 ( 具 
体 示例 参照 6.2.1 节 ) 。 


对 象 和 其 属性 的 细节 会 在 第 6 章 泗 盖 。 数 组 及 其 元 素 会 在 第 7 章 讲 述 。 
4.5 ”调用 表达 式 

JavaScript 中 的 调用 表达 式 (invocation expression) 是 一 种 调用 (或 者 
执行 ) 函数 或 方法 的 语法 表示 。 它 以 一 个 函数 表达 式 开 始 ， 这 个 函数 


表达 式 指 代 了 要 调 用 的 函数 。 函 数 和 表达 式 后 跟随 一 对 圆 括 号， 括号 内 
征 一 个 以 逗号 隔 开 的 参数 列表 ， 参 数 可 以 有 0 个 也 可 有 多 个 ， 例 如 : 


f(0)//f 是 一 个 函数 表达 式 ; 0 是 一 个 参数 表达 式 


Math.max(x,y,z)//Math.max 是 一 个 函数 ;x,y 和 z 是 参数 


a.sort()//a.sort 是 一 个 函数 ， 它 没有 参数 


当 对 调用 表达 式 进 行 求 值 的 时 候 ， 首 先 计算 范 数 表达 式 ， 然 后 计算 参 
数 表 达 式 ， 得 到 一 组 参数 值 。 如 果 函 数 表 达 式 的 值 不 是 一 个 可 调用 的 
对 象 ， 则 抛 出 一 个 类 型 错误 异常 〈 所 有 的 函数 都 是 可 调用 的 ， 即 使 特 
主 对 象 不 是 函数 它 也 有 可 能 锐 调 用 ， 这 里 的 区 别 将 在 8.7.7 市 讲述 ) 。 
然后 ， 实 参 的 值 被 依次 赋值 给 形 参 ， 这 些 形 参 是 定义 函数 时 指定 的 ， 

接 下 来 开始 执行 函数 体 。 如 果 画 数 使 用 retum 语 句 给 出 一 个 返回 值 ， 那 
么 这 个 返回 值 殉 是 整个 调用 表达 式 的 值 。 否 则 ， 调 用 表达 式 的 值 束 是 
undefined。 范 数 调 用 一 一 包括 当 形 参 表达 式 的 个 数 和 函数 定义 中 实 参 
的 个 数 不 匹 配 的 时 候 的 运行 情况 一 一 的 细节 将 会 在 第 8 章 详细 讨论 。 


任何 一 个 调用 表达 式 都 包含 一 对 圆 括 号 和 左 圆 括号 之 前 的 表达 式 。 如 
果 这 个 表达 式 是 一 个 属性 访问 表达 式 ， 那 么 这 个 调用 称 做 “方法 调 

用 ” (method invocation) 。 在 方法 调用 中 ， 执 行 函数 体 的 时 候 ， 作 为 
属性 访问 主题 的 对 象 和 数组 便 是 其 调用 方法 内 this 的 指向 。 这 种 特性 使 
得 在 面向 对 象 编程 范例 中 ， 函 数 (其 OO 名 称 为 “方法 ”) 可 以 调用 其 宿 
主 对 象 。 参 照 第 9 章 以 获取 更 相信 的 信息 。 


并 不 是 方法 调用 的 调用 表达 式 通常 使 用 全 局 对 象 作 为 this 关 键 字 的 值 。 
然而 在 ECMAScript 5 中 ， 那 些 通 过 严格 模式 定义 的 函数 在 调用 时 将 使 
用 undefined 作 为 this 的 值 ，this 不 会 指向 全 局 对 象 。 人 参照 5.7.3 节 以 获得 
更 多 天 于 严格 模式 的 信息 。 


4.6 对象 创建 表达 去 


对 象 创建 表达 式 (object creation expression) 创建 一 个 对 象 并 调用 一 个 
函数 《这 个 函数 称 做 构造 男 数 ) 初始 化 新 对 象 的 属性 。 对 象 创 建 表达 
I 只 是 对 象 创建 表达 式 之 前 多 了 一 个 关 
建 字 new: 


new Object() 


new Point(2,3) 


如 采 一 个 对 象 创建 表达 式 不 需要 传 入 任何 参数 给 构造 画 数 的 话 ， 那 么 
这 对 空间 括号 是 可 以 省 略 掉 的 : 


new Object 


new Date 


当 计算 一 个 对 象 创建 表达 式 的 值 时 ， 和 对 象 初始 化 表达 式 通过 {} 创 建 
对 象 的 做 法 一 样 ，JavaScript 首 先 创 建 一 个 新 的 空 对 象 ， 然 后 ， 
JavaScript 通 过 传 入 指定 的 参数 并 将 这 个 新 对 象 当 做 this 的 值 来 调用 一 个 
指定 的 函数 。 这 个 函数 可 以 使 用 this 来 初始 化 这 个 新 创建 对 象 的 属性 。 
那些 被 当成 构造 画 数 的 函数 不 会 返回 一 个 值 ， 并 且 这 个 新 创建 并 被 初 
化 后 的 对 象 就 是 整个 对 象 创建 表达 式 的 值 。 如 果 一 个 构造 画 数 确实 
返回 了 一 个 对 象 值 ， 那 么 这 个 对 象 就 作为 整个 对 象 创建 表达 式 的 值 ， 
而 新 创建 的 对 象 就 废弃 了 。 


构造 函数 的 细节 将 在 第 9 章 讲 述 。 
4.7， 运 算 符 概 述 


JavaScript 中 的 运算 符 用 于 算术 表达 式 、 比 较 表 达 式 、 人 逻辑 表达 式 、 同 
值 表达 式 等 。 表 4-1 简 单列 出 了 JavaScript 中 的 运算 符 ， 作 为 一 个 方便 的 


~ 
参照 。 


需要 注意 的 是 ， 大 多 数 运算 符 都 是 由 标点 符号 表示 的 ， 比 

如 “+” 和 “=”。 而 另外 一 些 运 算 符 则 是 由 关键 字 表示 的 ， 比 如 delete 和 
instanceof。 关键 子 运 算 符 和 标点 符号 所 表示 的 运算 符 一 样 都 是 正规 的 
运算 符 ， 它 们 的 语法 都 非常 言 简 意 凡 。 


表 4-1 坪 按照 运算 符 的 优先 级 排序 的 ， 前 面 的 运算 符 优 先 级 要 高 于 后 面 
的 运算 符 优 移 级 。 被 水 平分 割 线 分 隔 开 来 的 运算 符 具有 不 同 的 优先 

级 。 标 题 为 A 的 列表 示 运 算 符 的 结合 性 ，L (从 左 至 右 ) 或 R (从 右 至 

左 ) ， 标 题 为 N 的 列表 示 操 作 数 的 个 数 。 标 题 为 “类 型 ”的 列表 示 期 望 的 
操作 数 类 型 ， 以 及 运算 符 的 结果 类 型 (在 “一 ”符号 之 后 ) 。 表 4-1 之 后 
的 段落 会 解释 优先 级 、 结 合 性 和 操作 数 类 型 的 概念 。 表 4-1 只 对 运算 符 
做 单独 讨论 。 


表 4-1: JavaScript 运算 符 


运算 符 操作 A N 类 型 
十 十 前 /后 增 量 R 1 lval™ 一 num 
SS 前 /后 减 量 R 1 lval 一 num 
求 反 R 1 num—num 
转换 为 数字 R 1 num—num 
按 位 求 反 R 1 int 一 int 
! 逻辑 非 R 1 bool—bool 
delete 删除 属性 R 1 lval—bool 
typeof 检测 操作 数 类 型 R 1 any 一 str 
void 返回 undefined 值 R 1 any 一 undef 
-关注 乘 ， 除 ， 求 余 L 2 num,num 一 num 
+、 一 加 ， 减 L 2 num,num 一 num 
字符 串 连 接 L 2 str,str—str 
<< 左 移 位 L 2 int,int 一 int 
>> 有 符号 右 移 L 2 int,int—int 
>>> 无 符号 右 移 L 2 int,int—int 
<、<=、>、》>= 比较 数字 顺序 L 2 num,num 一 bool 
< < yy= 比较 在 字母 表 中 的 顺序 L 2 str,str 一 bool 
instanceof 测试 对 象 类 L 2 obj,func 一 bool 
in 测试 属性 是 否 存在 L 2 str,obj 一 bool 
二 判断 相等 L 2 any,any—bool 
!= 判断 不 等 L 2 any,any—bool 
=== 判断 恒 等 L 2 any,any 一 bool 
= 判断 非 恒 等 L 2 any,any—bool 
& 按 位 与 L 2 int,int 一 int 
A 按 位 异 或 L 2 int,int 一 int 
| 按 位 或 L 2 int,int—int 
8& 逻辑 与 L 2 any,any—any 
| 逻辑 或 L 2 any,any—any 
?: 条 件 运 算 符 R 3 bool,any,any—any 
= 变量 赋值 或 对 象 属性 赋值 R 2 lval,any—any 
+=、/=、 扩 、+=、 一 = 运算 且 赋 值 R 2 lval,any—any 
^s, | < 95s、 $3 
， 忽略 第 一 个 操作 数 ， L 2 any'any 一 any 


返回 第 二 个 操作 数 


GD lval 是 left-value 的 简写 ， 意 思 是 “ 左 值 ”。 


4.7.1 操作 数 的 个 数 


运算 人 符 可 以 根据 其 操作 数 的 个 数 进行 分 类 。JavaScript 中 的 大 多 数 运 算 
符 〈 比 如 “*>” 乘 法 运算 符 ) 是 一 个 二 元 运算 符 (binary operator) ， 将 两 
个 表达 式 合 并 成 一 个 稍 复 杂 的 表达 式 。 换 言 之 ， 它 们 的 操作 数 均 是 两 
个 。JavaScript 同 样 文 持 一 些 一 元 运算 符 (unary operator) ， 它 们 将 一 
个 表达 式 转 换 为 另 一 个 稍 复 灯 的 表达 式 。 表 达 式 -x 中 的 “-” 运 算 符 就 是 
一 个 一 元 运算 符 ， 是 将 操作 数 x 求 负 值 。 最 后 ，JavaScript 文 持 一 个 三 元 
运算 符 (ternary operator) ， 条 件 判 断 运算 符 “?:"， 它 将 三 个 表达 式 合 


并 克 下 条 过 起， 
4.7.2 ”操作 数 类 型 和 结果 类 型 


一 些 运算 从 可 以 作用 于 任何 数据 类 型 ,但 仍然 布 望 它 们 的 操作 数 古 指 
定 类 型 的 数据 ， 并 且 大 多 数 运 算 符 返回 (或 计算 出 ) 一 个 特定 类 型 的 
值 。 在 表 4-1 标 题 为 “类 型 ”的 列 中 列 出 了 运算 符 操 作 数 的 类 型 〈 荫 头 

前 ) 和 运算 结果 的 类 型 (箭头 后 ) 。 


JavaScript 运 算 符 通常 会 根据 需要 对 操作 数 进行 类 型 转换 (参照 3.8 

方 ) 。 乘 法 运算 符 “*" 和 希望 操作 数 为 数字 ， 但 表达 式 "3"*"5" 却 是 合法 
的 ， 因 为 JavaScript 会 将 操作 数 转换 为 数字 。 这 个 表达 式 的 值 是 数 子 
15， 而 不 是 字符 串 “15”。 之 前 也 所 到 过 ，JavaScript 中 的 所 有 值 不 是 真 
值 束 古 假 值 ， 因 此 对 于 那些 布 望 操作 数 是 布尔 类 型 的 操作 符 来 说 ， 它 
们 的 操作 数 可 以 是 任意 类 型 。 


有 一 些 运 算 符 对 操作 数 类 型 有 着 不 同 程度 的 依赖 。 最 明显 的 例子 是 加 
法 运算 伯 ,“+” 运 算 符 可 以 对 数 子 进行 加 法 运算 ， 也 可 以 对 字符 串 作 连 
接 。 同 样 ， 比 如 “< ?比较 运算 符 可 以 根据 操作 数 类 型 的 不 同 对 数字 进 
行 大 小 值 的 比较 ， 也 可 以 比较 字符 在 字母 表 中 的 次 序 先后 。 单 个 运算 
们 对 类 型 有 着 怎样 的 依赖 以 及 对 操作 数 进行 怎 


4.7.3 左 值 
你 可 能 会 注意 到 ， 表 4-1 中 的 赋值 运算 符 和 其 他 少数 运算 符 期 望 它们 的 


操作 数 是 lval 类 型 。 左 值 (lvalue) 是 一 个 古老 的 术语 ， 它 是 指 “ 表 达 式 
只 能 出 现在 赋值 运算 符 的 左 侧 ”。 在 JavaScript 中 ， 变 量 、 对 象 属性 和 数 


组 元 际 均 是 左 值 。ECMAScript 规 范 允 许 内 置 函 数 返 回 一 个 左 值 ， 但 目 
定义 的 函数 则 不 能 返回 左 值 。 


4.7.4 运算 符 的 副作用 


计算 一 个 简单 的 表达 式 (比如 2*3) 不 会 对 程序 的 运行 状态 造成 任何 影 
啊 ， 程 序 后 续 执 行 的 计算 也 不 会 受到 该 计算 的 影响 。 而 有 一 些 表 达 式 
则 具有 很 多 副作用 ， 前 后 的 表达 式 运算 会 相互 影响 。 峰 值 运算 人 符 是 最 
明显 的 一 个 例子 : 如 宁 给 一 个 变量 或 属性 赋值 ， 那 么 那些 使 用 这 个 要 
量 或 属性 的 表达 式 的 值 都 会 发 生 改 变 。“++” 和 “--” 谴 增 和 带 减 运算 从 与 
此 类 似 ， 因 为 它们 包含 隐 式 的 赋值 。delete 运 算 符 同样 有 副作用 : 删除 
一 个 属性 瓯 像 〈 但 不 完全 一 样 ) 给 这 个 属性 赋值 undefined 。 


其 他 的 JavaScript 运 算 符 都 没有 副作用 ， 但 函数 调用 表达 式 和 对 象 创建 
表达 式 有 些 特别 ， 在 函数 体 或 者 构造 画 效 内 部 运用 了 这 些 运算 符 并 产 
0 


4.7.5 ”运算 符 优 先 级 


表 4-1 中 所 示 的 运算 符 是 按照 优先 级 从 高 到 低 排 序 的 ， 每 个 水 平分 割 线 
内 的 一 组 运算 符 具有 相同 的 优 移 级 。 运 算 符 优 移 级 控制 着 运算 符 的 执 
行 顺序 。 优 先 级 高 的 运算 符 (表格 的 顶部 ) 的 执行 总 是 先 于 优先 级 低 
(表格 的 底部 ， 的 运算 符 。 


看 一 下 下 面 这 个 表达 式 : 


WwW=Xx+y*Z; 


乘法 运算 符 “*” 比 加 法 运算 符 “+” 具 有 更 高 的 优先 级 ， 所 以 乘法 先 执行 ， 
加 法 后 执行 。 然 后 ， 由 于 赋值 运算 符 “=” 具 有 最 低 的 优先 级 ， 因 此 赋值 
操作 是 在 右 侧 的 表达 式 计 算出 结果 后 进行 的 。 


运算 符 的 优先 级 可 以 通过 显 式 使 用 圆 括号 来 重 写 。 为 了 让 加 法 先 执 
行 ， 乘 法 后 执行 ， 可 以 这 样 写 : 


w=(X+y)*2; 


需要 注意 的 是 ， 属 性 访问 表达 式 和 调用 表达 式 的 优先 级 要 比 表 4-1 中 列 
出 的 所 有 运算 符 都 要 高 。 看 一 下 这 个 例子 : 


typeof my.functions[x](y) 


尽管 typeof 是 优先 级 最 高 的 运算 符 之 一 ， 但 typeof 也 是 在 两 次 属性 访问 
和 函数 调用 之 后 执行 的 。 


实际 上 ， 如 采 你 真 的 不 确定 你 所 使 用 的 运算 符 的 优先 级 ， 最 催 单 的 方 
法 丈 是 使 用 圆 括号 来 强行 指定 运算 次 序 。 有些 重 要 规则 需要 败 记 : 乘 
法 和 除法 的 优先 级 融 于 加 法 和 减法 ， 赋 值 运算 的 优先 级 非常 低 ， 通 般 
总 是 最 后 执行 的 。 

4.7.6 ”运算 符 的 结合 性 

在 表 4-1 中 标题 为 A 的 列 说 明了 运算 符 的 结合 性 。 世 指 从 左 至 右 结合 ，R 
日 从 右 至 左 结合 。 结 合 性 指定 了 在 多 个 具有 同样 优先 级 的 运算 符 表 达 


式 中 的 运算 顺序 。 从 左 至 右 是 指 运算 的 执行 是 按照 由 左 到 右 的 顺序 进 
行 。 例 如 ， 减 法 运算 从 具有 从 左 至 右 的 结合 性 ， 因 此 : 


w=xX-y-zZ; 


和 这 段 代 码 一 模 一 样 : 


w=( (x-y)-z); 


肥 过 来 讲 ， 下 面 这 个 表达 式 : 


X= 一 -y'/ 
wW=X=y=Z 


d=a?b:c?d:e?f:g; 


和 这 段 代 码 一 模 一 样 : 


Xx=~(-y) ;w=(x=(y=z));q= 


a?b: (c?d: (e?f:g)); 


因为 一 元 操作 符 、 赋 值 和 三 元 条 件 运算 符 都 具有 从 右 至 左 的 结合 性 。 
4.7.7 ”运算 顺序 


运算 符 的 优先 级 和 结合 性 规定 了 它们 在 复杂 的 表达 式 中 的 运算 顺序 ， 
但 并 没有 规定 子 表达 式 的 计算 过 程 中 的 运算 顺序 。JavaScript 总 是 严格 
按照 从 左 至 右 的 顺序 来 计算 表达 式 。 例 如 ， 在 表达 式 w=x+y*z 中 ， 将 首 
先 计 算 子 表达 式 w， 人 然后 计算 x、y 和 z， 然 后 ，y 的 值 和 z 的 值 相 乘 ， 再 
加 上 x 的 值 ， 最 后 将 其 赋值 给 表达 式 w 所 指 代 的 变量 或 属性 。 给 表达 式 
添加 圆 括 吕 将 会 改变 乘法 、 加 法 和 赋值 运算 的 天 系 ， 但 从 左 至 右 的 顺 
序 是 不 会 改变 的 。 


只 有 在 任何 一 个 表达 式 具有 副作用 而 影响 到 其 他 表达 式 的 时 候 ， 其 求 
值 顺序 才 会 和 看 上 去 有 所 不 同 。 如 果 表 达 式 x 中 的 一 个 变量 自 增 1， 这 
个 变量 在 表达 式 z 中 使 用 ， 那 么 实际 上 是 先 计 算出 了 x 的 值 再 计算 z 的 
值 ， 这 一 点 非常 重要 上 。 


4.8 ”算术 表达 式 

本 市 涵盖 了 那些 进行 算术 计算 的 运算 符 ， 以 及 对 探 作 数 的 算术 操作 。 
乘法 、 除 法 和 减法 运算 符 非 党 简单， 我 们 首先 讲解 它们 。 加 法 运算 符 
单独 占 一 下 ， 因 为 加 法 同样 可 以 做 字符 串 连 接 操作 ， 并 且 其 类 型 转换 
有 些 特殊 。 一 元 运算 符 和 位 运算 符 同 样 在 单独 的 两 下 中 会 讲 到 。 


基本 的 算术 运算 符 是 * (乘法 ) 、/ (除法 ) 、% ( 求 余 ) 、+ (加 法 ) 
和 - (减法 ) 。 我 们 会 在 随后 有 专门 一 万 讲述 “+ 运算 符 。 剩 下 的 4 个 运 
算 侍 非常 简单 ， 只 是 在 必要 的 时 候 将 操作 数 转换 为 数字 而 已 ， 然 后 求 
积 、 商 、 余 数 和 差 。 所 有 那些 无 法 转换 为 数字 的 操作 数 都 转换 为 NaN 
值 。 如 果 操 作 数 (或 者 转换 结果 ) 是 NaN 值 ， 算 术 运 算 的 结果 也 是 

NaN。 


运算 符 “/” 用 第 二 个 操作 数 来 除 第 一 个 操作 数 ， 如 果 你 使 用 过 那些 区 分 
整 型 和 浮 点 型 数字 的 编程 语言 ， 那 么 当 用 一 个 整数 除 以 另 一 个 整数 
时 ， 则 希望 得 到 的 结果 也 是 整数 。 但 在 JavaScript 中 ， 所 有 的 数字 都 是 
浮 点 型 的 ， 除 法 运算 的 结果 也 是 浮 点 型 ， 比 如 ，5/2 的 结果 是 2.5， 而 不 
是 2。 除 数 为 0 的 运算 结果 为 正 无 穷 大 或 负 无 穷 大 ， 而 0/0 的 结果 是 
NaN， 所 有 这 些 运算 均 不 会 报错 。 


运算 符 “%” 计 算 的 是 第 一 个 操作 数 对 第 二 个 操作 数 的 模拟。 换 句 话 
说 ， 就 是 第 一 个 操作 数 除 以 第 二 个 操作 数 的 余数 。 结 果 的 符号 和 第 一 
0 
是 -1 。 


求 余 运算 和 任 的 控 作 数 通 常 都 是 整数 ， 但 也 适用 于 浮 点 数 ， 比 如 ， 
6.5%2.1 结 果 是 0.2。 


4.8.1 “+” 运 算 符 
NE 


1+2//=>3 

"hello"+""+"there"//=>"hello there" 

V2 /= > "12" 

当 两 个 操作 数 都 是 数字 或 都 是 字符 串 的 时 候 ， 计 算 结 果 是 显而易见 


的 。 然 而 对 于 其 他 情况 来 说 ， 则 要 进行 一 些 必要 的 类 型 转换 ， 并 上 且 运 
算 符 的 行为 依赖 于 类 型 转换 的 结 有 末 。 加 号 的 转换 规则 优先 考虑 字符 串 


连接 ， 如 果 其 中 一 个 操作 数 是 字符 串 或 者 转换 为 字符 串 的 对 象 ， 另 外 

一 个 操作 数 将 会 转换 为 字符 串 ， 加 法 将 进行 字符 串 的 连接 操作 。 如 果 

0 (string-like) 的 ， 那 么 都 将 进行 算术 加 法 

J O 

从 技术 上 讲 ， 加 法 操作 符 的 行为 表现 为 : 

-如果 其 中 一 个 操作 数 是 对 象 ， 则 对 象 会 遵循 对 象 到 原始 值 的 转换 规则 
转换 为 原始 类 值 (参照 3.8.3 节 ) : 日 期 对 象 通过 toString0) 方 法 执行 转 

换 ， 其 他 对 象 则 通过 valueOfO 方 法 执行 转换 (如 果 valueOf0 方 法 返回 一 


个 原始 值 的 话 ) 。 由 于 多 数 对 象 都 不 具备 可 用 的 valueOf() 方 法 ， 因 此 
它们 会 通过 toString() 方 法 来 执行 转换 。 


-在 进行 了 对 象 到 原始 值 的 转换 后 ， 如 果 其 中 一 个 操作 数 是 字符 串 的 
话 ， 尺 一 个 操作 数 也 会 转换 为 字符 串 ， 然 后 进行 字符 串 连 搂 。 
， 两 个 操作 数 都 将 转换 为 数字 (或 者 NaN) ， 然 后 进行 加 法 操 


1+2//=>3: 加 法 


n10+n20//= > 01120 : 字符 串 连 接 


"1"+2//=>"12" :数字 转换 为 字符 串 后 进行 字符 串 连 接 


1+{}//=>>"1[object 0bject]": 对 象 转换 为 字符 串 后 进行 字符 串 连接 


true+true//=>>2: 布 尔 值 转换 为 数字 后 做 加 法 


2+nul1//=>2:null 转 换 为 9 后 做 加 法 


2+undefined//=> NaN:undefined 转 换 为 NaN 后 做 加 法 


最 后 ， 需 要 特别 注意 的 是 ， 当 加 号 运算 符 和 字符 串 和 数字 一 起 使 用 
时 ， 需 要 考虑 加 法 的 结合 性 的 对 运算 顺序 的 影响 。 也 就 是 说 ， 运 算 结 


果 是 依赖 于 运算 符 的 运算 顺序 的 ， 比 如 : 


1+2+"blind mice";//=>"3 blind mice" 


1+(2+"blind mice");//=>"12 blind mice" 


第 一 行 没有 圆 括 号 ,“+” 运 算 符 具有 从 左 至 右 的 结合 性 ， 因 此 两 个 数字 
首先 进行 加 法 计算 ， 计 算 结果 和 字符 哩 进行 连接 。 在 第 二 行 中 ， 圆 括 
号 改变 了 运算 顺序 : 数字 2 和 字符 串 连 接 ， 生 成 一 个 新 字符 串 ， 然 后 数 
字 1 和 这 个 新 字符 串 再 次 连接 ， 生 成 了 最 终结 果 。 

4.8.2 一 元 算术 运算 符 

一 元 运算 符 作 用 于 一 个 单独 的 操作 数 ， 并 产生 一 个 新 值 。 在 JavaScript 
中 ， 一 元 运算 符 具 有 很 高 的 优先 级 ， 而 且 都 是 右 结合 (right- 
associative) 。 本 节 将 讲述 一 元 算术 运算 符 (+、-、++ 和 --) ， 必 要 
时 ， 它 们 会 将 操作 数 转换 为 数字 。 需 要 注意 的 是 ，“+” 和 “-” 是 一 元 运算 
符 ， 也 是 二 元 运算 符 。 

下 面 介 绍 一 元 算术 运算 符 : 

= 加 做 每 ) 

一 元 加 法 运算 符 把 操作 数 转换 为 数字 (或 者 NaN) ， 并 返回 这 个 转换 
后 的 数字 。 如 果 操 作 数 本 身 就 是 数字 ， 则 直接 返回 这 个 数字 。 

一 元 减法 〈-) 

当 “-” 用 做 一 元 运算 符 时 ， 它 会 根据 需要 把 操作 数 转 换 为 数字 ， 然 后 改 
变 运算 结果 的 符号 。 

递增 (++) 

递增 “++” 运 算 符 对 其 操作 数 进 行 增 量 (加 一 ) 操作 ， 操 作 数 是 一 个 左 
值 (lvalue) (变量 、 数 组 元 素 或 对 象 属性 ) 。 运 算 符 将 操作 数 转 换 为 


数字 ， 然 后 给 数字 加 1， 并 将 加 1 后 的 数值 重新 赋值 给 变量 、 数 组 元 素 
或 者 对 象 属性 。 


递增 “++"? 运 算 符 的 返回 值 依赖 于 它 相 对 于 操作 数 的 位 置 。 当 运算 符 在 
操作 数 之 前 ， 称 为 “前 增 量 ” (pre-increment) 运算 符 ， 它 对 操作 数 进行 
增 量 计算 ， 并 返回 计算 后 的 值 。 当 运算 符 在 操作 数 之 后 ， 称 为 “后 增 
量 ” (post-increment) 运算 符 ， 它 对 操作 数 进行 增 量 计算 ， 但 返回 未 做 
增 量 计算 的 (unincremented) 值 。 思 考 一 下 如 下 两 行 代码 之 间 的 区 


泻 


var i=1, j=++i;//i 和 j 的 值 都 是 2 


var i=1,j=i++;//i 是 2，j 是 1 


需要 注意 的 是 ， 表 达 式 ++x 并 不 总 和 x=x+1 完 全 一 样 ，“++” 运 算 符 从 不 
进行 字符 串 连 接 操作 ， 它 总 是 会 将 操作 数 转换 为 数字 并 增 1。 如 果 x 是 
字符 串 “1”，++x 的 结果 就 是 数字 2， 而 x+1 是 字符 串 “11”。 


同样 需要 注意 的 是 ， 由 于 JavaScript 会 自动 进行 分 号 补 全 ， 因 此 不 能 在 
后 增 量 运 算 符 和 操作 数 之 间 插 入 换行 符 。 如 采 插 入 了 换行 符 ， 
JavaScript 将 会 把 操作 数 当 做 一 条 单独 的 语句 ， 并 在 其 之 前 补 上 一 个 分 
号 。 


不 管 是 表 增 量 还 是 后 增 量 ， 这 个 运算 符 通 和 用 在 for 循 环 中 ， 用 于 控制 
循环 内 的 计数 器 〈 见 由 


递减 〈--) 


累 减 “-” 运 算得 的 操作 数 也 是 一 个 左 值 。 它 把 操作 数 转换 为 数 子 ， 然 后 
减 1， 并 将 计算 后 的 值 重 新 赋值 给 操作 数 。 和 "++” 运 算 符 一 样 ， 递 减 “- 
-” 运 算 符 的 返回 值 依赖 于 它 相 对 操作 数 的 位 置 ， 当 递减 运算 符 在 操作 数 
之 前 ， 控 作 数 减 1 并 返回 减 1 之 后 的 值 。 当 递减 运算 符 在 操作 数 之 后 ， 
操作 数 减 1 并 返回 减 1 之 前 的 值 。 当 递减 运算 符 在 操作 符 的 右 侧 时 ， 运 
算 符 和 操作 数 之 间 不 能 有 换行 符 。 


4.8.3 ”位 运算 符 


位 运算 符 可 以 对 由 数字 表示 的 二 进 制 数据 进行 更 低层 级 的 按 位 运算 。 
尽管 它们 并 不 是 传统 的 数学 运算 ， 但 这 里 也 将 其 归 类 为 算术 运算 符 ， 


因为 它们 作用 于 数值 类 型 的 操作 数 并 返回 数字 。 这 些 运 算 符 在 
JavaScript 编 程 中 并 不 第 用， 如 果 你 对 十 进 制 整数 的 二 进 制 表 示 并 不 熟 
悉 的 话 ， 你 可 以 跳 过 本 节 内 容 。 这 里 的 4 个 运算 符 都 是 对 操作 数 的 每 个 
位 进行 布尔 运算 ， 这 里 将 操作 数 的 每 个 位 当做 布尔 值 (1=true， 
0=false) ， 其 他 三 个 位 运算 符 用 来 进行 左 移 位 和 右 移 位 。 


位 运算 符 要 求 它 的 操作 数 是 整数 ， 这 些 整数 表示 为 32 位 整 型 而 不 是 64 
位 浮 点 型 。 必 要 时 ， 位 运算 符 首 先 将 操作 数 转换 为 数字 ， 并 将 数字 强 
制 表示 为 32 位 整 型 ， 这 会 忽略 原 格式 中 的 小 数 部 分 和 任何 超过 32 位 的 
二 进 制 位 。 移 位 运算 符 要 求 右 操作 数 在 0~31 之 间 。 在 将 其 操作 数 转换 
为 无 符号 32 位 整数 后 ， 它 们 将 舍弃 第 5 位 之 后 的 二 进 制 位 ， 以 便 生成 一 
个 位 数 正确 的 数字 。 需 要 注意 的 是 ， 位 运算 符 会 将 NaN、Infinity 和 - 
Infinity 都 转换 为 0。 


按 位 与 ( 必 ) 


位 运算 符 “ 们 ?对 它 的 整 型 操作 数 逐 位 执行 布尔 与 (AND) 操作 。 只 有 
两 个 操作 数 中 相对 应 的 位 都 是 1， 结 果 中 的 这 一 位 才 是 1。 例 如 ， 
0x1234&0x00FF=0x0034 。 


按 位 或 (|) 


位 运算 符 “" 对 它 的 整 型 操作 数 逐 位 执行 布尔 或 (OR) 操作 。 如 果 其 中 
一 个 操作 数 相应 的 位 为 1， 或 者 两 个 操作 数 相应 位 都 是 1， 那 么 结果 中 
的 这 一 位 就 为 1。 例 如 : 0x1234|0x00FF=0x12FF 。 


按 位 异 或 〈A) 


位 运算 符 “ ?对 它 的 整 型 操作 数 逐 位 执行 布尔 异 或 (XOR) 操作 。 异 或 
是 指 第 一 个 操作 数 为 true 或 第 二 个 操作 数 为 tue， 但 两 者 不 能 同时 为 
true。 如 果 两 个 操作 数 中 只 有 一 个 相应 位 为 1 〈\ 不 能 同时 为 1) ， 和 那么 结 
果 中 的 这 一 位 就 是 1°。 例如 ，0xFF00^0xFOF0=0x0FF0。 


按 位 非 (~) 


运算 符 “~” 是 一 元 运算 符 ， 位 于 一 个 整 型 参数 之 前 ， 它 将 操作 数 的 所 
有 位 取 反 。 根 据 JavaScript 中 带 符 号 的 整数 的 表示 方法 ， 对 一 个 值 使 

用 “~” 运 算 符 相当 于 改变 它 的 符号 并 减 1。 例如 ，~0x0F=0xFFFFFFF0 
或 -16。 


左 移 (< <) 


将 第 一 个 操作 数 的 所 有 二 进 制 位 进行 左 移 操 作 ， 移 动 的 位 数 由 第 二 个 

操作 数 指定 ， 移 动 的 位 数 是 0~31 之 间 的 一 个 整数 。 例 如 ， 在 表达 式 a 

<< 1 中，a 的 第 一 位 变 成 了 第 二 位 ，a 的 第 二 位 变 成 了 它 的 第 三 位 ， 以 
此 类 推 。 痢 的 第 一 位 用 0 来 补充 ， 舍 弃 第 32 位 。 将 一 个 值 左 移 1 位 相当 

于 它 乘 以 2?， 左 移 两 位 相当 于 乘 以 4， 以 此 类 推 。 例 如 ,7< <2=28。 


带 符 号 石 移 (> >) 


运算 符 “> > ”将 第 一 个 操作 数 的 所 有 位 进行 右 移 操作 ， 移 动 的 位 数 由 
第 二 个 操作 数 指 定 ， 移 动 的 位 数 是 0~31 之 间 的 一 个 整数 。 右 边 溢出 的 
位 将 忽略 。 填 补 在 左边 的 位 由 原 操作 数 的 符号 决定 ， 以 便 保持 结果 的 
符号 与 原 操 作 数 一 致 。 如 果 第 一 个 操作 数 是 正 数 ， 移 位 后 用 0 填补 最 高 
位 ;如 果 第 一 个 操作 数 是 负 的 ， 移 位 后 就 用 1 填补 高 位 。 将 一 个 值 右 移 
1 位 ， 相 当 于 用 它 除 以 2 (忽略 余数 ) ， 右 移 两 位 ， 相 当 于 它 除 以 4， 以 
此 类 推 ， 例 如 ，7> >1=3，-7> >1=-4。 


无 符号 右 移 (> > > ) 


运算 符 “> > >” 和 运算 符 “> > ”一 样 ， 只 是 左边 的 高 位 总 是 填补 0， 与 
原来 的 操作 数 符 号 无 关 ， 例 如 ，-1> >4=-1， 但 是 -1> > > 
4=0xOFFFFFFF 。 


4.9 ”关系 表达 式 


本 市 介绍 JavaScript 的 关系 运算 从 。 关 系 运算 和 从 用 于 测试 两 个 值 之 间 的 
关系 比如“ 相等”， “小 于 ”， 或 “是 ... 的 属性 *) ， 根 据 关系 是 否 存在 而 
返回 true 或 false。 天 系 表达 式 总 是 返回 一 个 布尔 值 ， 通 常 在 ff、while 或 
者 for 语 句 (参照 第 5 章 ) 中 使 用 关系 表达 式 ， 用 以 控制 程序 的 执行 流 
程 。 授 下 来 的 几 市 将 会 讲述 相等 和 不 等 运算 符 、 比 较 运 算 符 和 
JavaScript 中 其 他 两 个 天 系 运 算 和 从 in 和 instanceof 。 


491 相等 和 不 等 运算 符 
“==” 和 “===” 运 算 符 用 于 比较 两 个 值 是 否 相等 ， 当 然 它 们 对 相等 的 定义 


不 尽 相 同 。 两 个 运算 符 人 允许 任 意 类 型 的 操作 数 ， 如 果 操 作 数 相 等 则 返 
回 true， 人 否则 返回 false。“===” 也 称 为 严格 相等 运算 符 (strict equality) 


(有 时 也 称 做 恒 等 运 算 符 (identity operator) ) ， 它 用 来 检测 两 个 操 人 
数 是 否 严 格 相 等 。“==” 运 算 符 称 做 相等 运算 符 (equality operator) ， 它 
用 来 检测 两 个 操作 数 是 否 相等 ， 这 里 < 相等 ?的 定义 非常 宽松 ， 可 以 允 
许 进 行 类 型 转换 。 

JavaScript 支 持 “=”、“==” 和 “===” 运 算 特 。 你 应 当 理 解 这 些 (赋值 、 相 


等 、 恒 等 ) 运算 符 之 间 的 区 别 ， 并 在 编码 过 程 中 小 心 使 用 。 尽 管 它们 
都 可 以 称 做 “相等 "， 但 为 了 减少 概念 混 消 ， 应 该 把 和 二 " 称 做 “得 到 或 网 


“1=» 和 “1==” 运 算 符 的 检测 规则 是 <==” 和 “===” 运 算 符 的 求 反 。 如 果 两 个 
值 通过 “==” 的 比较 结果 为 tue， 那 么 通过 “1=” 的 比较 结果 则 为 false。 如 
果 两 值 通 过 “===” 的 比较 结果 为 tue， 那 么 通过 “!==* 的 比较 结果 则 为 
false。4.10 节 会 提 到 ，“1! "运算 符 是 布尔 非 运算 符 。 我 们 只 要 记 

住 <!=* 称 做 “不 相等 ”*、“!==* 称 做 “不 严格 相等 "就 可 以 了 。 


在 3.7 已 经 提 到 ，JavaScript 对 象 的 比较 是 引用 的 比较 ， 而 不 是 值 的 比 
较 。 对 象 和 其 本 身 是 相等 的 ， 但 和 其 他 任何 对 象 都 不 相等 。 如 果 两 个 
不 同 的 对 象 具有 相同 数量 的 属性 ， 相 同 的 属性 名 和 值 ， 它 们 依然 是 不 
相等 的 。 相 应 位 置 的 数组 元 素 是 相等 的 两 个 数组 也 是 不 相等 的 。 


较 过 程 没有 任何 类 型 转换 ， 

.如 果 两 个 值 类 型 不 相同 ， 则 它们 不 相等 。 

.如 果 两 个 值 都 是 null 或 者 都 是 undefined， 则 它们 不 相等 。 

.如 果 两 个 值 都 是 布尔 值 tue 或 都 是 布尔 值 false， 则 它们 相等 。 

.如 果 其 中 一 个 值 是 NaN， 或 者 两 个 值 都 是 NaN， 则 它们 不 相等 。NaN 
和 其 他 任何 值 都 是 不 相等 的 ， 包 括 它 本 身 ! 通过 x!==x 来 判断 x 是 否 为 
NaN， 只 有 在 x 为 NaN 的 上 时候， 这 个 表达 式 的 值 才 为 true 。 


:如 采 两 个 值 为 数字 且 数 值 相等 ， 则 它们 相等 。 如 条 一 个 值 为 0， 必 一 个 
值 为 -0， 则 它们 同样 相等 。 


-如 果 两 个 值 为 字符 串 ， 且 所 含 的 对 应 位 上 的 16 位 数 《参照 3.2 节 ) 完全 
相等 ， 则 它们 相等 。 如 果 它 们 的 长 度 或 内 容 不 同 ， 则 它们 不 等 。 两 个 


字符 串 可 能 含义 完全 一 样 且 所 显示 出 的 字符 也 一 样 ， 但 具有 不 同 编码 
的 16 位 值 。JavaScript 并 不 对 Unicode 进 行 标准 化 的 转换 ， 因 此 像 这 样 的 
字符 串通 过 “===” 和 “==” 运 算 符 的 比较 结果 也 不 相等 。 第 三 部 分 的 
String.localeCompare() 提 供 了 男 外 一 种 比较 字符 串 的 方法 。 


.如果 两 个 引用 值 指 加 同一 个 对 象 、 数 组 或 男 数 ， 则 它们 是 相等 的 。 如 
人 则 它们 是 不 等 的 ， 尽 管 两 个 对 象 具有 完全 一 样 的 
Es O 


相等 运算 符 “==” 和 恒 等 运算 符 相 似 ， 但 相等 运算 符 的 比较 并 不 挛 格 。 
如 朱 两 个 操作 数 不 是 同一 类 型 ， 那 么 相等 运算 符 会 莹 斌 进行 一 些 类 型 
转换 ， 然 后 进行 比较 : 


如果 两 个 操作 数 的 类 型 相同 ， 则 和 上 文 所 述 的 严格 相等 的 比较 规则 一 
样 。 如 采 广 格 相等 ， 那 么 比较 结果 为 相等 。 如 采 它 们 不 严格 相等 ， 则 
比较 结果 为 不 相等 。 


.如 果 两 个 操作 数 类 型 不 同 , “==” 相 等 操作 符 也 可 能 会 认为 它们 相等 。 
仿 测 相等 将 会 遵守 如 下 规则 和 类 型 转换 : 

一 如 果 一 个 值 是 null， 另 一 个 是 undefined， 则 它们 相等 。 

一 如 果 一 个 值 是 数字 ， 另 一 个 是 字符 串 ， 爷 将 字符 串 转 换 为 数字 ， 然 
后 使 用 转换 后 的 值 进 行 比较 。 


一 如 果 其 中 一 个 值 是 te， 则 将 其 转换 为 1 再 进行 比较 。 如 果 其 中 一 个 
值 是 false， 则 将 其 转换 为 0 再 进行 比较 。 


一 如 果 一 个 值 是 对 象 ， 另 一 个 值 是 数字 或 字符 串 ， 则 使 用 3.8.3 市 所 提 
到 的 转换 规则 将 对 象 转换 为 原始 值 ， 然 后 再 进行 比较 。 对 和 象 通过 
toString() 方 法 或 者 valueOfO 方 法 转换 为 原始 值 。JavaScript 语 言 核心 的 
内 置 类 首先 尝试 使 用 valueOfO， 再 尝试 使 用 toString0， 除 了 日 期 类 ， 日 
期 类 只 使 用 toStringO 转 换 。 那 些 不 是 JavaScript 语 言 核心 中 的 对 象 则 通 
过 各 目的 实现 中 定义 的 方法 转换 为 原始 值 。 


一 其 他 不 同类 型 之 间 的 比较 均 不 相等 。 
这 里 有 一 个 判断 相等 的 小 例子 : 


"1"==true 


这 个 表达 式 的 结果 是 true， 这 表明 完全 不 同类 型 的 值 比较 结果 为 相等 。 
布尔 值 true 首 先 转换 为 数字 1， 然 后 再 执行 比较 。 接 下 来 ， 字 符 串 “1 也 
转换 为 了 数字 1， 因 为 两 个 数字 的 值 相等 ， 因 此 比较 结果 为 true。 
4.9.2 ”比较 运算 符 


和 来 检测 两 个 操作 数 的 大 小 关系 (数值 大 小 或 者 字母 表 的 
顺序 ) : 


A 
如 琳 第 一 个 操作 数 小 于 第 二 个 操作 数 ， 则 “< ”运算 符 的 计算 结 末 为 


true; 否则 为 false。 
于 人 
如 果 第 一 个 操作 数 大 于 第 二 个 操作 数 ， 则 “> ”运算 符 的 计算 结果 为 


true; 否则 为 false。 
由 于 (= 


如 果 第 一 个 操作 数 小 于 或 者 等 于 第 二 个 操作 数 ， 则 “<=” 运 算 符 的 计算 
结果 为 true; 否则 为 false。 


大 于 等 于 (> = 


如 果 第 一 个 操作 数 大 于 或 者 等 于 第 二 个 操作 数 ， 则 “> =” 运 算 和 从 的 计算 
结果 为 false; 否则 为 false。 


比较 操作 符 的 操作 数 可 能 是 任意 类 型 。 然 而 ， 只 有 数字 和 字符 串 才 能 
真正 执行 比较 操作 ， 因 此 那些 不 是 数字 和 字符 串 的 操作 数 都 将 进行 类 
型 转换 ， 类 型 转换 规则 如 下 : 


如果 操 作 数 为 对 象 ， 那 么 这 个 对 象 将 依照 3.8.3 世 结尾 处 所 描述 的 转换 
规则 转换 为 原始 值 : 如 果 valueOf0 返 回 一 个 原始 值 ， 那 么 直接 使 用 这 
个 原始 值 。 否 则 ， 使 用 toString0 的 转换 结果 进行 比较 操作 。 


在 对 象 转换 为 原始 值 之 后 ， 如 果 两 个 操作 数 都 是 字符 串 ， 那 么 将 依照 
字母 表 的 顺序 对 两 个 字符 串 进行 比较 ， 这 里 提 到 的 “字母 表 顺 序 ” 是 指 
组 成 这 个 字符 串 的 16 位 Unicode 字 符 的 索引 顺序 。 


.在 对 和 象 转换 为 原始 值 之 后 ， 如 果 至 少 有 一 个 操作 数 不 是 字符 串 ， 那 么 
两 个 操作 数 都 将 转换 为 数字 进行 数值 比较 。0 和 -0 是 相等 的 。Infinity 比 
其 他 任何 数字 都 大 (除了 Infinity 本 身 ) ，-Infinity 比 其 他 任何 数字 都 小 

(除了 它 自身 ) 。 如 果 其 中 一 个 操作 数 是 (或 转换 后 是 ) NaN， 那 么 
比较 操作 符 总 是 返回 false。 


需要 注意 的 是 ，JavaScript 字 符 串 是 一 个 由 16 位 整数 值 组 成 的 序列 ， 字 
符 串 的 比较 也 只 是 两 个 字符 串 中 的 字符 的 数值 比较 。 由 Unicode 定 义 的 
字符 编码 顺序 和 任何 特定 语言 或 者 本 地 语言 字符 集中 的 传统 字符 编码 
顺序 不 尽 相 同 。 注 意 ， 字 符 串 比较 是 区 分 大 小 写 的 ， 所 有 的 大 写 的 
ASCII 字 母 都 “小 于 ”小 写 的 ASCII 字 母 。 如 果 不 注意 这 条 不 起 眼 的 规则 
的 话 会 造成 一 些小 麻烦 。 比 如 ， 使 用 “< ”小 于 运算 符 比 

较 "Zoo" 和 "aardvark"， 结 果 为 true。 


参照 String.localCompare() 方 法 来 获取 更 多 字符 串 比 较 的 相关 信息 ， 
String.localCompare() 方 法 更 加 健壮 可 靠 ， 这 个 方法 参照 本 地 语言 的 字 
母 表 定 义 的 字符 次 序 。 对 于 那些 不 区 分 字母 大 小 写 的 比较 来 说 ， 则 需 
要 首先 将 字符 串 转 全 部 换 为 小 写字 母 或 者 大 写字 母 ， 通 过 
String.toLowerCase() 和 String.toUpperCase() 做 大 小 写 的 转换 。 


对 于 数字 和 字符 串 操 作 符 来 说 ， 加 号 运算 符 和 比较 运算 符 的 行为 都 有 
所 不 同 ， 前 考 更 侦 爱 字符 串 ， 如 采 它 的 其 中 一 个 操作 数 是 字符 吝 的 
话 ， 则 进行 字符 串 连 接 操 作 。 而 比较 运算 符 则 更 偏爱 数 子 ， 只 有 在 两 
个 操作 数 都 生字 符 串 的 时 候 ， 才 会 进行 字符 串 的 比较 : 


1+2// 加 法 .结果 是 3 


"4"+"2"// 字 符 串 连接 ， 结果 是 "12" 


"1"+2// 字 符 串 链接 ，2 转 换 为 "2"， 结 采 是 "12" 


11< 3// 数 字 的 比较 ， 结 果 为 false 


"11"<"3"// 字 符 串 比较 ， 结 果 为 true 


"11"< 3// 数 字 的 比较 ，"11" 转 换 为 11， 结 果 为 false 


"one"<3// 数 字 的 比较 ，"one" 转 换 为 NaN， 结 果 为 false 


最 后 ， 需 要 注意 的 是 ， “<=” (小 于 等 于 ) 和 “> =”(〈 大 于 等 于 ) 运算 
符 在 判断 相等 的 时 候 ， 并 不 依赖 于 相等 运算 符 和 广 格 相等 运算 符 的 比 
绞 规 则 。 相反 ， 小 于 等 于 运算 符 只 是 简单 的 “不 大 于 ， 大 于 等 于 运算 
符 也 只 是 “不 小 于 ?”。 只 有 一 个 例外 ， 那 就 是 当 其 一 个 操作 数 是 (或 者 
转换 后 是 ) NaN 的 时 候 ， 所 有 4 个 比较 运算 符 均 返回 false。 


4.9.3” ”in 运算 符 
in 运 算 和 从 希望 它 的 左 操 作 数 是 一 个 字符 串 或 可 以 转换 为 字 从 串 ， 项 望 它 


的 右 操作 数 是 一 个 对 象 。 如 果 右 侧 的 对 象 拥有 一 个 名 为 左 操作 数值 的 
属性 名 ， 那 么 表达 式 返回 true， 例 如 ; 


var point={x:1,y:1};// 定 义 一 个 对 象 


"x"in point//=>true: 对 象 有 一 个 名 为 "x" 的 属性 


"z"in point//=>false: 对 象 中 不 存在 名 为 "z" 的 属性 


"tostring"in point//=>true: 对 象 继承 了 toSstring( ) 方 法 


var data=[7,8,9];// 拥 有 三 个 元 素 的 数组 


"Oo"in data//=>>true: 数 组 包含 元 素 "0" 


1 in data//=>true: 数 字 转 换 为 字符 串 


3 in data//=>false: 没 有 索引 为 3 的 元 素 


4.9.4 ”instanceof 运 算 符 


instanceof 运 算 符 希望 左 操作 数 是 一 个 对 象 ， 右 操作 数 标 识 对 象 的 类 。 
如 琳 左 侧 的 对 象 是 右 侧 类 的 实例 ， 则 表达 式 返 回 true;， 否 则 返回 false 。 


第 9 章 将 会 讲 到 ，JavaScript 中 对 象 的 类 是 通过 初始 化 它们 的 构造 函数 来 
定义 的 。 这 样 的 话 ，instanceof 的 右 操作 数 应 当 是 一 个 函数 。 比 如 : 


var d=new Date();// 通 过 Date( ) 构 造 函 数 来 创建 一 个 新 对 象 


d instanceof Date;// 计 算 结 果 为 true，d 是 由 Date( ) 创 建 的 


d instanceof 0bject;// 计 算 结 果 为 true， 所 有 的 对 象 都 是 0bject 的 实例 


d instanceof Number;// 计 算 结 果 为 false，d 不 是 一 个 Number 对 象 


| 建 一 个 数组 


var a=[1,2,3];// 通 过 数组 直接 量 的 写法 仓 


a instanceof Array;// 计 算 结果 为 true，a 是 一 个 数组 


a instanceof 0bject;// 计 算 结 果 为 true， 所 有 的 数组 都 是 对 象 


a instanceof RegExp;// 计 算 结 果 为 false， 数 组 不 是 正则 表达 式 


需要 注意 的 是 ， 所 有 的 对 象 都 是 Object 的 实例 。 当 通过 instanceof 判 断 一 
个 对 象 是 否 是 一 个 类 的 实例 的 时 候 ， 这 个 判断 也 会 包含 对 “ 父 

类 ” (superclass) 的 检测 。 如 果 instanceof 的 左 操作 数 不 是 对 象 的 话 ， 
instanceof 返 回 false。 如 果 右 操作 数 不 是 函数 ， 则 抛 出 一 个 类 型 错误 异 
党 o 


为 了 理解 instanceof 运 算 符 是 如 何 工 作 的 ， 必 须 首 先 理解 “原型 

链 ” (prototype chain) 。 原 型 链 作为 JavaScript 的 继承 机 制 ， 将 在 6.2.2 节 
详细 讲述 。 为 了 计算 表达 式 o instanceof f，JavaScript 站 和 完 计算 
f.prototype， 然 后 在 原型 链 中 查找 o， 如 果 找 到 ， 那 么 o 是 f (或 者 {的 父 
类 ) 的 一 个 实例 ， 表 达 式 返回 true。 如 果 f.prototype 不 在 o 的 原型 链 中 的 
话 中 ， 那 么 o 就 不 是 { 的 实例 ，instanceof 返 回 false。 


4.10 逻辑 表达 式 
逻辑 运算 符 “ 尺 &&”、“ "和 “1” 是 对 操作 数 进 行 布尔 算术 运算 ， 经 常 和 关 


系 运算 和 一 起 配合 使 用 ， 逻 辑 运 算 符 将 多 个 关系 表达 式 组 合 起 来 组 成 
一 个 更 复杂 的 表达 式 。 这 些 运算 符 在 下 面 几 市 中 会 一 一 讲述 ， 为 了 更 


好 地 理解 它 们 ， 应 当 首 先 回 顾 一 下 3.3 市 提 到 的 “ 真 值 > 和 “ 假 值 ”的 概 


4.10.1 逻辑 与 (色色 ) 
“ 必 尺 ”运算 从 可 以 从 三 个 不 同 的 层次 进行 理解 。 最 人 简单 的 第 一 层 理 解 
是 ， 当 操作 数 都 是 布尔 值 的 时 候 , “多 们 ? 对 两 个 值 执 行 布 尔 与 

(AND) 操作 ， 只 有 在 第 一 个 操作 数 和 第 二 个 操作 数 都 是 true 的 时 候 ， 
它 才 返回 true。 如 果 其 中 一 个 操作 数 是 false， 它 返回 false。 


“& &.* 常 用 来 连接 两 个 关系 表达 式 : 


x==9&&y==9// 只 有 在 x 和 y 都 是 9 的 时 候 ， 才 返回 true 


关系 表达 式 的 运算 结果 总 是 为 true 或 false， 因 此 当 这 样 使 用 的 时 

候 , “多 区 ”运算 符 本 身 也 返回 true 或 false。 关 系 运算 符 的 优 和 级 比 “& 
要 高 ， 因 此 类 似 这 种 表达 式 可 以 放心 地 书写 ， 而 不 用 补充 
ES 


但 是 “此 区 "的 操作 数 并 不 一 定 是 布尔 值 ， 回 想 一 下 ， 有 些 值 可 以 当 

做 “ 真 值 ? 和 “ 假 值 ”( 参 照 3.3 节 ， 假 值 是 false、null、undefined、0、-0、 
NaN 和 ""， 所 有 其 他 的 值 包 括 所 有 对 象 都 是 真 值 )。 对 “&&&”* 的 第 二 层 
理解 是 , “人 此 区 ”可 以 对 真 值 和 假 值 进行 布尔 与 (AND) 操作 。 如 果 两 
个 操作 数 都 是 真 值 ， 那 么 返回 一 个 真 值 ; 否则 ， 至 少 一 个 操作 数 是 假 
值 的 话 ， 则 返回 一 个 假 值 。 在 JavaScript 中 任何 希望 使 用 布尔 值 的 地 
方 ， 表 达 式 和 语句 都 会 将 其 当做 真 值 或 假 值 来 对 待 ， 因 此 实际 上 “& 
&" 并 不 总 是 返回 true 和 false， 但 也 并 无 大 得 。 


需要 注意 的 是 ， 上 文 提 到 了 运算 符 返 回 一 个 “ 真 值 ” 或 者 “ 假 值 "， 但 并 没 
有 说 明 这 个 “ 真 值 ?或 者 “ 假 值 ?到 放生 什么 值 。 为 此 ， 我 们 深入 讨论 

对 “ 纹 &&* 的 第 三 层 (也 是 最 后 一 层 ) 理解 。 运 算 符 首 先 计 算 左 操作 数 
的 值 ， 即 首先 计算 “ 必 纹 * 左 侧 的 表达 式 。 如 果 计 算 结 琳 是 假 值 ， 那 么 
整个 表达 式 的 结 来 一 定 也 是 假 值 ， 因 上 此“ 多久” 这 时 们 单 地 返回 左 操作 
数 的 值 ， 而 并 不 会 对 右 操作 数 进行 计算 。 


有 反 过 来 讲 ， 如 末 左 操作 数 是 真 值 ， 那 么 整个 表达 式 的 结 琳 则 依赖 于 右 
操作 数 的 值 。 如 采 右 操作 数 是 真 值 ， 那 么 整个 表达 式 的 值 一 定 征 真 

值 ， 如 采 右 操作 数 是 假 值 ， 那 么 整个 表达 陈 的 值 一 定 征 假 值 。 因 此 ， 

当 志 操作 数 是 真 值 时 , “多 多" 运算 符 将 计算 右 操 作 数 的 值 并 将 其 返回 
作为 整个 表达 式 的 计算 结 


Var o={Xx:1}; 


Var p=null; 


0 性 以 0.X//=>1:0 是 真 值 ， 因 此 返回 值 为 0 .x 


p 人 区 p .x//=>null:p 是 假 值 ， 因 此 将 其 返 下 


不 去 计算 p .x 


网 


这 对 于 理解 “化 区 ”可 能 不 会 去 计算 右 操作 数 的 情况 至 天 重要 ， 在 上 壕 
示例 代码 中 ， 变 量 p 的 值 是 null， 而 如 果 计 算 表 达 式 p.x 的 话 则 会 抛 出 一 
个 类 型 错误 异常 。 但 是 示例 代码 使 用 了 “人 区 ”的 一 种 符合 语言 习惯 的 
全。 因此 只 有 在 p 为 真 值 (不 能 是 null 或 者 undefined) 的 情况 下 才 会 
计算 p.x。 


“&z&z” 的 行为 有 时 称 做 “短路 ” (short circuiting) ， 我 们 也 会 经 常 看 到 很 
多 代码 利用 了 这 一 特性 来 有 条 件 地 执行 代码 。 例 如 ， 下 面 两 行 


JavaScript 代 码 是 完全 等 价 的 : 


if(a==b)stop();// 只 有 在 a==b 的 时 候 才 调用 stop() 


(a==b) 久 &stop();// 同 上 


一 般 来 讲 ， 当 “&&” 右 侧 的 表达 式 具 有 副作用 的 时 候 (赋值 、 递 增 、 
递减 和 函数 调用 表达 式 ) 要 格外 小 心 。 因 为 这 些 带 有 副作用 的 表达 式 
的 执行 依赖 于 左 操 作 数 的 计算 结果 。 


尽管 < 多 区 ”可 以 按照 第 二 层 和 第 三 层 的 理解 进行 一 些 复杂 表达 式 运 
算 ， 但 大 多 数 情 况 下 , “人 区 ?” 仅 用 来 对 真 值 和 假 值 做 布尔 计算 。 


4.10.2 ”逻辑 或 (||) 


?运算 符 对 两 个 操作 数 做 布尔 或 (OR) 运算 。 如 果 其 中 一 个 或 者 两 个 
0 它 返 回 一 个 真 值 。 如 末 两 个 操作 数 部 是 假 值 ， 它 返回 
| 如 各 


尽管 “" 运 算 符 大 多 数 情况 下 只 是 做 简单 布尔 或 (OR) 和 运算， 和“& 
久 ” 一 样 ， 它 也 具有 一 些 更 复杂 的 行为 。 它 会 站 先 计算 第 一 个 操作 数 的 
值 ， 也 整 古 说 会 首先 计算 左 侧 的 表达 式 。 如 琳 计 算 结 来 为 真 值 ， 那 么 
返回 这 个 真 值 。 否 则 ， 再 计算 第 二 个 操作 数 的 值 ， 即 计算 右 侧 的 表达 
式 ， 并 返回 这 个 表达 式 的 计算 结 末 。 


和 “ 必 必 ”运算 符 一 样 ， 同 样 应 当 避 免 右 操作 数 包 含 一 些 具有 副作用 的 
表达 式 ， 除 非 你 目地 明确 地 在 右 侧 使 用 市 副作用 的 表达 式 ， 而 有 可 能 
不 会 计算 右 侧 的 表达 式 。 


这 个 运算 符 最 常用 的 方式 是 用 来 从 一 组 备 选 表 达 式 中 选 出 第 一 个 真 什 
RT 


// 如 果 max_width 已 经 定义 了 ， 直 接 使 用 它 ， 否 则 在 preferences 对 象 中 查找 max_width 


// 如 果 没 有 定义 它 ， 则 使 用 一 个 写 死 的 常量 


Var max=max_width||preferences.max_width||500; 


这 种 惯用 法 通常 用 在 函数 体内 ， 用 来 给 参数 提供 默认 值 : 


// 将 o 的 成 员 属性 


记 业 


复制 到 p， 并 


入 | 
| 
my 


function copy(o,p)t{ 


p=p| | 分 ;// 如 果 向 参数 p 没 有 传 入 任何 对 象 ， 则 使 用 


全 


新 创建 的 对 象 


// 画 数 体内 的 主 逻 辑 


} 


410.3 次 辑 非 (1) 


“1»” 运 算 符 是 一 元 运算 从。 它 放 置 在 一 个 单独 的 操作 数 之 前 。 它 的 目的 
是 将 探 作 数 的 布尔 值 进行 求 反 。 例 如 ， 如 果 x 是 真 值 ， 则 !x 返 回 false; 
如 果 x 是 假 值 ， 则 !x 返 回 true 。 


和 "多 芭 "与 “中 运算 人 符 不 同 ，“ 运 算 符 首先 将 其 操作 数 转换 为 布尔 值 
(参照 第 3 章 讲 述 的 转换 规则 ) ， 然 后 再 对 布尔 值 求 反 。 也 束 是 说 “! "总 
古 返 回 true 或 者 false， 并 且 ， 可 以 通过 使 用 两 次 逻辑 非 运 算 来 得 到 一 个 
值 的 等 价 布 尔 值 ，!!x (参照 3.8.2 节 ) 。 


作为 一 个 一 元 运算 符 ,，“!” 具 有 很 高 的 优先 级 ， 并 且 和 操作 数 紧密 绑 定 
在 一 起 。 如 果 你 和 希望 对 类 似 p 人 此 区 qd 的 表达 式 做 求 反 操 作 ， 则 需要 使 用 
圆 括号 : !(p 纹 以 q)。 布尔 计算 的 更 多 原理 性 知识 不 必要 做 过 多 的 解 
释 ， 这 里 仅 用 JavaScript 代 码 做 人 简单 说 明 : 


// 对 于 p 和 q 取 任意 值 ， 这 两 个 等 式 都 永远 成 立 


!(p&&q)===!p||!q 


! (p11q)===!p&& 六 1!q 


4.11 赋值 表达 式 
JavaScript 使 用 “=” 运 算 符 来 给 变量 或 者 属性 赋值 。 例 如 : 


i=0// 将 变量 i 设置 为 6 


0 .X=1// 将 对 象 o 的 属性 x 设置 为 1 


“=” 运 算 符 希 望 它 的 左 操作 数 古 一 个 左 值 ， 一 个 变量 或 者 对 象 属性 (或 
数组 元 素 ) 。 它 的 右 操 作 数 可 以 古 任意 类 型 的 任意 值 。 贼 值 表达 式 的 
值 束 古 右 操作 数 的 值 。 赋 值 表达 式 的 副作用 是 ， 石 操作 数 的 值 赋值 给 


左 侧 的 变量 或 对 象 属性 ， 这 样 的 话 ， 后 续 对 这 个 变量 和 对 和 象 属性 的 引 
用 都 将 得 到 这 个 值 。 


尽管 赋值 表达 式 通 党 非常 简单 ， 但 有 时 仍 会 看 到 一 些 复杂 表达 式 包含 
， 殉 像 这 样 : 


(a=b)==0 


如 果 这 样 做 的 话 ， 应 当 清 楚 地 知道 “=” 和 “==” 运 算 符 之 间 的 区 别 ! 需要 
注意 的 是 , “=” 具 有 非常 低 的 优 移 级 ， 通 党 在 一 个 较 长 的 表达 式 中 用 到 
人 
予 ° 


赋值 操作 符 的 结合 性 是 从 右 至 左 ， 也 束 是 说 ， 如 果 一 个 表达 式 中 出 现 


了 多 个 赋值 运算 符 ， 运 算 顺 序 是 从 右 到 左 。 因 此 ， 可 以 通过 如 下 的 方 
式 来 对 多 个 变量 赋值 : 


i=j=k=0;// 把 三 个 变量 初始 化 为 6 


市 操作 的 赋值 运算 


除了 常规 的 赋值 运算 “=” 之 外 ，JavaScript 还 支持 许多 其 他 的 赋值 运算 
符 ， 这 些 运算 符 将 赋值 运算 竺 和 其 他 运算 符 连 搂 起 来 ， 提 供 一 种 更 为 
快捷 的 运算 方式 。 例 如 ， 运 算 符 “+=? 执 行 的 是 加 法 运算 和 赋值 操作 ， 
下 面 的 表达 式 : 


total+=sales_tax 


和 接 下 来 的 表达 式 是 等 价 的 : 


total=total+sales_ tax 


运算 符 “+=” 可 以 作用 于 数字 或 字符 串 ， 如 果 其 操作 数 是 数字 ， 它 将 执 
行 加 法 运算 和 赋值 操作 ， 如 果 操 作 数 是 字符 串 ， 它 就 执行 字符 串 连 接 


操作 和 赋值 操作 。 


这 类 运算 符 还 包括 “=”、“#=”、 “区 = 等 。 表 4-2 列 出 了 这 一 类 的 所 有 运 


算 符 。 


表 4-2: 赋值 运算 符 


运算 符 


示例 
a+=b 
a-=b 
a*=b 
a/=b 
a%=b 
a<<=b 
a>>=b 
a>>>=b 
a&=b 
a|=b 


a^=b 


在 大 多 数 情 况 下 ， 表 达 式 为 : 


等 价 于 


a=a+b 
a=a-b 
a=a*b 
a=a/b 
a=a%b 
a=ax<<b 
a=a>>b 
a=a>>>b 
a=a&b 
a=alb 


a=a^b 


a op=b 


这 里 op 代表 一 个 运算 符 ， 这 个 表达 式 和 下 面 的 表达 式 等 价 : 


a=a op b 


在 第 一 行 中 ， 表 达 式 a 计算 了 一 次 ， 在 第 二 行 中 ， 表 达 式 a 计算 了 两 
次 。 只 有 在 a 包含 具有 副作用 的 表达 式 《比如 函数 调用 和 赋值 操作 ) 的 
时 候 ， 两 者 才 不 等 价 。 比 如 ， 下 面 两 个 表达 式 束 不 等 价 : 


data[i++]*=2; 


data[i++]=data[i++]*2; 


4 了” 本 去 计 甩 
和 其 他 很 多 解释 性 语言 一 样 ，JavaScript 同 样 可 以 解释 运行 由 JavaScript 


源 代码 组 成 的 字符 串 ， 并 产生 一 个 值 。JavaScript 通 过 全 局 函数 eval(0) 来 
完成 这 个 工作 : 


eval("3+2")//=>5 


动态 判断 源 代码 中 的 子 符 串 是 一 种 强大 的 语言 特性 ， 几 乎 没有 必要 在 
实际 中 应 用 。 如 果 你 使 用 了 eval0， 你 应 当 仔细 考虑 是 否 真 的 需要 使 用 
人 


下 面 讲解 eval0 的 基础 用 法 ， 并 且 介 绍 广 格 使 用 它 的 两 种 方法 ， 从 代码 
优化 的 角度 讲 ， 这 两 种 方法 对 于 原 有 代码 造成 的 影响 是 最 小 的 。 


eval0 是 一 个 函数 还 是 一 个 运算 符 


eval0) 是 一 个 函数 ， 但 由 于 它 已 经 被 当成 运算 符 来 对 待 了 ， 因 此 将 它 放 
在 本 章 玉 讲述 。JavaScript 语 言 的 早期 版 本 定义 了 eval0 函 数 ， 从 那 时 
起 ， 该 语言 的 设计 者 和 解释 絮 的 作者 对 其 实施 了 更 多 限制 ， 使 其 看 起 
来 更 像 运算 符 。 现 代 JavaScript 解 释 右 进行 了 大 量 的 代码 分 析 和 优化 。 
而 eval0 的 问题 在 于 ， 用 于 动态 执行 的 代码 通常 来 讲 是 不 能 分 析 。 一 般 
来 讲 ， 如 果 一 个 函 数 调用 了 eval0， 那 么 解释 堪 将 无 法 对 这 个 函数 做 进 
了 。 而 将 eval0 定 义 为 函数 的 另 一 个 问题 是 ， 它 可 以 被 赋予 其 他 
名字 : 


Var f=eval,; 


Var g=f; 


如 果 人 允许 这 种 情况 的 话 ， 那 么 解释 器 将 无 法 放心 地 优化 任何 调用 g0 的 

函数 。 而 当 eval 是 一 个 运算 符 (并 作为 一 个 保留 字 ) 的 时 候 ， 这 种 问题 
就 可 以 避免 掉 。 接 下 来 的 4.12.2 节 和 4.12.3 节 将 会 介绍 如 何 对 eval0 实 施 
更 多 的 限制 ， 以 便 让 它 的 行为 更 接近 运算 符 。 


4.12.1 eval() 


evalO 只 有 一 个 参数 。 如 果 传 入 的 参数 不 是 字符 串 ， 它 直接 返回 这 个 参 
数 。 如 果 参 数 是 字符 串 ， 它 会 把 字符 串 当 成 JavaScript 代 人 码 进 行 编译 

(parse) 引 -， 如 果 编 译 失败 则 抛 出 一 个 语法 错误 (SyntaxError) 异 
常 。 如 采编 译 成功 ， 则 开始 执行 这 段 代 码 ， 并 返回 字符 串 中 的 最 后 
个 表达 式 或 语句 的 值 ， 如 果 最 后 一 个 表达 式 或 语句 没有 值 ， 则 最 终 返 
nn 。 如果 字 符 串 抛 出 一 个 异常 ， 这 个 异常 将 把 该 调用 传递 给 
eval(O 2-。° 


天 于 eval0) 最 重要 的 是 ， 它 使 用 了 调用 它 的 变量 作用 域 环境 。 也 束 古 
说 ， 它 得 找 变量 的 值 和 定义 新 变量 和 函数 的 操作 和 局 部 作用 域 中 的 代 
码 完 全 一 样 。 如 果 一 个 玉 数 定义 了 一 个 局 部 变量 x， 然 后 调用 
eval("x")， 它 会 返回 局 部 变量 的 值 。 如 果 它 调用 eval("x=1")， 它 会 改变 
局 部 变量 的 值 。 如 果 函 数 调 用 了 eval("var y=3;")， 它 声明 一 个 新 的 局 部 
变量 y。 同 样 地 ， 一 个 范 数 可 以 通过 如 下 代码 声明 一 个 局 部 男 数 : 


eval("function f(){return x+1;}"); 
如 果 在 最 顶层 代码 中 调用 eval()， 当 然 ， 它 会 作用 于 全 局 变量 和 全 局 函 
Ro 


需要 注意 的 是 ， 传 递 给 eval0 的 字符 串 必 须 在 语法 上 讲 的 通 一 一 不 能 通 
过 eval0 往 函数 中 任意 粘贴 代码 片段 ， 比 如 ，eval("return;") 是 没有 意义 
的 ， 因 为 return 只 有 在 函数 中 才 起 作用 ， 并 且 事 实 上 ，eval 的 字符 串 执 
行 时 鸭 上 下 文 环境 和 调用 函 数 的 上 下 文 环境 是 一 样 的 ， 这 不 能 使 其 作 
为 函数 的 一 部 分 来 运行 邮 。 如 果 字 符 串 作为 一 个 单独 的 脚本 是 有 语义 
的 (就 像 诸如 x=0 的 短 代码 ) ， 那 么 将 其 传递 给 eval0 作 参数 是 完全 没 
有 问题 的 ， 否 则 ，eval0 将 抛 出 语法 错误 异常 I 小 。 


4.12.2 ”全 局 eval0 


eval() 具 有 更 改 局 部 变量 的 能 力 ， 这 对 于 JavaScript 优 化 絮 来 说 是 一 个 很 
大 的 问题 。 然 而 作为 一 种 权宜 之 计 ，JavaScript 解 释 器 针对 那些 调用 了 
eval0 的 画 数 所 做 的 优化 并 不 多 。 但 当 脚本 定义 了 eval0 的 一 个 别名 ， 且 
用 另 一 个 名 称 调 用 它 ，JavaScript 解 释 需 又 会 如 何 工 作 呢 ? 为 了 让 
JavaScript 解 释 器 的 实现 更 加 简化 ，ECMAScript 3 标准 规定 了 任何 解释 
右 都 不 允许 对 eval0 赋 予 别名 。 如 果 eval0 男 数 通过 别名 调用 的 话 ， 则 会 
抛 出 一 个 EvalError 异 常 。 


实际 上 ， 大 多 数 的 实现 并 不 是 这 么 做 的 。 当 通过 别名 调用 时 ，eval0 会 
将 其 字符 串 当 成 顶层 的 全 局 代码 来 执行 。 执 行 的 代码 可 能 会 定义 新 的 
全 局 变量 和 全 局 函数 ， 或 者 给 全 局 变量 赋值 ， 但 却 不 能 使 用 或 修改 主 
调 函 数 中 的 局 部 变量 ， 因 此 ， 这 不 会 影响 到 函数 内 的 代码 优化 。 


ECMAScript 5 是 反对 使 用 EvalError 的 ， 并 且 规 范 了 eval0 的 行为 “直接 
的 evalj”， 当 直接 使 用 非 限 定 的 "eval" 名 称 (eval 看 起 来 像 是 一 个 保留 
字 ) 来 调用 eval0 函 数 时 ， 通 常 称 为 “直接 eval”(direct eval) 。 和 直接 调 
用 eval0 时 ， 它 总 是 在 调用 它 的 上 下 文 作用 域内 执行 。 其 他 的 间接 调用 
则 使 用 全 局 对 象 作为 其 上 下 文 作用 域 ， 并 且 无 法 读 、 写 、 定 义 局 部 变 
量 和 函数 。 下 面 有 一 段 示例 代码 ; 


var geval=eval;// 使 用 别名 调用 eval 将 是 全 局 eval 


= 二 月 


var x="global",y="global";// 两 个 全 局 变 划 


function f(){// 画 数 内 执行 的 是 局 部 eval 


var x="local";// 定 义 局 部 变量 


eval("x+='changed';");// 直 接 eval 更 改 了 局 部 变量 的 值 


return x;// 返 回 更 改 后 的 局 部 变量 


加 | 


} 


function g(){// 这 个 函数 内 执行 了 全 局 eval 


var y="local";// 定 义 局 部 变量 


geval("y+='changed';");// 间 接 调 用 改变 了 全 局 变量 的 值 


return y;// 返 回 未 更 改 的 局 部 变量 


加 


+ 


console.1og(f(),x);// 更 改 了 局 部 变量 : 输出 "local changed global": 


console.10g(g(),y);// 更 改 了 全 局 变量 : 输出 "local globalchanged": 


我 们 注意 到 ， 全 局 eval 的 这 些 行为 不 仅仅 是 出 于 代码 优化 器 的 需要 而 做 
出 的 一 种 折 中 方案 ， 它 实际 上 是 一 种 非常 有 用 的 特性 ， 它 允许 我 们 执 
行 那 些 对 上 下 文 没 有 任何 依赖 的 全 局 脚本 代码 段 。 我 们 在 本 节 开 始 处 
也 提 到 ， 真 正 需 要 eval 来 执行 代码 段 的 场景 并 不 多 见 。 但 当 你 真 的 意识 
到 它 的 必要 性 时 ， 你 更 可 能 会 使 用 全 局 eval 而 不 是 局 部 eval 。 


IE 9 之 前 的 早期 版 本 正和 其 他 浏 贤 名 有 所 不 同 ， 当 通过 别名 调用 eval(0) 
时 并 不 是 全 局 eval0 〈 它 也 不 会 抛 出 一 个 EvalError 有 异常 ， 仅 仅 将 其 当做 
局 部 eval 来 调用 ) 。 但 正 的确 定义 了 一 个 名 叫 execScript0 的 全 局 函数 来 
人 (但 和 eval0 稍 有 不 同 ，execScript0 总 是 会 返回 
null) 。 


4.12.3 ”严格 eval() 


ECMAScript 5 严格 模式 (参照 5.7.3 节 ) 对 eval0 函 数 的 行为 施加 了 更 多 
的 限制 ， 其 至 对 标识 符 eval 的 使 用 也 施加 了 限制 。 当 在 严格 模式 下 调用 
eval() 时 ， 或 者 eval(0) 执 行 的 代码 段 以 "use strict" 指 令 开 始 ， 这 里 的 eval() 
是 私有 上 下 文 环境 中 的 局 部 eval。 也 就 是 说 ， 在 严格 模式 下 ，eval 执 行 
的 代码 段 可 以 查询 或 更 改 局 部 变量 ， 但 不 能 在 局 部 作用 域 中 定义 新 的 


此 外 ， 严 格 模式 将 "eval" 列 为 保留 字 ， 这 让 eval() 更 像 一 个 运算 和 从。 不 能 
用 一 个 别名 履 盖 eval0 玉 数 。 并 且 变 量 名 、 玉 数 名 、 辑 数 参 数 或 者 异常 
捕获 的 参数 都 不 能 取 名 为 "eval"。 

13 上 其 他 运 拭 符 

JavaScript 支 持 很 多 其 他 各 种 各 样 的 运算 人 符 ， 后 续 几 节 详 细 讨 论 它 们 : 
4.13.1 ”条件 运算 符 (?:) 


条 件 运 算 符 是 JavaScript 中 唯一 的 一 个 三 元 运算 符 (三 个 操作 数 ) ， 有 
时 直接 称 做 “三 元 运算 符 ”。 通 单 这 个 运算 符 写 成 *?:”， 当 然 在 代码 中 往 
往 不 会 这 么 简写 ， 因 为 这 个 运算 符 拥 有 三 个 操作 数 ， 第 一 个 操作 效 
和 第 二 个 操作 数 在 “?” 和 “:” 之 间 ， 第 三 个 操作 数 在 “:” 之 后 ， 

| 如 : 


X> 0?X: -x// 求 x 的 绝对 值 


条 件 运算 符 的 操作 数 可 以 是 任意 类 型 。 第 一 个 操作 数 当成 布尔 值 ， 如 

果 它 古 真 值 ， 那 么 将 计算 第 二 个 操作 数 ， 并 返回 其 计算 结果 。 否 则 ， 

如 果 第 一 个 操作 数 是 假 值 ， 那 么 将 计算 第 三 个 操作 数 ， 并 返回 其 计算 

人 。 第 二 个 和 第 三 个 操作 数 总 是 会 计算 其 中 之 一 ， 不 可 能 两 者 同时 
‘a 


其 实 使 用 if 滞 句 也 会 带 来 同样 的 效果 (参照 5.4.1 节 ) ，“?:* 运 算 符 只 是 
提供 了 一 种 简写 形式 。 这 里 是 一 个 人:* 的 典型 应 用 场景 ， 判 断 一 个 变量 


是 否 有 定义 〈 并 拥有 一 个 有 意义 的 真 值 色 ) ， 如 果 有 定义 则 使 用 它 ， 
如 琳 无 定义 则 使 用 一 个 默认 值 : 


greeting="hello"+(username?username:"there"); 
这 和 下 面 使 用 话语 句 的 代码 是 等 价 的， 但 显然 上 面 的 代码 更 加 人 稍 污 : 


greeting="he11o"; 
if(username ) 
greeting+=username 
else 


greeting+="there"; 


4.13.2 ”typeof 运 算 和 从 


typeof 是 一 元 运算 符 ， 放 在 其 单个 操作 数 的 前 面 ， 操 作 数 可 以 是 任意 类 
型 。 返 回 值 为 表示 操作 数 类 型 的 一 个 字符 串 。 表 4-3 列 出 了 任意 值 在 
typeof 运 算 后 的 返回 值 ; 


表 4-3; 任意 值 在 typeof 运 算 后 的 返回 值 


X typeof x 

undefined "undefined" 

Null "Object" 

true 或 false "boolean'" 

任意 数字 或 NaN "number" 

任意 字符 串 "string" 

任意 函数 "function' 

任意 内 置 对 象 ( 非 函数 ) "object" 

任意 宿主 对 象 由 编译 器 各 自 实现 的 字符 串 ， 但 不 是 "undefined"、 


"boolean"、"number" 或 "string" 


typeof 最 第 用 的 用 法 是 写 在 表达 式 中 ， 束 像 这 样 : 
(typeof value=="string")?"'"+value+t+"'":value 


typeof 运 算 从 同样 在 switch 语 句 ( 见 5.4.3 节 ) 中 非常 有 用 ， 需要 注意 的 
是 ， typeof 运 算 符 可 以 市 上 图 插 号 ， 这 计 typeof 看 起 来 像 一 个 函数 名 ， 
而 不 是 一 个 运算 从 关键 字 : 


typeof (i) 


我 们 注意 到 ， 当 操作 数 是 null 的 时 候 ，typeof 将 返回 "object"。 如 果 想 将 
nul 和 对 象 区 分 开 ， 则 必须 针对 等 殊 值 显 式 检测 。 对 于 宿主 对 象 来 说 ， 


typeof 有 可 能 并 不 返回 "object"， 而 返回 字符 串 。 但 实际 上 客户 端 
JavaScript 中 的 大 多 数 答 主 对 象 都 是 "object" 类 型 。 


由 于 所 有 对 和 象 和 数组 的 typeof 运 算 结 果 是 "object" 而 不 是 "function"， 
此 它 对 于 区 分 对 象 和 其 他 原始 值 来 说 是 很 有 帮助 的 。 如 果 想 区 分 对 象 
的 类 ， 则 需要 使 用 其 他 的 手段 ， 比 如 使 用 instanceof 运 算 符 (参照 4.9.4 
他) 人 (参照 6.8.2 节 ) 以 及 constructor 属 性 (参照 6.8.1 节 和 
89.2.2 节 


尽管 JavaScript 中 的 函数 是 对 象 的 一 种 ， 但 typeof 运 算 从 还 是 将 钞 数 特殊 
对 等， 对 函数 做 typeof 运 算 有 着 特殊 的 返回 值 。 在 JavaScript 中 ， 函 数 
和 “可 执行 的 对 象 ” (callable object) 有 着 微妙 的 区 别 。 所 有 的 画 数 都 是 
可 执行 的 《callable) ， 但 是 对 象 也 有 可 能 是 可 执行 的 ， 可 以 像 调用 画 
数 一 样 调用 它 ， 但 它 并 不 是 一 个 真正 的 函数 。 根 据 ECMAScript 3 规 
范 ， 对 于 所 有 内 置 可 执行 对 象 ，typeof 运 算 符 一 律 返回 "function"。 
ECMAScript 5 规范 则 扩充 至 所 有 可 执行 对 象 ， 包 括 内 置 对 象 native 
object) 和 宿主 对 象 (host object) ， 所 有 可 执行 对 象 进行 typeof 运 算 都 
将 返回 "function"。 大 多 数 浏 览 絮 厂商 也 将 JavaScript 的 原生 函数 对 象 

(native function object) 当成 它们 的 宿主 对 象 的 方法 来 使 用 。 但 微软 却 
一 直 将 非 原生 可 执行 对 象 (non-native callable object) 当成 其 客户 端的 
方法 来 使 用 ， 在 IE 9 之 前 的 版 本 中 ， 非 原生 可 执行 对 象 的 typeof 运 算 将 
返回 "object"， 尺 管 它 们 的 行为 和 函数 非常 相似 。 而 在 下 9 中 ， 这 些 客 
户 端 方法 是 真正 的 内 置 函 数 对 象 (native function object) 。 要 了 解 真 正 
的 函数 和 可 执行 对 象 之 间 的 详细 差别 请 参照 8.7.7 节 。 


4.13.3 ”delete 运 算 符 
delete 是 一 元 操作 符 ， 它 用 来 删除 对 象 属性 或 者 数组 元 素 中 -。 就 像 赋 


值 、 递 增 、 递 减 运 算 符 一 样 ，delete 也 是 具有 副作用 的 ， 它 是 用 来 做 删 
除 操作 的 ， 不 是 用 来 返回 一 个 值 的 ， 例 如 : 


var 0={X:1,y:2};// 定 义 一 个 对 象 


delete 0.x;// 删 除 一 个 属性 


上 


"x"in 0//=>false: 这 个 属性 在 对 象 中 不 再 存在 


var a=[1,2,3];// 定 义 一 个 数组 


delete a[2];// 删 除 最 后 一 个 数组 元 素 


2 in a;//=>false: 元 素 2 在 数组 中 已 经 不 存在 J 


a.length//=>3: 注 意 ， 数 组 长 度 并 没有 改变 ， 尽 管 上 一 行 代码 删除 了 这 个 元 素 ， 但 删除 操作 留 下 了 一 个 “ 洞 "， 实 
际 上 并 没有 修改 数组 的 长 度 ， 因 此 a 数组 的 长 度 仍 然 是 3 


需要 注意 的 是 ， 删 除 属性 或 者 删除 数组 元 素 不 仅仅 是 设置 了 一 个 
undefined 的 值 。 当 删除 一 个 属性 时 ， 这 个 属性 将 不 再 存在 。 读 取 一 个 
不 存在 的 属性 将 返回 undefined， 但 是 可 以 通过 in 运 算 符 ( 见 4.9.3 节 ) 来 
仿 测 这 个 属性 是 否 在 对 象 中 存在 。 


delete 和 希望 他 的 操作 数 是 一 个 左 值 ， 如 采 它 不 是 左 值 ， 那 么 delete 将 不 进 
行 任何 操作 同时 返回 tue。 否 则 ，delete 将 试图 删除 这 个 指定 的 左 值 。 
如 果 有 删除 成 功 ，delete 将 返回 true。 然 而 并 不 是 所 有 的 属性 都 可 删除 ， 
一 些 内 置 核心 和 客户 端 属 性 是 不 能 删除 的 ， 用 户 通过 var 语 名 声明 的 变 
2 00 。 同样 ， 通 过 function 语 句 定 义 的 芳 数 和 范 数 参数 也 不 能 删 
作 。 


在 ECMAScript 5 严格 模式 中 ， 如 果 delete 的 操作 数 是 非法 的 ， 比 如 变 
量 、 画 数 或 函数 参数 ，delete 操 作 将 抛 出 一 个 语法 错误 (SyntaxError) 
异常 ， 只 有 操作 数 是 一 个 属性 访问 表达 式 〈 见 4.4 世 ) 的 时 候 它 才 会 正 
常 工作 。 在 严格 模式 下 ，delete 删 除 不 可 配置 的 属性 (参照 6.7 市 ) 时 会 
抛 出 一 个 类 型 错误 异常 。 在 非 严 格 模式 下 ， 这 些 delete 操 作 都 不 会 报 
错 ， 只 是 简单 地 返回 false， 以 表明 操作 数 不 能 执行 删除 操作 。 


这 里 有 一 些 关 于 delete 运 算 符 的 例子 : 


Var o={x:1,y:2};// 定 义 一 个 变量 ， 初 始 化 为 对 象 


IT 
二 


delete 0.x;// 删 除 一 个 对 象 属 | 


， 返 回 true 


typeof 0o.x;// 属 性 不 存在 ， 返 回 "undefined" 


delete 0.x;// 删 除 不 存在 的 属性 ， 返 回 true 


false 


高 


delete 0;// 不 能 删除 通过 var 声 明 的 变量 ， 


// 在 严格 模式 下 ， 将 抛 出 一 个 异常 


delete 1;// 参 数 不 是 一 个 左 值 ， 返 回 true 


this .x=1;// 给 全 局 对 象 定义 一 个 属性 ， 这 里 没有 使 用 var 


delete x;// 试 图 删除 它 ， 在 非 严 格 模 式 下 返回 true 


// 在 严格 模式 下 会 抛 出 异常 ， 这 时 使 用 "delete this.x" 来 代替 


x;// 运 行 时 错误 ， 没 有 定义 x 


6.3” 节 还 会 有 关于 delete 操 作 符 的 讨论 。 
4.13.4 ”void 运算 符 


SS 元 运算 符 ， 它 出 现在 操作 数 之 前 ， 操 作 数 可 以 是 任意 类 型 。 这 

运算 符 并 不 是 经 章 使 用 : 操作 数 会 照章 计算 ， 但 忽略 计算 结 采 并 返 
nced 由 于 void 会 忽略 操作 数 的 值 ， 因 此 在 操作 数 具 有 副作用 的 
时 候 使 用 void 来 让 程序 更 具 语 义 。 


这 个 运算 符 最 常用 在 客户 端的 URL javascript:URL 中 ， 在 URL 中 可 
以 写 带 有 副作用 的 表达 式 ， 而 void 则 让 浏 贤 如 不 必 显 示 这 个 表达 式 的 计 
算 结 果 。 例 如 ， 经 第 在 HTML 代 码 中 的 <a> 标签 里 使 用 void 运算 符 : 


<a href="javascript:void window.open();"> 提 个 新 </a> 


通过 给 <a> 的 onclick 绑 定 一 个 事件 处 理 程序 要 比 在 href 中 
写 "javascript:URL" 要 更 加 祖 晰 ， 当 然 ， 这 样 的 话 void 操 作 符 瓯 可 有 可 无 
了 。 


4.13.5 “逗号 运算 符 () 


有 逗号 运算 符 是 二 元 运算 符 ， 它 的 操作 数 可 以 是 任意 类 型 。 它 首先 计算 
然后 计算 右 操作 数 ， 最 后 返回 右 操作 数 的 值 ， 看 下 面 的 示 
列 代 人 的 


i=0, j=1, k=2; 


计算 结果 是 2， 它 和 下 面 的 代码 基本 上 是 等 价 的 ; 


i=0;j=1; k=2; 


Sd, 


忌 古 会 计算 左 侧 的 表达 式 ， 但 计算 结果 忽略 擅 ， 也 就 是 说 ， 只 有 左 倪 
表达 式 具有 副作用 ， 才 会 使 用 过 号 运算 从 让 代码 变 得 更 通顺 。 逗 号 运 
算 符 最 第 用 的 场景 是 在 for 循 环 中 〈 见 5.5.3 人 ) ， 这 个 for 循 环 通常 具有 
多 个 人 循环 变量 : 


/Vfor 循 环 中 的 第 一 个 逗号 是 var 语 句 的 一 部 分 


AR 


// 第 二 个 辟 号 是 去 号 运算 符 


// 它 将 两 个 表达 式 (i++ 和 j--) 放 在 一 条 (for 循环 中 的 ) 语句 中 


for(var i=0,j=10;i<]j;i++,j--) 


console.1log(i+j); 


[1] 作 者 在 这 里 揭示 了 一 种 很 容易 忽略 的 现象 。 假 设 存在 a=1， 那 么 "b= 
(at+)+a;" 将 如 何 计算 结果 呢 ? 按 照 正 文 所 述 ， 顺 序 应 该 是 ，1) 计算 
b，2) 计算 a++ (假设 值 为 cy ，3) 计算 a，4) 计算 cta，5) 将 c+a 的 结 
果 赋 值 给 b。 按 照 和 ++” 的 定义 ， 第 2) 步 中 a++ 的 结果 依然 是 1， 即 c 为 
1， 随 后 a 立即 增 1， 因 此 在 执行 第 3) 步 时 ，a 的 值 已 经 是 2。 所 以 b 的 结 
人 。 很 多 初学 者 会 误 认 为 a 增 1 的 操作 是 在 表达 式 计 算 完 毕 后 执行 


[2] 求 余 运 算 也 叫做 模 运 算 ， 模 束 是 余数 。 


[3] .对象 o 中 存在 一 个 隐藏 的 成 员 ， 这 个 成 员 指 回 其 父 类 的 原型 ， 如 采 
父 类 的 原型 是 另外 一 个 类 的 实例 的 话 ， 则 这 个 原型 对 象 中 也 存在 一 个 
隐藏 成 员 指 回 另 外 一 个 类 的 原型 ， 这 种 链条 将 许多 对 和 象 或 类 串 接 起 
来 ， 既 是 原型 链 。 原 文 所 讲 f.prototype 不 在 o 的 原型 链 中 也 就 是 说 f 和 o 没 
有 派生 关系 ， 更 多 细节 请 参照 6.2.2 节 。 


[和 这 里 的 原文 是 parse， 意 思 是 “解析 * 这 段 字符 串 ， 更 精确 地 讲 ， 应 该 
是 “编译 "这 段 字 符 串 ， 编 译 不 包括 代码 的 执行 。 


[5] .原文 有 误 ， 已 修改 。 
[6]. 比 如 这 段 代码 : 


var foo=function(a){ 
eval(a); 

上 

foo("return;"); 


按照 原文 的 意思 ， 这 段 代 码 中 执行 eval(a) 的 上 下 文 是 全 局 的 ， 在 全 局 上 


下 文中 使 用 return 会 抛 出 语法 错误 :return not in function 。 


[1 这 里 是 指 那些 没有 语义 的 代码 片段 通 过 eval() 执 行 都 会 抛 出 语法 错误 
异常 。 


[8] 这 里 的 场景 其 实 不 包括 如 果 变 量 已 经 定义 且 值 为 false 的 情况 。 
[9] 如 果 你 是 C++ 程序 员 ， 请 注意 JavaScript 中 的 delete 和 C++ 中 的 delete 
是 完全 不 同 的 。 在 JavaScript 中 ， 内 存 的 回收 是 通过 垃圾 回收 自动 回收 


的 ， 你 不 用 担心 内 存 的 显 式 释放 问题 ， 这 样 则 完全 不 用 像 C++ 那 样 通 过 
delete 来 删除 整个 对 象 。 


第 5 章 ， 语 名 


第 4 章 提 到 ， 表 达 式 在 JavaScript 中 是 短语 ， 那 么 语句 (statement) 就 是 
JavaScript 整 句 或 命令 。 正 如 英文 是 用 句号 作 结尾 来 分 隅 语句 ， 
JavaScript 语 句 是 以 分 号 结束 〈 见 2.5 节 ) 。 表 达 式 计算 出 一 个 值 ， 但 语 
句 用 来 执行 以 使 某 件 事 发 生 。 


“使 某 件 事 发 生 ” 的 一 个 方法 是 计算 带 有 副作用 的 表达 式 。 诸 如 赋值 和 
函数 调用 这 些 有 副作用 的 表达 式 ， 是 可 以 作为 单独 的 语句 的 ， 这 种 把 
表达 式 当 做 语句 的 用 法 也 称 做 表达 式 语句 (expression statement) 。 类 
似 的 语句 还 有 声明 语句 (declaration statement) ， 声 明 语句 用 来 声明 新 


JavaScript 程 序 无 非 就 是 一 系列 可 执行 语句 的 集合 。 默 认 情 况 下 ， 
JavaScript 解 释 器 依照 语句 的 编写 顺序 依次 执行 。 男 一 种 “使 某 件 事 发 
生 ” 的 方法 是 改变 语句 的 默认 执行 顺序 。JavaScript 中 有 很 多 语句 和 控制 
结构 (control structure) 来 改变 语句 的 默认 执行 顺序 : 


:条 件 (conditional) 语句 ，JavaScript 解 释 器 可 以 根据 一 个 表达 式 的 值 
来 判断 是 执行 还 是 跳 过 这 些 语句 ， 如 if 语 句 和 switch 语 句 。 


-循环 (loop) 语句 ， 可 以 重复 执行 语句 ， 如 while 和 for 语 句 。 


. 跳 转 (jump) 语句 ， 可 以 让 解释 器 跳 转 至 程序 的 其 他 部 分 继续 执行 ， 
如 break 、 return 和 throw 语 句 。 


接 下 来 的 几 节 将 介绍 JavaScript 中 各 式 各 样 的 语句 及 其 语法 。 本 章 最 后 
的 表 5-1 对 这 些 语 句 作 了 总 结 。 一 个 JavaScript 程 序 无 非 是 一 个 以 分 号 分 
隔 的 语句 集合 ， 所 以 一 旦 掌握 了 JavaScript 语 句 ， 就 可 以 开始 编写 
JavaScript 程 序 了 。 


5.1 表达 式 语 句 
具有 副作用 的 表达 式 是 JavaScript 中 最 简单 的 语句 (5.7.3 节 介绍 了 一 种 


重要 的 无 副作用 的 表达 式 语句 ) 。 这 类 语句 已 经 在 第 4 章 讲 述 了 。 赋 值 
语句 是 一 类 比较 重要 的 表达 式 语句 ， 例 如 : 


greeting="Hello"+name; 


i*=3， 


递增 运算 符 (++) 和 递减 运算 符 (--) 和 赋值 语句 有 关 。 它 们 的 作用 是 
改变 一 个 变量 的 值 ， 就 像 执行 一 条 赋值 语句 一 样 : 


counter++; 


delete 运 算 符 的 重要 作用 是 删除 一 个 对 象 的 属性 ， 所 以 ， 它 一 般 作 为 语 
名 使用， 而 不 是 作为 复杂 表达 式 的 一 部 分 : 


delete o.x; 
函数 调用 是 表达 式 语句 的 男 一 个 大 类 ， 例 如 : 


alert(greeting); 
window.close(); 
里 然 这 些 客户 端 久 数 调用 都 是 表达 式 ， 但 它们 都 对 Web 浏 览 器 造成 了 一 
些 有 影响 ， 所 以 我 们 认为 它们 也 是 语句 。 调 用 一 个 没有 任何 副作用 的 芳 


数 是 没有 意义 的 ， 除 非 它 是 复杂 表达 式 或 赋值 语句 的 一 部 分 ， 例 如 ， 
不 可 能 计算 了 一 个 余弦 值 随 即 把 它 丢 痉 : 


Math.cos(x); 


0 
| : 


cx=Math.cos(x); 


再 次 提醒 读 首 ， 这 些 示例 中 的 每 行 代 码 都 古 以 分 号 结束 的 。 
5.2 复合 语句 和 空 语句 


可 以 用 逗号 运算 符 〈 见 4.13.5 节 ) 将 几 个 表达 式 连 接 在 一 起 ， 形 成 一 个 
表达 式 ， 同 样 ，JavaScript 中 还 可 以 将 多 条 语句 联合 在 一 起 ， 形 成 一 条 
复合 语句 (compound statement) 。 只 须 用 花 括号 将 多 条 语句 括 起 来 即 
可 。 因 此 ， 下 面 几 行 代码 就 可 以 当成 一 条 单独 的 语句 ， 使 用 在 
JavaScript 中 任何 希望 使 用 一 条 语句 的 地 方 : 


{ 


x=Math .PI; 


cx=Math.cos(x); 


console.log("cos(n)="+cx); 


} 


关于 语句 块 有 几 点 需要 注意 ， 第 一 ， 语 句 块 的 结尾 不 需要 分 号 。 块 中 
的 原始 语句 必须 以 分 号 结束 ， 但 语句 块 不 需要 。 第 二 ， 语 句 块 中 的 行 
都 有 缩 进 ， 这 不 是 必需 的 ， 但 整齐 的 缩 进 能 让 代码 可 读 性 更 强 ， 更 容 
易 理 解 。 最 后 ， 需 要 注意 ，JavaScript 中 没有 块 级 作用 域 ， 在 语句 块 中 
声明 的 变量 并 不 是 语句 块 私 有 的 〈 参 照 3.10.1 节 ) 。 


将 多 条 语句 合并 成 一 个 大 语句 块 的 做 法 在 JavaScript 编 程 中 非常 常见 。 

类 似 表 达 式 通常 包含 子 表达 式 一 样 ， 很 多 JavaScript 语 句 包 含 其 他 子 语 

句 。 从 形式 上 讲 ，JavaScript 语 法 通常 允许 一 个 语句 块 只 包含 一 条 子 语 

人 句 。 例 如 ，while 循 环 的 循环 体 就 可 以 只 包含 一 条 语句 。 使 用 语句 块 ， 

0 
用 o 


在 JavaScript 中 ， 当 希望 多 条 语句 被 当做 一 条 语句 使 用 时 ， 使 用 复合 语 
人 句 来 荐 代 。 空 语 铝 (empty : statement) 则 恰好 相反 ， 它 允许 包含 0 条 语 
句 的 语句 。 空 语句 如 下 所 示 ; 


JavaScript 解 释 器 执行 空 语句 时 它 显然 不 会 执行 任何 动作 。 但 实践 证 
明 ， 当 创建 一 个 具有 空 循环 体 的 循环 时 ， 空 语句 有 时 是 很 有 用 的 。 例 
如 下 面 的 for 循 环 (for 循 环 详 见 5.5.3 节 ) : 


// 初 始 化 一 个 数组 a 


for(i=0;i<a.length;a[i++]=0); 


在 这 个 循环 中 ， 所 有 的 操作 都 在 表达 式 a[i++]=0 中 完成 ， 这 里 并 不 需要 
任何 循环 体 。 然 而 JavaScript 需 要 循环 体 中 至 少 包 含 一 条 语句 ， 因 此 ， 
这 里 只 使 用 了 一 个 单独 的 分 号 来 表示 一 条 空 语句 。 


注意 ， 在 for 循 环 、while 循 环 或 和 f 语 句 的 右 圆 括号 后 的 分 号 很 不 起 眼 ， 
这 很 可 能 造成 一 些 致命 bug， 而 这 些 bug 很 难 定位 到 。 例 如 ， 下 面 的 代 
码 的 执行 结果 可 能 就 不 是 程序 作者 想 要 的 效果 : 


if((a==0)||(b==0));// 糟 糕 ! 这 一 行 代码 什么 都 没 做 ,.， 


0=null;// 这 一 行 代码 总 是 会 执行 


如 采 有 特殊 的 目的 需要 使 用 空 语 句 ， 最 好 在 代码 中 添加 注释 ， 这 样 可 
以 更 清楚 地 说 明 这 条 空 语句 是 有 用 的 ， 例 如 : 


for(i=0;i<a.length;a[i++]=0)/*empty*/; 


5.3 ”声明 语 名 

var 和 function 都 是 声明 语句 ， 它 们 声 明 或 定义 变量 或 范 数 。 这 些 语句 定 
义 标识 符 (变量 名 和 函数 名 ) 并 给 其 赋值 ， 这 些 标识 符 可 以 在 程序 中 
任意 地 方 使 用 。 声 明 语句 本 身 什 么 也 不 做 ， 但 它 有 一 个 重要 的 意义 ， 
通过 创建 变量 和 函数 ， 可 以 更 好 地 组 织 代码 的 语义 。 


接 下 来 的 几 节 将 会 讲述 var 语 句 和 functuion 语 句 ， 但 并 不 包含 变量 和 男 
数 的 全 部 内 容 ， 更 多 关于 变量 的 内 容 请 参照 3.9 阁 和 3.10。 更 多 关于 
函数 的 内 容 请 参照 第 8 章 。 

5.3.1 var 


var 语 句 用 来 声明 一 个 或 者 多 个 变量 ， 它 的 语法 如 下 ; 


var name_1[=value_1][,...,name_n[=value_n]] 


关键 子 var 之 后 跟随 的 古 要 声明 的 变量 列表 ， 列 表 中 的 每 一 个 变量 都 可 
以 市 有 初始 化 表达 式 ， 用 于 指定 它 的 初始 值 ， 例 如 ; 


var 工 ;// 一 个 简单 的 变 


var j=0;// 一 个 带 有 初始 值 的 变量 


加 | 


var p,q;// 两 个 变量 


var greeting="hello"+name;// 更 复杂 的 初始 化 表达 式 


var x=2.34,y=Math.cos(0.75),r,theta;// 很 多 变量 


var x=2,y=x*x;// 第 二 个 变量 使 用 了 第 一 个 变量 


var Xx=2, // 更 多 变量 


f=function(x){freturn x*x},// 每 一 个 变量 都 独占 一 行 


y=f (x); 


如 果 var 语 句 出 现在 函数 体内 ， 那 么 它 定义 的 是 一 个 局 部 变量 ， 其 作用 
域 就 是 这 个 函数 。 如 果 在 顶层 代码 中 使 用 var 语 句 ， 它 声明 的 是 全 局 变 
量 ， 在 整个 JavaScript 程 序 中 都 是 可 见 的 。 正 如 在 3.10.2 届 提 到 的 ， 全 局 
变量 是 全 局 对 象 的 属性 。 然 而 和 其 他 全 局 对 象 属性 不 同 的 是 ，var 声 明 
的 变量 是 无 法 通过 delete 删 除 的 。 


如 果 var 语 句 中 的 变量 没有 指定 初始 化 表达 式 ， 那 么 这 个 变量 的 值 初始 

为 ndefined。3.10.1 贡 已 经 提 到 ， 变 量 在 声明 它们 的 脚本 或 函数 中 都 是 

有 定义 的 ， 变 量 声明 语句 会 被 “提前 ”至 脚本 或 者 函数 的 顶部 。 但 是 初 
台 化 的 操作 则 还 在 原来 var 语 句 的 位 置 执行 ， 在 声明 语句 之 前 变量 的 值 


是 undefined 。 
需要 注意 的 是 ，var 语 句 同样 可 以 作为 for 循 环 或 者 for/in 循 环 的 组 成 部 分 


(和 在 循环 之 外 声明 的 变量 声明 一 样 ， 这 里 声明 的 变量 也 会 “ 提 
前 ”) 。 这 里 重复 一 下 3.9 廊 的 例子 : 


for(var i=0;i<10;i++)console.log(i); 


for(var i=0,j=10;i<10;i++,j--)console.log(i*j); 


for(var i in o)console.1o0g(i); 


注意 ， 多 次 声明 同一 个 变量 是 无 所 谓 的 。 
5.3.2 function 
关键 字 function 用 来 定义 函数 。 在 4.3 节 中 我 们 已 经 见 过 函数 定义 表达 


式 。 函 数 定义 也 可 以 写成 语句 的 形式 。 例 如 ， 下 面 示例 代码 中 的 两 种 
定义 写法 : 


var f=function(x){freturn x+1;}// 将 表达 式 赋值 给 一 个 变量 


function f(x)f{return x+1;}// 含 有 变量 名 的 语句 


函数 声明 语句 的 语法 如 下 : 


function funcname([argi[,arg2[...,argn]]])t{ 


statements 


} 


funcname 是 要 声明 的 范 数 的 名 称 的 标识 从 。 范 数 名 之 后 的 圆 括号 中 是 
参数 列表 ， 参 数 之 间 使 用 逗号 分 阳 。 当 调用 芳 数 时 ， 这 些 标识 人 符 则 指 
代 传 入 函数 的 实 参 。 


函数 体 是 由 JavaScript 语 句 组 成 的 ， 语 名 的 数量 不 限 ， 且 用 花 括 号 括 起 
来 。 在 定义 函数 时 ， 并 不 执行 函数 体内 的 语句 ， 它 和 调用 函数 时 待 执 
行 的 新 函数 对 象 相关 联 。 注 意 ，function 语 句 里 的 花 括 号 是 必需 的 ， 这 
和 while 循 环 和 其 他 一 些 语 句 所 使 用 的 语句 块 是 不 同 的 ， 即 使 函数 体 只 
包 侣 一 条 语句 ， 仍 然 必须 使 用 花招 号 将 其 括 起 来 。 


下 面 是 一 些 画 数 声明 的 例子 : 


function hypotenuse(x,y)t{ 


return Math.sqrt(x*xt+ty*y);// 下 一 市 会 讲 到 return 


} 


function factorial(n){// 一 个 递归 函数 


if(n<=1)return 1; 


return n*factorial(n-1); 
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函数 声明 语句 通 种 出 现在 JavaScript 代 码 的 最 顶层 ， 也 可 以 舱 套 在 其 他 
六 数 体 内 。 但 在 拘 双 时 ， 男 数 声 明 只 能 出 现在 所 馈 套 范 数 的 顶部 。 也 
就 是 说 ， 函 数 定义 不 能 出 现在 if 语句 、while 循 环 或 其 他 任何 语句 中 ， 正 
是 由 于 函数 声明 位 置 的 这 种 限制 ，ECMAScript 标 准 规范 并 没有 将 函数 
声明 归 类 为 真正 的 语句 。 有 一 些 JavaScript 实 现 的 确 允 许 在 出 现 语句 的 
地 方才 可 以 进行 钞 数 声明 ， 但 是 不 同 的 实现 在 细 市 处 理 方式 上 有 很 大 
夸 别 ， 因 此 将 画 数 声明 放 在 其 他 的 语句 内 的 做 法 并 不 具备 可 移植 性 。 


尽管 画 数 声明 语句 和 函数 定义 表达 式 包 含 相 同 的 函数 名 ， 但 二 者 仍然 
不 同 。 两 种 方式 都 创建 了 新 的 函数 对 象 ， 但 函数 声明 语句 中 的 函数 名 
是 一 个 变量 名 ， 变 量 指向 函数 对 象 。 和 通过 var 声 明 变 量 一 样 ， 函 数 定 
义 语 句 中 的 函数 被 显 式 地 “提前 ”到 了 脚本 或 函 数 的 顶部。 因此 它们 在 
整个 脚本 和 函数 内 都 是 可 见 的 。 使 用 var 的 话 ， 只 有 变量 声明 提前 了 
一 一 变量 的 初始 化 代码 仍然 在 原来 的 位 置 。 然 而 使 用 函数 声明 语句 的 
话 ， 函 数 名 称 和 函数 体 均 提 前 : 脚本 中 的 所 有 函数 和 函数 中 所 有 髓 套 
的 芳 数 都 会 在 当前 上 下 文中 其 他 代码 之 前 声明 。 也 就 是 说 ， 可 以 在 声 
明 一 个 JavaScript 函 数 之 前 调用 它 。 


和 var 语 名 一样， 函数 声明 语句 创建 的 变量 也 是 无 法 删除 的 。 但 是 这 些 
变量 不 古 只 读 的 ， 变 量 值 可 以 重 写 。 

5.4 ”条 件 语句 

条 件 语句 十 通过 判断 指定 表达 式 的 值 来 决定 执行 还 古 跳 过 攻 些 语句 。 
这 些 语句 是 代码 的 “决策 点 ”"， 有 时 称 为 “分 支 ”。 如 来 说 JavaScript 解 释 
句 是 按照 代码 的 “路 径 ” 执 行 的 ， 条 件 语句 束 古 这 条 路 径 上 的 分 义 所 ， 
程序 执行 到 这 里 时 必须 选择 其 中 一 条 路 径 继续 执行 。 


下 面 几 节 将 会 讲述 JavaScript 中 基本 了 的 条 件 语 句 ， 如 itelse 语 铝 和 Switch 
语句 ，switch 语 句 是 一 种 更 复杂 的 多 分 文 条 件 语句 。 


5.4.1 让 


这 语句 是 一 种 基本 的 控制 语句 ， 它 让 JavaScript 程 序 可 以 选择 执行 路 径 ， 
更 准确 地 说 ， 束 古 有 条 件 地 执行 语句 ， 这 种 语句 有 两 种 形式 ， 第 一 种 
AE: 


if(expression) 


statement 


在 这 种 形式 中 ， 需 要 计算 expression 的 值 ， 如 果 计 算 结 果 是 真 值 ， 那 么 
就 执行 statement。 如 果 expression 的 值 是 假 值 ， 那 么 就 不 执行 
statement。 例 如 : 


-过 


Undefined 


if(username==null)// 如 果 username 是 null 或 


username="John Doe";// 对 其 进行 定义 


同样 地 : 


// 如 果 username 是 null1、undefined、false、0、"" 或 者 NaN， 那 么 给 它 赋 一 个 新 值 


if(!username)username="John Doe"; 


需要 注意 的 是 ， 让 语句 中 括 住 expression 的 圆 括号 在 语法 上 是 必需 的 。 


JavaScript 语 法 规定 ，if 关 键 子 和 市 辆 括号 的 表达 式 之 后 必须 跟随 一 条 语 
0 。 因此 ，if 语 句 的 形式 如 
下 


Ifl(laddress){ 


address=""; 


message="Please specify a mailing address,."， 


这 语句 的 第 二 种 形式 引入 了 了 else 从句， 当 expression 的 值 是 false 的 时 候 执 
行 else 中 的 逻辑 。 其 语法 如 下 : 


if(expression) 
statement1 
else 


statement2 


在 这 段 代码 中 ， 当 expression 为 真 值 时 执行 statement1， 当 expression 为 假 
值 时 执行 statement2， 例 如 : 


if(n==1) 

console.log("You have 1 new message."); 
else 

console.log("You have"+n+"new messages."); 


当 在 igelse 语 句 中 和 瞬 套 使 用 if 语句 时 ， 必 须 注 意 确 保 else 语 句 匹 配 正 确 的 
诗 语句 。 考 虑 如 下 代码 : 


if(i==j) 
if(j==k) 


console.log("i equals k"); 


else 

console.1og("i doesn't equal j");// 错 误 !! 

在 这 个 示例 中 ， 内 层 计 语 名 构成 了 外 层 过 语句 所 需要 的 子 句 。 但 是 ， 计 和 
else 的 匹配 关系 并 不 清晰 (只 有 缩 进 给 出 了 一 些 暗示 ) ， 而 且 在 这 个 例 
于 中 ， 缩 进 给 出 的 暗示 是 错误 的 ， 因 为 JavaScript 解 释 如 将 上 述 代 码 实 
际 解释 为 : 

if(i==j){ 

if(j==k) 

console.log("i equals k"); 

else 

console.1og("i doesn't equal j");// 错 误 ! 

} 

和 大 多 数 编 程 语言 一 样 ，JavaScript 中 的 这 、else 匹 配 规则 是 ，else 总 是 和 
束 近 的 站 语句 匹配 。 为 了 让 这 个 例子 可 读 性 更 强 、 更 易 理解 、 更 方便 维 
护 和 调试 ， 应 当 适 当地 使 用 人 花 括 号 : 

if(i==j){ 

if(j==k){ 

console.log("i equals k"); 

} 


} 


else{// 花 括号 让 代码 结构 更 加 清晰 


console.log("i doesn't equal j"); 


} 


里 然 这 并 不 是 本 书 中 所 使 用 的 编码 风格 ， 但 许多 程序 员 部 有 将 ifielse 
语句 主体 用 伦 括 号 括 起 来 的 习惯 ( 束 像 在 类 似 while 循 环 这 样 的 复合 语 
句 中 一 样 ) ， 即 便 每 条 分 文 只 有 一 条 语句 ， 但 坚持 这 样 做 可 以 避免 刚 
才 这 种 程序 歧义 的 问题 。 


5.4.2 else 让 


if/else 语 句 通过 判断 一 个 表达 式 的 计算 结果 来 选择 执行 两 条 分 文中 的 一 
条 。 但 当代 码 中 有 多 条 分 文 的 时 候 该 怎么 办 呢 ? 一 种 解决 办 法 是 使 用 
else 证 语句 。else if 语 句 并 不 是 真正 的 JavaScript 语 句 ， 它 只 不 过 是 多 条 
if/else 语 句 连 在 一 起 时 的 一 种 惯用 写法 。 


if(n==1){// 执 行 代码 块 1 


} 


else if(n==2){// 执 行 代码 块 2 


} 


[0%] 


else if(n==3){// 执 行 代 码 块 


} 


else{f// 之 前 的 条 件 都 为 false， 则 执行 这 里 的 代码 块 


二 


} 


这 种 代码 并 没有 什么 特别 之 处 ， 它 由 多 条 if 语 名 组成， 每 条 if 语 句 的 else 
从 名 又 包含 刀 外 一 条 if 语句 。 可 以 用 if 语句 的 般 确 形式 来 完成 在 语法 上 


等 价 的 代码 ， 但 与 之 相 比 ， 显 然 使 用 else if 写 法 更 清晰 也 更 可 取 : 


if(n==1){// 执 行 代码 块 1 
} 


elsef 


if(n==2){// 执 行 代码 块 


D 


} 


elsef 


if(n==3){// 执 行 代码 块 


C 


} 


else{// 如 果 所 有 的 判断 都 是 false， 执 行 代码 块 4 


} 
} 


} 


5.4.3 switch 


f 语 句 在 程序 执行 过 程 中 创建 一 条 分 支 ， 并 且 可 以 使 用 else if 来 处 理 多 
条 分 文 。 然 而 ， 当 所 有 的 分 文 都 依赖 于 同一 个 表达 式 的 值 时 ，else if 并 
不 是 最 佳 解决 方案 。 在 这 种 情况 下 ， 重 复 计 算 多 条 if 语 句 中 的 条 件 表达 
式 是 非常 浪费 的 做 法 。 


switch 语 句 正 适合 处 理 这 种 情况 。 关 键 字 switch 之 后 紧 跟 着 圆 括 号 括 起 
来 的 一 个 表达 式 ， 随 后 是 一 对 花 括 号 括 起 来 的 代码 块 : 


switch(expression)t{ 
statements 


} 


然而 ，switch 语 句 的 完整 语法 要 比 这 复 洒 一 些 。 代 码 块 中 可 以 使 用 多 

由 case 关 键 字 标识 的 代码 片段 ，case 之 后 是 一 个 表达 式 和 一 个 冒号 ， 
case 和 标记 语句 很 类 似 ， 只 是 这 个 标记 语句 并 没有 名 字 ， 它 只 和 它 后 面 
的 表达 式 关 联 在 一 起 。 当 执行 这 条 switch 语 句 的 时 候 ， 它 首先 计算 
expression 的 值 ， 然 后 查找 case 子 句 中 的 表达 式 是 否 和 expression 的 值 相 
同 (这 里 的 “相同 ”是 按照 “<===” 运 算 符 进行 比较 的 )  。 如 果 找 到 匹配 的 
case， 那 么 将 会 执行 这 个 case 对 应 的 代码 块 。 如 果 找 不 到 匹配 的 case， 
那么 将 会 执行 "default:" 标 签 中 的 代码 块 。 如 果 没 有 "default:" 标 签 ， 
switch 语 句 将 跳 过 它 的 所 有 代码 块 。 


switch 语 句 是 非常 容易 引起 混 清 的。 用 例子 来 解释 会 比较 清晰 一 些 ， 下 
面 的 switch 语 句 和 方才 展示 的 if/else 语 句 是 等 价 的 : 


switch(n)t{ 


case 1:// 如 果 n===1， 从 这 里 开始 执行 


// 执 行 代码 块 


卢 


break;// 停 止 执 行 switch 语 句 


case 2:// 如 果 n===2， 从 这 里 执行 


// 执 行 代码 块 


Dh 


break;// 在 这 里 停止 执行 switch 语 句 


case 3:// 如 果 n===3， 从 这 里 执行 


// 执 行 代码 块 


CD 


break;// 在 这 里 停止 执行 Switch 语句 


default:// 如 果 所 有 的 条 件 都 不 匹配 


// 执 行 代码 块 


上 


break;// 在 这 里 停止 执行 switch 语 句 


} 


需要 注意 的 是 ， 在 上 面 的 代码 中 ， 在 每 一 个 case 语 句 块 的 结尾 处 都 使 用 
了 关键 字 break。 我 们 将 在 后 面 介 绍 break 语 铅 ，break 语 句 可 以 使 解释 需 
跳出 switch 语 句 或 循环 语句 。 在 switch 语 句 中 ，case 只 是 指明 了 要 执行 
的 代码 起 点 ， 但 并 没有 指明 终点 。 如 果 没 有 break 语 句 ， 那 么 Switch 语句 
就 会 从 与 expression 的 值 相 匹配 的 case 标 签 处 的 代码 块 开 始 执 行 ， 依 次 
执行 后 续 的 语句 ， 一 直到 整个 switch 代 码 块 的 结尾 。 这 种 由 一 个 case 标 
签 执 行 到 下 一 个 case 标 签 的 代码 逻辑 是 很 少 使 用 的 ， 在 大 多 数 情况 下 ， 
应 该 使 用 break 语 句 来 终止 每 个 case 语 句 块 。 当 然 ， 如 果 在 函数 中 使 用 
switch 语 句 ， 可 以 使 用 return 来 代 蔡 break，return 和 break 都 用 于 终止 
switch 语 句 ， 也 会 防止 一 个 case 语 句 块 执行 完 后 继续 执行 下 一 个 case 语 
句 块 。 


下 面 的 Switch 语句 的 例子 更 加 贴近 实 成 ， 它 很 据 值 的 闫 型 将 该 但 鸭 换 广 


字符 串 : 


function convert(x){ 


switch(typeof X){ 


可 
1 


数 


case'number ' :// 将 数字 转换 为 十 六 进 和 


return x.toString(16); 


case'string':// 返 回 两 端 带 双 引 号 的 字符 串 


return'"'+x+'""' 


default :// 使 用 普通 的 方法 转换 其 他 类 型 


return String(x); 
} 


} 


注意 ， 在 上 面 两 个 例子 中 ，case 关 键 字 后 跟随 的 是 数字 和 字符 串 直 接 
量 ， 在 实际 中 这 是 switch 语 句 最 常见 的 用 法 ， 但 是 ECMAScript 标 准 允 
许 每 个 case 关 键 字 跟随 任意 的 表达 式 。 


switch 语 句 首 先 计算 switch 关 键 字 后 的 表达 式 ， 然 后 按照 从 上 到 下 的 顺 
序 计算 每 个 case 后 的 表达 式 ， 直 到 执行 到 case 的 表达 式 的 值 与 switch 的 
表达 式 的 值 相 等 时 为 止 ， 由 于 对 每 个 case 的 匹配 操作 实际 上 

是 “===” 恒 等 运算 竺 比较 ， 而 不 是 “==” 相 等 运算 待 比较， 因此， 表达 式 
和 case 的 匹配 并 不 会 做 任何 类 型 转换 。 


由 于 每 次 执行 switch 语 句 的 时 候 ， 并 不 是 所 有 的 case 表 达 式 都 能 执行 
到 ， 因 此 ， 应 当 避 免 使 用 市 有 副作用 的 case 表 达 陈 ， 比 如 函数 调用 表达 
式 和 赋值 表达 式 。 最 安全 的 做 法 就 是 在 case 表 达 式 中 使 用 稍 量 表达 式 。 


前 面 提 到 过 ， 如 果 switch 表 达 式 与 所 有 case 表 达 式 都 不 匹配 ， 则 执行 标 
记 为 "default:" 的 语句 块 ， 如 果 没 有 "default:" 标 签 ， 则 switch 的 整个 语句 
块 都 将 跳 过 。 我 们 注意 到 ， 在 之 前 的 例子 中 ，"default:" 标 签 都 出 现在 


switch 的 末尾 ， 位 于 所 有 case 标 签 之 后 。 当 然 这 是 最 合理 也 是 最 常用 的 
写法 ， 实 际 上 ， "default:" 标 签 可 以 放置 在 switch 语 句 内 的 任何 地 方 ° 
5.5 循环 


为 了 理解 条 件 语句 ， 可 以 将 在 JavaScript 中 的 代码 想象 成 一 条 条 的 分 支 
J 循环 语句 (looping statement) 就 是 程序 路 径 的 一 个 回路 ， 可 以 

一 部 分 代码 重复 执行 。JavaScript 中 有 4 种 循环 语句 : while、 
os for 和 for/in。 下 面 几 方 将 会 依次 讲解 它们 。 其 中 最 常用 的 循 
环 束 是 对 数组 元 到 的 所 历 ，7.6 届 详细 讨论 这 种 循环 和 使 用 数组 类 定义 
的 特殊 循环 方法 。 


5.5.1 while 


f 语 句 是 一 种 基本 的 控制 语句 ， 用 来 选择 执行 程序 的 分 支 语句 。 和 if 一 
样 ，while 语 名 也 是 一 个 基本 循环 语句 ， 它 的 语法 如 下 : 


while(expression) 


statement 


在 执行 while 语 句 之 前 ，JavaScript 解 释 器 首先 计算 expression 的 值 ， 如 果 
它 的 值 是 假 值 ， 那 么 程序 将 跳 过 循环 体 中 的 逻辑 statement 转 而 执行 程序 
中 的 下 一 条 语句 。 反 之 ， 如 果 表 达 式 expression 是 真 值 ，JavaScript 解 释 
右 将 执行 循环 体内 的 逻辑 ， 然 后 再 次 计算 表达 式 expression 的 值 ， 这 种 
循环 会 一 直 继 续 下 去 ， 直 到 expression 的 值 为 假 值 为 止 。 换 一 种 说 法 就 
是 当 表 达 式 expression 是 真 值 时 则 循环 执行 statement， 注 意 ， 使 用 
while(true) 则 会 创建 一 个 死 循环 。 


通常 来 说 ， 我 们 并 不 想 让 JavaScript 有 反复 执行 同一 操作 。 在 几乎 每 一 次 
循环 中 ， 都 会 有 一 个 或 多 个 变量 随 着 循环 的 迭代 而 改变 。 正 是 由 于 改 
变 了 这 些 变 量 ， 因 此 每 次 循环 执行 的 statement 的 操作 也 不 尽 相 同 。 而 
且 ， 如 有 果 改 变 的 变量 在 expression 中 用 到 ， 那 么 每 次 循环 表达 式 的 值 也 
不 同 。 这 一 点 非常 重要 ， 否 则 一 个 初始 值 为 真 值 的 表达 式 的 值 永 远 都 
全 循环 也 不 会 结束 ， 下 面 这 个 示例 所 示 的 while 循 环 输出 0 一 9 之 
辐 的 但 : 


var count=0; 


while(count<10)f{ 


console.log(count); 


count++; 


} 


可 以 发 现 ， 在 这 个 例子 中 ， 变 量 count 的 初始 值 是 0， 在 循环 执行 过 程 
中 ， 它 的 值 每 次 都 递增 1。 当 循环 执行 了 了 10 次 ， 表 达 式 的 值 就 变 成 了 
false ( 即 ， 变 量 count 的 值 不 再 小 于 10) ， 这 时 while 就 会 结束 ， 
JavaScript 解 释 器 将 执行 程序 中 的 下 一 条 语句 。 大 多 数 循环 都 会 有 一 个 
像 count 这 样 的 计数 姨 变 量 。 尺 管 循环 计数 妖 常 用 i、j、k 这 样 的 变量 
名 ， 但 如 果 想 要 让 代码 可 读 性 更 强 ， 束 应 当 使 用 更 具 语 义 的 变量 名 。 


5.5.2 do/while 
do/while 循 环 和 while 循 环 非常 相似 ， 只 不 过 它 是 在 循环 的 尾部 而 不 是 顶 


部 检测 循环 表达 式 ， 这 就 意味 着 循环 体 至 少 会 执行 一 次 。do/while 循 环 
的 语法 如 下 : 


do 
statement 
while(expression); 


do/while 循 环 并 不 像 while 循 环 那么 常用。 这 是 因为 在 实践 中 那 种 想 要 循 
环 至 少 一 次 的 情况 并 不 和 常见， 下面 是 一 个 do/while 人 循环 的 例子 : 


function printArray(a)t{ 


var len=a.length, i=0; 


if(len==0) 


console.1og("Empty Array"); 


elsef 


dof{ 


console.1log(a[i]); 


}while(++i<1en); 
} 


} 


在 do/while 循 环 和 普通 的 while 循 环 之 间 有 两 点 语法 方面 的 不 同 之 处 。 首 
先 ，do 循 环 要 求 必 须 使 用 关键 字 do 来 标识 循环 的 开始 ， 用 while 来 标识 

循环 的 结尾 并 进入 循环 条 件 判断 ， 其 次 ， 和 while 循 环 不 同 ，do 循 环 是 

用 分 号 结尾 的 。 如 条 while 的 循环 体 使 用 花 括 号 括 起 来 的 话 ， 则 while 循 
环 也 不 用 使 用 分 号 做 结尾 。 


5.5.3 for 


for 语 句 提 供 了 一 种 比 while 语 名 更 加 方便 的 循环 控制 结构 。for 语 句 对 向 
用 的 循环 模式 做 了 一 些 简化 。 大 部 分 的 循环 都 具有 特定 的 计数 夯 变 

量 。 在 循环 开始 之 前 要 初始 化 这 个 变量 ， 然 后 在 每 次 循环 执行 之 前 都 

仿 测 一 下 它 的 值 。 最 后 ， 计 数 占 变量 做 日 增 操作 ， 否 则 就 在 循环 结 

后 ~、 下 一 次 判断 循环 条 件 前 做 修改 。 在 这 一 类 循环 中 ， 计 数 右 的 二 个 

关键 操作 是 初始 化 、 检 测 和 更 新 。for 语 句 就 将 这 三 步 操 作 明确 声明 为 

| 各 目 使 用 一 个 表达 式 来 表示 。for 语 句 的 语法 如 


for(initialize;test;increment) 


statement 


initialize、test 和 increment 三 个 表达 式 之 间 用 分 号 分 隔 ， 它 们 分 别 负 责 初 
台 化 操作 、 循环 条 件 判 断 和 计数 器 变量 的 更 新 。 将 它们 放 在 循环 的 第 
一 行 会 更 容易 理解 for 循 环 正在 做 什么 ， 而 且 也 可 以 防止 乐 记 初始 化 或 
者 递增 计数 右 变 量 。 


要 解释 for 循 环 是 如 何 工作 的 ， 最 简单 的 方法 莫 过 于 列 出 一 个 与 之 等 价 
的 while 循 环 !24。 


initialize; 
while(test)f{ 
statement 
increment,; 


} 


换 句 话说 ，initialize 表 达 式 只 在 人 循环 开始 之 前 执行 一 次 。 初 始 化 表达 式 
应 当 有 具有 副作用 (通常 是 一 条 赋值 语句 ) 。JavaScript 同 样 允 许 初 始 化 
表达 式 中 市 有 var 变 量 声明 语句 ， 这 样 的 话 束 可 以 同时 声明 并 初始 化 一 
个 计数 变量 。 每 次 循环 执行 之 前 会 执行 test 表 达 式 ， 并 判断 表达 式 的 结 
采 来 决定 是 否 执行 循环 体 ， 如 果 test 计 算 结 果 为 真 值 ， 则 执行 循环 体 中 
的 statement。 最 后 ， 执 行 increment 表 达 式 。 同 样 ， 为 了 有 用 起 见 ， 这 里 
的 increment 表 达 式 也 必须 具有 副作用 。 通 第 来 讲 ， 它 不 是 一 个 赋值 表 
达 式 束 是 一 个 由 “++” 或 “--” 运 算 从 构成 的 表达 式 。 


在 上 文中 的 while 循 环 的 例子 可 以 使 用 for 循 环 来 重 写 ， 这 个 循环 同样 输 
出 数字 0 一 9: 


for(var count=0;count<10;count++) 
console.1og(count ) ， 
当然 ， 有 些 循 环 会 比 这 些 例子 更 加 复 洒 ， 而 且 循 环 中 的 一 次 迭代 会 改 


这 多 个 变量 °。 在 JavaScript 中 ， 这 种 情况 则 必须 用 到 逗号 运算 从 ， 它 将 
初始 化 表达 式 和 目 增 表达 式 合并 入 一 个 表达 式 中 以 用 于 for 循 环 : 


Var i,j; 


for(i=0,j=10;i<10;i++,j--) 


Sum+=i*]j， 


到 目前 为 止 ， 在 示例 代码 中 的 循环 变量 都 是 数字 。 当 然 数字 是 最 和 用 
的 ， 但 不 古 必需 的 。 下 面 这 段 代 码 束 使 用 for 循 环 来 遍历 链 表 数 据 结 
并 返回 链表 中 的 最 后 一 个 对 象 也 就 古 第 一 个 不 包含 next 属 性 的 对 


function tail(o){// 返 回 链表 的 最 后 一 个 节点 对 象 


for(;o.next;o=o.next)/x*empty*/;V/ 根 据 判断 o .next 是 不 是 真 值 来 执行 遍历 
return o; 

} 

需要 注意 的 是 ， 这 段 代码 不 包含 initialize 表 达 式 ，for 循 环 中 那 三 个 表达 
式 中 的 任何 一 个 都 可 以 忽略 ， 但 是 两 个 分 号 必 不 可 少 。 如 采 省 略 test 表 
达 式 ， 那 么 这 将 是 一 个 死 循环 ， 同 样 ， 和 while(true) 类 似 ， 死 循环 的 男 
外 一 种 写法 是 for(;;)。 

5.5.4 for/in 


fovin 语 句 也 使 用 for 天 键 字 ， 但 它 是 和 第 规 的 for 循 环 完 全 不 同 的 一 类 循 
环 。forvin 循 环 语句 的 语法 如 下 : 


for(variable in object) 

statement 

variable 通 党 是 一 个 变量 名 ， 也 可 以 是 一 个 可 以 产生 左 值 的 表达 式 或 者 
一 个 通过 var 语 句 声明 的 变量 ， 总 之 必须 是 一 个 适用 于 赋值 表达 式 左 侧 
的 值 。object 是 一 个 表达 式 ， 这 个 表达 式 的 计算 结果 是 一 个 对 象 。 同 
样 ，statement 是 一 个 语句 或 语句 块 ， 它 构成 了 循环 的 主体 。 

使 用 for 循 环 来 志 历 数组 元 素 是 非常 简单 的 : 


for(var i=0;i<a.length;i++)//i 代 表 了 数组 元 素 的 索引 


console.1log(a[i]);// 输 出 数组 中 的 每 个 元 素 


而 for/in 循 环 则 是 用 来 更 方便 地 表 历 对 象 属性 成 员 : 


for(var p in 0)// 将 属性 名 字 赋 值 给 变量 p 


console.1o0g(o[p]);// 输 出 每 一 个 属性 的 值 


在 执行 fovin 语 句 的 过 程 中 ，JavaScript 解 释 龙 首先 计算 object 表 达 式 。 如 

果 表 达 式 为 nul] 或 者 undefined，JavaScirpt 解 释 器 将 会 跳 过 循环 并 执行 后 

续 的 代码 站 。 如 果 表 达 式 等 于 一 个 原始 值 ， 这 个 原始 值 将 会 转换 为 与 

之 对 应 的 包装 对 象 (wrapper object) ( 见 3.6 闻 )。 否 则 ，expression 本 刁 

已 经 是 对 象 了 。JavaScript 会 依次 枚 举 对 象 的 属性 来 执行 循环 。 然 而 在 

每 次 循环 之 前 ，JavaScript 都 会 先 计算 variable 表 达 式 的 值 ， 并 将 属性 名 
(一 个 字符 串 ) 赋值 给 它 。 


需要 注意 的 是 ， 只 要 for/in 循 环 中 variable 的 值 可 以 当做 赋值 表达 式 的 左 
值 ， 它 可 以 是 任意 表达 式 。 每 次 循环 部会 计算 这 个 表达 式 ， 也 束 古 说 
每 次 循环 它 计 算 的 值 有 可 能 不 同 。 例 如 ， 可 以 使 用 下 面 这 段 代码 将 所 
有 对 象 属性 复制 至 一 个 数组 中 : 


Var o={X:1,y:2,2:3}; 

var a=[],i=0; 

for(a[i++]in o)/*empty*/; 

JavaScript 数 组 不 过 是 一 种 特殊 的 对 象 ， 因 此 ，forvin 循 环 可 以 像 枚 举 对 


象 属性 一 样 枚 举 数组 索引 。 例 如 ， 在 上 面 的 代码 之 后 加 上 这 段 代码 就 
可 以 枚 举 数 组 的 索引 0、1、2: 


for(i in a)console.1o0g(i); 


其 实 ，for/i n 循 环 并 不 会 表 历 对 象 的 所 有 属性 ， 只 有 “可 枚 

举 ” (enumerable) 的 属性 才 会 遍历 到 (参照 6. 7 节 ) 。 由 JavaScript 语 言 
核心 所 定义 的 内 置 方法 就 不 是 “可 枚 举 的 "»。 比 如 ， 所 有 的 对 象 都 有 方 
法 toString()， 但 for/in 循 环 并 不 枚 举 toString 这 个 属性 。 除 了 内 置 方 法 之 
外 ， 还 有 很 多 内 置 对 象 的 属性 也 是 “不 可 枚 举 的 ” (nonenumerable) 。 
而 代码 中 定义 的 所 有 属性 和 方法 都 是 可 枚 举 的 (6.7 节 会 讲 到 ， 但 在 
ECMAScript 5 中 可 以 通过 特殊 手段 让 可 枚 举 属 性 变 为 不 可 枚 举 ) 。 对 
象 可 以 继承 其 他 对 象 的 属性 ， 那 些 继承 的 上 自 定义 属性 《参照 6.2.2 节 ) 
也 可 以 使 用 fovin 枚 举 出 来 。 


如 果 forin 的 循环 体 删 除了 还 未 枚 举 的 属性 ， 那 么 这 个 属性 将 不 会 再 枚 
举 到 。 如 果 循 环 体 定义 了 对 象 的 新 属性 ， 这 些 属性 通常 也 不 会 枚 举 到 
Ev JavaScript 的 有 些 实现 是 可 以 枚 举 那 些 在 循环 体 中 增加 的 继承 
Es 、 O 


属性 枚 举 的 顺序 


ECMAScript 规 范 并 没有 指定 for/in 循 环 按照 何 种 顺序 来 枚 举 对 象 属性 。 
但 实际 上 ， 主 流 浏 览 右 厂商 的 JavaScript 实 现 是 按照 属性 定义 的 先后 顺 
序 来 枚 举 简单 对 象 的 属性 ， 先 定义 的 属性 先 枚 举 。 ee 
量 的 形式 创建 对 象 ， 则 将 按照 直接 量 中 属性 的 出 现 顺 序 枚 举 。 有 一 
网 站 和 JavaScript 库 是 依赖 于 这 种 枚 举 顺序 的 ， 浏 贤 器 厂商 不 大 可 能 会 
修改 这 个 顺序 。 


上 一 段 讨论 了 JavaScript 解 释 器 枚 举 “人 简单” 对象 一 种 交互 的 属性 枚 举 顺 
在 下 列 情况 下 ， 枚 举 的 顺序 取决 于 具体 的 实现 (并 且 是 非 交 互 


-对象 继承 了 可 枚 举 属性 ; 
对象 具 有 整数 数组 索引 的 属性 ; 
-使 用 delete 删 除了 对 象 已 有 的 属性 ; 


人 ( 见 6.7 节 ) 或 者 类 似 的 方法 改变 了 对 象 的 
Es O 


除了 所 有 非 继承 的 “* 自 有 ”属性 以 外 的 继承 属性 (参照 6.2.2 市 ) 都 往往 
(但 并 不 是 所 有 的 JavaScript 实 现 都 是 如 此 ) 都 是 可 枚 举 的 ， 而 且 可 以 
按照 它们 定义 的 顺序 进行 枚 举 。 如 果 对 象 属性 继承 自 多 个 “ 原 
型 ”(prototype) ” (参照 6.1.3 节 ) ， 也 就 是 说 它 的 原型 链 上 有 多 个 对 
象 ， 那 么 链 上 面 的 每 一 个 原型 对 象 的 属性 的 遇 历 也 是 依照 特定 顺序 的 
行 的 。JavaScript 的 一 些 (但 不 是 全 部 ) 实现 依照 数字 顺序 来 枚 举 数组 
属性 ， 而 不 是 某 种 特定 的 顺序 。 但 当 数 组 元 素 的 索引 是 非 数 字 或 数组 
是 稀 疏 数组 〈 数 组 索引 是 不 连续 的 ) 时 它们 则 按照 特定 顺序 枚 举 。 


5.6 ” 跳 转 


JavaScript 中 另 一 类 语句 是 跳 转 语句 〈jump statement) 。 从 名 称 就 可 以 
看 出 ， 它 使 得 JavaScript 的 执行 可 以 从 一 个 位 置 跳 转 到 男 一 个 位 置 。 
break 语 句 是 跳 转 到 循环 或 者 其 他 语句 的 结束 。continue 语 句 是 终止 本 次 
循环 的 执行 并 开始 下 一 次 循环 的 执行 。JavaScript 中 的 语句 可 以 命名 或 
禹 有 标签 ，break 和 continue 可 以 标识 目标 循环 或 者 其 他 语句 标签 。 


return 语 句 让 解释 器 跳出 函数 体 的 执行 ， 并 提供 本 次 调用 的 返回 值 。 
throw 语 句 触 发 或 者 “ 抛 出 ”一 个 异常 ， 它 是 与 try/catch/finally 语 名 一同 使 
用 的 ， 这 些 语句 指定 了 处 理 异常 的 代码 逻辑 。 这 是 一 种 复杂 的 跳 转 语 
人 句 ， 当 抛 出 一 个 异常 的 时 候 ， 程 序 将 跳 转 至 最 近 的 闭合 异常 处 理 程 
这 个 异常 处 理 程序 可 以 是 在 同一 个 函数 中 或 者 在 更 高 层 的 调用 栈 


授 下 来 会 详细 讲述 每 一 种 跳 转 语句 。 
5.6.1 标签 语句 


语句 是 可 以 深 加 标签 的 ， 标 签 是 由 语句 前 的 标识 符 和 冒号 组 成 : 


identifer:statement 


通过 给 语句 定义 标签 ， 就 可 以 在 程序 的 任何 地 方 通 过 标签 名 引用 这 条 
语句 。 也 可 以 对 多 条 语句 定义 标签 ， 尽 管 只 有 在 给 语句 块 定义 标签 时 
它 才 更 有 用 ， 比 如 循环 和 条 件 判断 语句 。 通 过 给 循环 定义 一 个 标签 

和 名， 可 以 在 循环 体内 部 使 用 break 和 continue 来 退出 循环 或 者 直接 跳 转 到 


下 一 个 循环 的 开始 。break 和 continue 是 JavaScript 中 唯一 可 以 使 用 语句 标 
签 的 语句 。 本 章 接 下 来 会 有 讲述 。 这 里 有 一 个 例子 ， 其 中 while 循 环 定 
义 了 一 个 标签 ，continue 语 句 使 用 了 这 个 标签 : 


mainloop:while(token!=null){// 忽 略 这 里 的 代码 ,.. 


continue mainloop;// 跳 转 到 下 一 次 循环 


// 忽 略 这 里 的 代码 .. ， 


} 


这 里 用 做 标签 的 identifier 必 须 是 一 个 合法 的 JavaScript 标 识 符 ， 而 不 能 是 
一 个 保留 字 。 标 签 的 命名 至 间 和 变量 或 函数 的 命名 空间 是 不 同 的 ， 
此 可 以 使 用 同一 个 标识 符 作 为 语句 标签 和 作为 变量 名 或 函数 名 。 语 名 
标签 只 有 在 它 所 起 作用 的 语句 (当然 也 可 以 在 它 的 子 句 中 ) 内 是 有 定 
义 的 。 一 个 语句 标签 不 能 和 它 内 部 的 语句 标签 重 名 ， 但 在 两 个 代码 段 
不 相互 嵌 套 的 情况 下 是 可 以 出 现 同名 的 语句 标签 的 。 带 有 标签 的 语句 
还 可 以 市 有 标签 ， 也 就 是 说 ， 任 何 语句 可 以 有 很 多 个 标签 。 


5.6.2 ”break 语 句 


单独 使 用 break 语 句 的 作用 是 立即 退出 最 内 层 的 循环 或 switch 语 句 。 它 的 
语法 如 下 : 


break; 


由 于 它 能 够 使 循环 和 switch 语 句 退出 ， 因 此 这 种 形式 的 break 只 有 出 现在 
这 类 语句 中 才 是 合法 的 。 


我 们 在 switch 语 句 的 例子 中 已 经 见 到 过 break 语 句 。 在 循环 中 ， 不 论 出 于 
什么 原因 ， 只 要 不 想 继续 执行 整个 循环 ， 就 可 以 用 break 来 提前 退出 。 
当 循 环 终止 条 件 非 常 复 杂 时 ， 在 函数 体内 使 用 break 语 名 实现 这 些 条 件 
判断 的 做 法 要 比 直 接 在 循环 表达 式 中 写 出 这 个 复杂 终止 条 件 的 做 法 徐 


单 很 多 。 下 面 的 例子 中 的 循环 遍历 整个 数组 元 素来 查找 某 个 特定 的 
值 ， 当 整个 数组 遍历 完成 后 会 正常 退出 循环 ， 如 果 找 到 了 需要 查找 的 
数组 元 素 ， 则 使 用 break 语 句 退 出 循环 : 


for(var i=0;i<a.length;i++){ 
if(a[i]==target)break; 
了 


JavaScript 中 同样 允许 break 关 键 字 后 面 跟随 一 个 语句 标签 (只 有 标识 


符 ， 没 有 冒号 ) 


break labelname; 


当 break 和 标签 一 块 使 用 时 ， 程 序 将 跳 转 到 这 个 标签 所 标识 的 语句 块 的 
结束 ， 或 者 直接 终止 这 个 闭合 语句 块 的 执行 。 当 没有 任何 闭合 语句 块 
指定 了 break 所 用 的 标签 ， 这 时 会 产生 一 个 语法 错误 。 当 使 用 这 种 形式 
的 break 语 句 时 ， 市 标签 的 语句 不 应 该 是 循环 或 者 switch 语 名， 因为 
break 可 以 “跳出 ”任何 闭合 的 语句 块 。 这 里 的 语句 可 以 丰 由 花 括 喜 括 起 
来 的 一 组 语句 ， 使 用 同一 个 标签 来 标识 这 一 组 语句 。 


在 break 关 键 字 和 labelname 之 间 不 能 换行 。 因 为 JavaScript 可 以 给 语句 目 
动 补 全 省 略 掉 的 分 号 ， 如 果 break 天 键 字 和 标签 之 间 有 换行 ，JavaScript 
解释 器 会 认为 你 在 使 用 break 不 带 标 签 的 最 侧 形 式 ， 因 此 会 在 break 后 补 
充分 号 (参照 2.5 节 ) 


当 你 布 望 通过 break 来 跳出 非 束 近 的 循环 体 或 者 switch 语 句 时 ， 束 会 用 到 
之 标签 的 break 语 句 。 下 面 古 示例 代码 : 


var matrix=getData( );// 从 某 处 得 到 一 个 二 维 数组 


// 将 矩阵 中 所 有 元 素 进行 求 和 


ul 


var sum=0, success=false;// 从 标签 名 开始 ， 以 便 在 报错 时 退出 程序 


compute_sum:if(matrix){ 


for(var x=0;x<matrix.length;x++)t{ 


Var row=matrix[x]; 


if(!row)break compute_sum; 


for(var y=0;y<row.length;y++){ 


Var cell=row[y]; 


if(isNaN(cell))break compute_sum; 


sum+=cell; 


success=true; 


//break 语 句 跳 转 至 此 


// 如 果 在 success==false 的 条 件 下 到 达 这 里 ， 说 明 我 们 给 出 的 矩阵 中 有 错误 


0 


// 否 则 将 矩阵 


所 有 的 元 素 进 行 求 和 


最 后 ， 需 要 注意 的 是 ， Oe nd 它 的 控制 权 都 无 法 
越过 画 0 比如 ， 对 于 一 条 和 融 标 签 的 函数 定义 语句 来 说 ， 不 能 
从 函数 内 部 通过 这 个 标签 ee 


5.6.3 “continue 语句 


continue 语 句 和 break 语 句 非 常 类 似 ， 但 它 不 是 退出 循环 ， 而 是 转 而 执行 
下 一 次 循环 。continue 语 句 的 语法 和 break 语 句 语 法 一 样 简单 : 


continue; 

continue 语 句 同样 可 以 带 有 标签 : 

continue labelname; 

不 管 continue 语 句 融 不 市 标签 ， 它 只 能 在 循环 体内 使 用 。 在 其 他 地 方 使 


用 将 会 报 语法 错误 。 

当 执 行 到 continue 语 句 的 时 候 ， 当 前 的 循环 逻辑 就 终止 了 ， 随 即 执行 下 
一 次 循环 ， 在 不 同类 型 的 循环 中 ，continue 的 行为 也 有 所 区 别 |: 

.在 while 循 环 中 ， 在 循环 开始 处 指定 的 expression 会 重复 检测 ， 如 果 检 测 
结果 为 tue， 循 环 体 会 从 头 开 始 执行 。 

.在 do/while 循 环 中 ， 程 序 的 执行 直接 跳 到 循环 结尾 处 ， 这 时 会 重新 判断 
循环 条 件 ， 之 后 才 会 继续 下 一 次 循环 。 

.在 for 循 环 中 ， 首 先 计 算 目 增 表达 式 ， 然 后 再 次 检测 test 表 达 式 ， 用 以 判 
呆 是 否 执行 循环 体 。 


在 fovin 循 环 中 ， 循 环 开始 思 历 下 一 个 属性 名 ， 这 个 属性 名 赋 给 了 指定 


的 变量 。 


需要 注意 continue 语 句 在 while 和 for 循 环 中 的 区 别 ，while 循 环 直 接 进 入 
下 一 轮 的 循环 条 件 判 断 ， 但 for 循 环 首 先 计算 其 increment 表 达 式 ， 然 后 
判断 循环 条 件 。 之 前 的 章节 讨论 了 和 while 循 环 “ 等 价 ” 的 for 循 环 的 行 
为 。 但 由 于 continue 在 这 两 种 循环 中 的 行为 表现 不 同 ， 因 此 使 用 while 循 
环 不 可 能 完美 地 模拟 等 价 的 for 循 环 。 


下 面 这 段 代 码 展 示 了 不 带 标签 的 continue 语 句 ， 当 产生 一 个 错误 的 时 候 
跳 过 当前 循环 的 后 续 逻 辑 : 


for(i=0;i<data.length;i++){ 


if(1data[i] )continue;// 不 能 处 理 undefined 数 据 


total+=data[il]; 

} 

和 break 语 句 类 似 ， 带 标签 的 continue 语 句 可 以 用 在 骸 套 的 循环 中 ， 用 以 
跳出 多 层次 舱 套 的 循环 体 逻 辑 。 同 样 和 break 语 句 类 似 ， 在 continue 语 句 
和 1labelname 之 间 不 能 有 换行 。 


5.6.4 ” ”return 语句 


回想 一 下 ， 男 数 调 用 是 一 种 表达 式 ， 而 所 有 表达 式 都 有 值 。 函 数 中 的 
return 语 句 既 下 指定 函数 调用 后 的 返回 值 。 这 里 是 return 语 句 的 语法 : 


return expression; 


return 语 句 只 能 在 函数 体内 出 现 ， 如 果 不 是 的 话 会 报 语法 错误 。 当 执行 
到 returm 语 句 的 时 候 ， 画 数 终止 执行 ， 并 返回 expression 的 值 给 调用 程 
序 9 例如 : 


function square(x){freturn x*x;}// 一 个 包含 return 语 句 的 范 数 


square(2)// 调 用 结果 为 4 


如 采 没 有 return 语 句 ， 则 函数 调用 仪 依次 执行 函数 体内 的 每 一 条 语句 直 
到 函数 结束 ， 最 后 返回 调用 程序 。 这 种 情况 下 ， 调 用 表达 式 的 结果 是 
undefined。return 语 句 经 党 作为 贸 数 内 的 最 后 一 条 语句 出 现 ， 但 并 不 厦 
说 要 一 定 放 在 函数 最 后 ， 即 使 在 执行 return 语 句 的 时 候 还 有 很 多 后 续 代 
码 没有 执行 到 ， 这 时 函数 也 还 会 返回 调用 程序 。 


return 语 句 可 以 单独 使 用 而 不 必 带 有 expression， 这 样 的 话 函 数 也 会 回调 
用 程序 返回 undefined。 例 如 : 


function display_object(0o){// 如 果 参 数 是 null 或 者 undefined 则 立即 返 区 


if(lo)return;// 其 他 的 逻辑 


} 


由 于 JavaScript 可 以 自动 插入 分 号 〈 见 2.5 闻 ) ， 因 此 在 return 关 键 字 和 它 
后 面 的 表达 式 之 间 不 能 有 换行 。 


5.6.5 throw 语句 


所 谓 异 常 (exception) 是 当 发 生 了 某 种 异常 情况 或 错误 时 产生 的 一 个 
信号 。 抛 出 异 单 ， 网 是 用 信和 号 通知 发 生 了 错误 或 异 币 状况。 捕获 异 单 
征 指 处 理 这 个 信号 ， 即 采取 必要 的 手段 从 异 前 中 恢复 。 在 JavaScript 
中 ， 当 产生 运行 时 错误 或 者 程序 使 用 hrow 语 句 时 就 会 显 式 地 抛 出 腊 
各。 使 用 try/catchyfinally 语 名 可 以 捕获 异 前 ， 下 一 下 会 对 它 作 详细 介 


绍 。 


throw 语 句 的 语法 如 下 : 


throw expression; 


expression 的 值 可 以 是 任意 类 型 的 。 可 以 抛 出 一 个 代表 错误 码 的 数字 ， 
或 者 包含 可 读 的 错误 消 因 的 字符 串 。 当 JavaScript 解 释 器 抛 出 异常 的 时 
候 通 和 常 采用 Error 类 型 和 其 子 类 型 ， 当 然 也 可 以 使 用 它们 。 一 个 Error 对 
象 有 一 个 name 属 性 表示 错误 类 型 ， 一 个 message 属 性 用 来 存放 传递 给 构 
造 男 数 的 字符 串 (参照 第 三 部 分 的 Error 类 ) ， 在 下 面 的 例子 中 ， 当 使 
用 非法 参数 调用 函数 时 就 抛 出 一 个 Error 对 象 : 


function factorial(x){// 如 果 输 入 参数 是 非法 的 ， 则 抛 出 一 个 异常 


if(x<0)throw new Error("x 不 能 是 负数 ");// 否 则 ， 计 算出 一 个 值 ， 并 正常 地 返回 它 


for(var f=1;x>1;f*=x, xXx--)/*empty*/; 
return f; 


} 


当 抛 出 异常 时 ，JavaScript 解 释 器 会 立即 停止 当前 正在 执行 的 逻辑 ， 并 
跳 转 至 就 近 的 异常 处 理 程 序 。 异 常 处 理 程序 是 用 try/catch/finally 语 句 的 
catch 从 人 句 编 写 的 ， 下 一 广 会 介绍 它 。 如 果 抛 出 异常 的 代码 块 没 有 一 条 
相关 联 的 catch 从 句 ， 解 释 器 会 检查 更 高 层 的 闭合 代码 块 ， 看 它 是 否 有 
相关 联 的 异常 处 理 程序 。 以 此 类 推 ， 直 到 找到 一 个 异常 处 理 程序 为 
止 。 如 果 抛 出 异 第 的 函数 没有 处 理 它 的 trycatchyfinally 语 句 ， 异 党 将 辐 
上 传播 到 调用 该 贸 数 的 代码 。 这 样 的 话 ， 异 常 束 会 沿 着 JavaScript 方 法 
的 词法 结构 和 调用 栈 疝 上 传播 。 如 果 没 有 找到 任何 异常 处 理 程序 ， 
JavaScript 将 把 异常 当成 程序 错误 来 处 理 ， 并 报告 给 用 户 。 


5.6.6 ”try/catch/finally 语 句 


try/catch/finally 语 句 是 JavaScript 的 异常 处 理 机 制 。 其 中 try 从 句 定义 了 需 
要 处 理 的 异常 所 在 的 代码 块 。catch 从 名 跟随 在 try 从 句 之 后 ， 当 try 块 内 
某 处 发 生 了 异常 时 ， 调 用 catch 内 的 代码 逻辑 。catch 从 句 后 跟随 finally 
块 ， 后 者 中 放置 清理 代码 ， 不 管 try 块 中 是 否 产生 异常 ，finally 抉 内 的 逻 
辑 总 是 会 执行 。 尽 管 catch 和 finally 都 是 可 选 的 ， 但 try 从 句 需要 至 少 二 者 
之 一 与 之 组 成 完整 的 语句 。try、catch 和 finally 语 句 块 都 需要 使 用 花 括 号 
| 这 里 的 花 括 号 是 必需 的 ， 即 使 从 句 中 只 有 一 条 语句 也 不 能 省 
略 化 括号 。 


下 面 的 代码 说 明了 try/catch/finally 的 语法 和 使 用 目的 : 


里 的 代码 会 从 头 执 行 到 尾 | 


> 
中 


生 任何 问题 ， 


[a 


try{// 通 常 来 讲 ， 


// 但 有 时 会 抛 出 一 个 异常 ， 要 么 是 由 throw 语 句 直 接 抛 出 异常 ， 


// 要 么 是 通过 调用 一 个 方法 间接 抛 出 异常 


} 


catch(e){// 当 且 仅 当 try 语 句 块 抛 出 了 异常 ， 才 会 执行 这 里 的 代码 


// 这 里 可 以 通过 局 部 变量 e 来 获得 对 Error 对 象 或 者 抛 出 的 其 他 值 的 引 


// 这 里 的 代码 块 可 以 基于 某 种 原因 处 理 这 个 异常 ， 也 可 以 忽略 这 个 异常 ， 


// 还 可 以 通过 throw 语 句 重新 抛 出 异常 


finally{// 不 管 try 语 句 块 是 否 抛 出 了 异常 ， 这 里 的 逻辑 总 是 会 执行 ,终止 try 语 句 块 的 方式 有 : 


//1) 正常 终止 ,执行 完 语句 块 的 最 后 一 条 语句 


//2) 通过 break、continue 或 return 语 句 终止 


//3) 抛 出 一 个 异常 ， 异 常 被 catch 从 句 捕获 


//4) 抛 出 一 个 异常 


常 未 被 捕获 ， 继 续 向 上 传 捐 


也 


我 们 注意 到 ， 关 键 字 catch 后 跟随 了 一 对 圆 括号 ， 圆 括号 内 是 一 个 标识 
从 。 这 个 标识 符 和 男 数 参数 很 像 。 当 捕获 一 个 异 第 时 ， 把 和 这 个 异 篆 
相关 的 值 《比如 Error 对 象 ) 赋值 给 这 个 参数 。 和 普通 的 变量 不 同 ， 这 
条 catch 子 句 中 的 标识 符 具 有 块 级 作用 域 ， 它 只 在 catch 语 句 块 内 有 有 定 
es 


这 里 有 一 个 关于 trycatch 语 句 更 实际 的 例子 ， 这 里 使 用 了 前 面 草书 中 提 
到 的 factorial0) 方 法 ， 并 使 用 客户 端 JavaScript 方 法 promptO0 和 alert0) 来 输 
入 和 输出 : 


try{// 要 求 用 户 输入 一 个 数字 


var n=Number(prompt(" 请 输入 一 个 正 整数 ","") ) ;// 假 设 输入 是 合法 的 ， 计 算 这 个 数 的 阶乘 


var f=factorial(n);// 显 示 结 果 


alert(n+"!="+f); 


} 


catch(ex){// 如 果 输 入 不 合法 ， 将 执行 这 里 的 逻辑 


alert(ex);// 告 诉 用 户 产生 了 什么 错误 


} 


这 里 的 try/catch 语 句 并 不 包含 finally 从 句 。 尺 管 finally 不 像 catch 那 样 经 常 
使 用 ,但 有 时 候 它 还 是 非常 有 用 。 然 而 ， 我 们 需要 更 详尽 地 解释 它 的 
行为 。 不 管 ty 语句 块 中 的 代码 执行 完成 了 多 少 ， 只 要 try 语 句 中 有 一 部 
finally 从 句 束 会 执行 。 它 通常 在 try 从 人 句 的 代码 后 用 于 清 
理工 作 。 


通常 状况 下 ， 解 释 咒 执行 到 try 块 的 尾部 ， 然 后 开始 执行 finally 中 的 逻 
辑 ， 以 便 进 行 必要 的 清理 工作 。 当 由 于 returmn 、continue 或 break 语 句 使 
得 解释 器 跳出 try 语 句 块 时 ， 解 释 器 在 执行 新 的 目标 代码 之 前 先 执行 
finally 块 中 的 逻辑 。 


如 琳 在 try 中 产生 了 异 第 ， 而 且 存 在 一 条 与 之 相关 的 catch 从 句 来 处 理 这 
个 异常 ， 解 释 器 会 首先 执行 catch 中 的 逻辑 ， 然 后 执行 finally 中 的 逻辑 。 
如 果 不 存在 处 理 异 和 常 的 局 部 catch 从 句 ， 解 释 紫 会 首先 执行 finally 中 的 逻 
辑 ， 然 后 同上 传播 这 个 异 前 ， 直 到 找到 能 处 理 这 个 异 利 的 catch 从 句 。 


如 果 finally 块 使 用 了 return、continue、break 或 者 throw 语 句 使 程序 发 生 
跳 转 ， 或 者 通过 调用 了 抛 出 异常 的 方法 改变 了 程序 执行 流程 ， 不 管 这 
个 跳 转 使 程序 挂 起 还 是 继续 执行 ， 解 释 器 都 会 将 其 忽略 。 例 如 ， 如 果 
finally 从 句 抛 出 一 个 异常 ， 这 个 异 间 将 奉 代 正在 抛 出 的 异常 。 如 采 
finally 从 名 运行 到 了 return 语 句 ， 尽 管 已 经 抛 出 了 异常 且 这 个 抛 出 的 异 
常 还 没有 处 理 ， 这 个 方法 依然 会 正常 返回 由。 


在 没有 catch 从 名 的 情况 下 try 从 名 可 以 和 finally 从 句 一 起 使 用 。 在 这 种 情 
况 下 ，finally 块 只 包含 清理 代码 ， 不 管 try 块 中 是 否 有 break、continue 或 
return 语 句 ， 这 里 的 代码 一 定 会 执行 ， 回 想 一 下 ， 我 们 无 法 完全 精确 地 


使 用 while 循 环 来 模拟 for 循 环 ， 因 为 continue 语 句 在 两 个 循环 中 的 行为 表 
现 不 一 致 。 如 条 使 用 try/finally 语 句 ， 束 能 使 用 while 循 环 来 正确 模拟 包 
含 continue 的 for 循 环 : 


// 模 拟 for (initialize;test;increment)body; 
initialize; 

while(test){ 

try{body;} 

finally{increment;} 

} 

然而 需要 注意 的 是 ， 当 body 包 含 break 语 句 时 ，while 循 环 和 for 循 环 便 有 
了 更 微妙 的 区 别 〈 造 成 了 一 次 额外 的 自 增 运算 ) ， 因 此 即便 使 用 了 
finally 从 句 ， 使 用 while 来 完全 模拟 for 循 环 依然 是 不 可 能 的 。 

5.7 ”其 他 语句 类 型 

本 讨论 剩余 的 三 种 JavaScript 语 句 
5.7.1 ”with 语 铝 

3.10.3” 节 讨论 了 作用 域 链 (scope chain) ， 一 个 可 以 按 序 检索 的 对 象 


列表 ， 通 过 它 可 以 进行 变量 名 解析 。with 语 句 用 于 临时 扩展 作用 域 链 ， 
它 具 有 如 下 的 语法 : 


width、debugger 和 use strict 。 


with(object ) 


Statement 


这 条 语句 将 object 添 加 到 作用 域 链 的 头 部 ， 然 后 执行 statement， 最 后 把 
作用 域 链 恢复 到 原始 状态 。 


在 严格 模式 中 (参照 5.7.3 节 ) 是 禁止 使 用 with 语句 的 ， 并 且 在 非 严 格 模 
式 里 也 是 不 推荐 使 用 with 语句 的 ， 尽 可 能 避免 使 用 with 语句 。 那 些 使 用 
with 语句 的 JavaScript 代 码 非 常 难于 优化 ， 并 且 同 没有 使 用 with 语句 的 代 
码 相 比 ， 它 运行 得 更 慢 。 

在 对 象 巷 套 层次 很 深 的 时 候 通常 会 使 用 with 语句 来 简化 代码 编写 。 例 

如 ， 在 客户 端 JavaScript 中 ， 可 能 会 使 用 类 似 下 面 这 种 表达 式 来 访问 一 
个 HTML 表 单 中 的 元 素 : 


document .forms[0].address.value 


如 采 这 种 表达 式 在 代码 中 多 次 出 现 ， 则 可 以 使 用 with 语 句 将 form 对 象 添 
加 至 作用 域 链 的 顶层 : 


with(document .forms[0] ){// 直 接 访问 表单 元 素 ， 例 如 : 


name .value=""; 
address.value=""; 

email.value=""; 

} 

这 种 方法 减少 了 大 量 的 输入 ， 不 用 再 为 每 个 属性 名 添加 
document.forms[0] 前 级 。 这 个 对 象 临 时 挂 载 在 作用 域 链 上 ， 当 JavaScript 


需要 解析 诸如 address 的 标识 符 时 ， 就 会 目 动 在 这 个 对 象 中 查找 。 当 
然 ， 不 使 用 with 语 句 的 等 价 代码 可 以 写成 这 样 : 


Var f=document ,forms[0]， 


f.name.Value=""， 


f,address,value="”"， 


f.email.value=""， 


不 要 起 记 ， 只 有 在 查找 标识 符 的 时 候 才 会 用 到 作用 域 链 ， 创 建新 的 变 


量 的 时 候 不 使 用 它 ， 看 一 下 下 面 这 行 代码 : 


with(o)x=1; 


如 采 对 象 O 有 一 个 属性 x， 那 么 这 行 代码 给 这 个 属性 赋值 为 1。 但 如 有 果 o 
中 没有 定义 属性 x， 这 段 代码 和 不 使 用 with 语 句 的 代码 x=1 古 一 模 一 样 
的 。 它 给 一 个 局 部 变量 或 者 全 局 变量 x 赋值 ， 或 者 创建 全 局 对 象 的 一 个 
新 属性 。with 语 句 提 供 了 一 种 读 取 o 的 属性 的 快捷 方式 ， 但 它 并 不 能 创 


建 o 的 属性 。 
5.7.2 ”debugger 语 句 


debugger 语 句 通常 什么 也 不 做 。 然 而 ， 当 调试 程序 可 用 并 运行 的 时 候 ， 
JavaScript 解 释 器 将 会 ( 非 必需 ) 以 调式 模式 运行 。 实 际 上 ， 这 条 语句 


用 来 产生 一 个 断 点 (breakpoint) 


，JavaScript 代 码 的 执行 会 停止 在 断 点 


的 位 置 ， 这 时 可 以 使 用 调试 套 输 出 变量 的 值 、 检 查 调用 栈 等 。 例 如 ， 
假设 由 于 调用 函数 {0 的 时 候 使 用 了 未 定义 的 参数 ， 因 此 f0 抛 出 一 个 异 
常 ， 但 无 法 定位 到 质 是 哪里 抛 出 了 异 第 。 为 了 有 助 于 调试 这 个 问题 ， 


需要 修改 函数 f0: 


function f(o){ 


if(o===undefined)debugger;// 这 一 行 代 码 只 


.，.// 男 数 的 其 他 部 分 


} 


和 让 站 


临时 调试 


这 时 ， 当 调用 f 的 时 候 没 有 传 入 参数 ， 程 序 将 停止 执行 ， 这 时 可 以 通 
过 调运 铸 检 测 调用 栈 并 找 出 错误 产生 的 原因 。 


在 ECMAScript 5 中 ，debugger 语 名 正式 加 入 到 这 门 语言 里 。 但 在 相当 长 
的 一 段 时 间 里 ， 主 流 浏 贤 絮 厂商 已 经 将 其 实现 了 。 注 意 ， 可 用 的 调试 
句 是 远 远 不 够 的 ，debugger 语 句 不 会 启动 调试 器 。 但 如 有 果 调 试 俐 已 经 在 
运行 中 ， 这 条 语句 才 会 真正 产生 一 个 断 点 。 例 如 ， 如 有 果 使 用 Firefox 的 
调试 扩展 插件 Firebug， 则 必须 首 移 为 竺 调试 的 网 页 启用 Friebug， 这 样 
debugger 语 句 才 能 正常 工作 。 


5.7.3 "Use strict" 


"use strict" 是 ECMAScript 5 引入 的 一 条 指令 。 指 令 不 是 语句 (但 非常 接 
近 于 语句 ) 。"use strict" 指 令 和 普通 的 语句 之 间 有 两 个 重要 的 区 别 : 


' 它 不 包含 任何 语言 的 关键 字 ， 指 令 仅 仅 是 一 个 包含 一 个 特殊 字符 串 直 

接 量 的 表达 式 〈 可 以 是 使 用 单 引 号 也 可 以 使 用 双 引 号 ) ， 对 于 那些 没 

有 实现 ECMAScript 5 的 JavaScript 解 释 絮 来 说 ， 它 只 是 一 条 没有 副作用 

的 表达 式 语句 ， 它 什么 也 没 做 。 将 来 的 ECMAScript 标 准 希 望 将 use 用 做 
天 键 字 ， 这 样 就 可 以 省 略 引 号 了 。 


' 它 只 能 出 现在 脚本 代码 的 开始 或 者 函数 体 的 开始 、 任 何 实 体 语句 之 
前 。 但 它 不 必 一 定 出 现在 脚本 的 首 行 或 钞 数 体内 的 下 行 ， 因 为 "use 
strict" 指 令 之 后 或 之 前 都 可 能 有 其 他 字符 串 直 搂 量 表达 式 语句， 并 且 
JavaScript 的 具体 实现 可 能 将 它们 解析 为 解释 郁 目 有 的 指令 。 在 脚本 或 
者 函数 体内 第 一 条 秆 规 语句 之 后 字符 串 直 接 量 表达 式 语 句 只 当做 普通 
0 


使 用 "use strict" 指 令 的 目的 是 说 明 〈 脚 本 或 函数 中 ) 后 续 的 代码 将 会 解 
析 为 严格 代码 (strict code) 。 如 有 果 顶 层 〈 不 在 任何 函数 内 的 ) 代码 使 
用 了 "use strict" 指 令 ， 那 么 它们 束 是 严格 代码 。 如 果 男 数 体 定义 所 处 的 
代码 是 严格 代码 或 者 函数 体 使 用 了 "use strict" 指 令 ， 那 么 函数 体 的 代码 
也 是 严格 代码 。 如 果 eval() 调 用 时 所 处 的 代码 是 严格 代码 或 者 eval() 要 执 
行 的 字符 串 中 使 用 了 "scrict code" 指 令 ， 则 eval0 内 的 代码 是 严格 代码 。 


严格 代码 以 严格 模式 执行 。ECMAScript 5 中 的 严格 模式 是 该 语言 的 一 
个 受 限制 的 子 集 ， 它 修正 了 语言 的 重要 缺陷 ， 并 提供 健壮 的 查 错 功能 


和 增强 的 安全 机 制 。 严 格 模 式 和 非 严格 模式 之 间 的 区 别 如 下 (前 三 条 
尤为 重要 ) 


-在 严格 模式 中 人 树 止 使 用 with 语句 。 


在 产 格 模式 中 ， 所 有 的 变量 都 要 移 声 明 ， 如 采 给 一 个 未 声明 的 变量 、 
函数 、 函 数 参数 、catch 从 句 参数 或 全 局 对 象 的 属性 赋值 ， 将 会 抛 出 一 
个 引用 错误 异常 (在 非 严 格 模式 中 ， 这 种 隐 式 声明 的 全 局 变量 的 方法 
是 给 全 局 对 象 新 添加 一 个 新 属性 ) 。 


.在 严格 模式 中 ， 调 用 的 函数 〈 不 是 方法 ) 中 的 一 个 this 值 是 undefined 。 
(在 非 严 格 模式 中 ， 调 用 的 函数 中 的 this 值 总 是 全 局 对 象 ) 。 可 以 利用 
这 种 特性 来 判断 JavaScript 实 现 是 否 文 持 严 格 模式 : 


.同样 ， 在 严格 模式 中 ， 当 通过 call0 或 apply0 来 调用 函数 时 ， 其 中 的 this 
值 就 是 通过 call0 或 apply0 传 入 的 第 一 个 参数 “(在 非 严 格 模 式 中 ，null 和 
undefined 值 被 全 局 对 象 和 转换 为 对 象 的 非 对 象 值 所 代替 ) 。 


:在 严格 模式 中 ， 给 只 读 属 性 赋值 和 给 不 可 扩展 的 对 象 创建 新 成 员 都 将 
抛 出 一 个 类 型 错误 异常 (在 非 严 格 模式 中 ， 这 些 操作 只 是 简单 地 操作 
失败 ,不 会 报销 ) 3 


-在 严格 模式 中 ， 传 入 eval0 的 代码 不 能 在 调用 程序 所 在 的 上 下 文中 声明 
变量 或 定义 函数 ， 而 在 非 广 格 模式 中 是 可 以 这 样 做 的 。 相 反 ， 变 量 和 
0 ， 这 个 作用 域 在 eval0 返 回 时 就 


var hasStrictMode=(function(){ 人 "use strict";return this===undefined}()); 


.在 严格 模式 中 ， 画 数 里 的 arguments 对 象 ( 见 8.3.2 节 ) 拥有 传 入 函数 值 
的 静态 副本 。 在 非 严格 模式 中 ，arguments 对 象 具 有 “魔术 般 ” 的 行为 ， 
arguments 里 的 数组 元 素 和 男 数 参数 都 是 指 癌 同一 个 值 的 引用 。 


:在 严格 模式 中 ， 当 delete 运 算 符 后 跟随 非法 的 标识 符 (比如 变量 、 画 
数 、 画 数 参数 ) 时 ， 将 会 抛 出 一 个 语法 错误 异常 (在 非 严 格 模式 中 ， 
这 种 delete 表 达 式 什么 也 没 做 ， 并 返回 false) 。 


-在 闫 格 模 式 中 ， 试 图 删除 一 个 不 可 配置 的 属性 将 抛 出 一 个 类 型 错误 异 
常 〈 在 非 严 格 模式 中 ，delete 表 达 式 操作 失败 ， 并 返回 false) 。 

-在 严格 模式 中 ， 在 一 个 对 象 直接 量 中 定义 两 个 或 多 个 同名 属性 将 产生 
一 个 语法 错误 〈 在 非 严 格 模式 中 不 会 报错 ) 。 

在 严格 模式 中 ， 画 数 声明 中 存在 两 个 或 多 个 同名 的 参数 将 产生 一 个 语 
法 错误 (在 非 严 格 模 式 中 不 会 报错 ) 。 

-在 严格 模式 中 是 不 允许 使 用 八进制 整数 直接 量 (以 0 为 前 级 ， 而 不 是 0x 
0 


O 


.在 严格 模式 中 ， 标 识 符 eval 和 arguments 当 做 关键 字 ， 它 们 的 值 是 不 能 
更 改 的 。 不 能 给 这 些 标识 符 赋 值 ， 也 不 能 把 它们 声明 为 变量 、 用 做 函 
数 名 、 用 做 函数 参数 或 用 做 catch 块 的 标识 符 。 


:在 严格 模式 中 限制 了 对 调用 栈 的 检测 能 力 ， 在 严格 模式 的 男 数 中 ， 
arguments.caller 和 arguments.callee 都 会 抛 出 一 个 类 型 错误 异常 。 严 格 模 
式 的 函数 同样 具有 caller 和 arguments 必 性 ， 当 访问 这 两 个 属性 时 将 抛 出 
类 型 错误 异常 (有 一 些 JavaScript 的 实现 在 非 严 格 模 式 里 定义 了 这 些 非 
标准 的 属性 ) 。 


5.8 ” ”JavaScript 语句 小 结 


本 章 介绍 了 JavaScript 语 言 中 的 每 种 语句 。 表 5-1 是 本 章 的 总 结 ， 列 出 了 
每 种 语句 的 语法 和 用 途 : 


表 5-1，JavaScript 语 句 语法 
语句 语法 


break break [label]; 


Case Case expression: 


Continue Continue [label]; 


用 途 

退出 最 内 层 循环 或 者 退出 switch 语 
句 ， 又 或 者 退出 labe] 指 定 的 语句 
在 Switch 语句 中 标记 一 条 语句 
重新 开始 最 内 层 的 循环 或 重新 开始 
]abe] 指 定 的 循环 


表 5.1， JavagScript 语 句 语法 ( 续 ) 


语句 
debugger 
default 
do/while 
empty 
for 
for/in 
function 
if/else 
label 
return 


switch 


throw 


try 


use strict 
Var 
while 


with 


语法 
debugger; 
default; 


用 途 
断 点 器 调试 
在 switch 中 标记 默认 的 语句 


do statement while(expression); while 循 环 的 一 种 煌 代 形式 


) 
for(init;test;incr)statement 


for(var in object)statement 


什么 都 不 做 
一 种 简写 的 循环 
电 历 一 个 对 象 的 属性 


function name([param[],,,.]){body} 声明 一 个 函数 
if(expr)statement1 [else statement2] 执行 statement1 或 者 statement2 


label:statement 


return [expression]; 


switch(expression){statements} 


throw expression; 

try {statements} 

[catch {handler statements}] 
[finally {cleanup statements}] 
"use strict" 

Var name=[=expr][,...]; 
while(expression) statement 


with(object) statement 


给 statement 指 定 一 个 名 字 ; label 
从 函数 返回 一 个 值 

用 case 或 者 “default:” 语 句 标 记 的 
多 分 支 语句 

抛 出 异常 

捕获 异常 


对 脚本 和 函数 应 用 严格 模式 
声明 并 初始 化 一 个 或 多 个 变量 
基本 的 循环 结构 

扩展 作用 域 链 (不 赞成 使 用 ) 


[1 由 于 JavaScript 中 的 case 表 达 式 的 值 是 在 运行 时 (run-time) 计算 的 ， 
这 一 点 使 得 JavaScript 的 switch 语 句 和 C、C++ 和 Java 中 的 switch 语 句 有 很 
大 区 别 (并 且 效 率 也 很 低 ) 。 在 C、C++ 和 Java 中 ，case 表 达 式 必须 为 
同类 型 的 编译 时 (compile-time) 常量 ， 而 且 switch 语 句 通常 会 编译 成 
一 个 跳 转 表 (jump table) ， 这 让 switch 语 句 的 执行 非常 高 效 。 


[21.5.6.3 广 会 讲 到 ， 在 使 用 continue 语 句 时 ，while 循 环 和 for 循 环 并 不 等 
价 。 
[3] 在 这 种 情况 下 ，ECMAScript 3 的 实现 可 能 会 抛 出 一 个 类 型 错误 异 
常 。 


[41. 按 照 原 文 的 接 述 ， 这 段 代 码 将 正 第 执行 ， 并 foo() 芳 数 会 有 正 第 的 返 
回 值 ， 参 照 这 段 代 码 : 


var foo=function() { 

try{ 

// 抛 出 一 个 异 音 

} 

finally{ 

return 1;// 示 处理 异 常 直 接 返 回 ， 这 里 将 正常 返回 


foo(); 


第 6 章 ”对 象 


对 象 是 JavaScript 的 基本 数据 类 型 。 对 象 是 一 种 复合 值 ， 它 将 很 多 值 
(原始 值 或 者 其 他 对 象 ) 聚合 在 一 起 ， 可 通过 名 字 访 问 这 些 值 。 对 象 

也 可 看 做 是 属性 的 无 序 集合 ， 每 个 属性 都 是 一 个 名 / 值 对 。 属 性 名 是 字 

符 串 ， 因 此 我 们 可 以 把 对 象 看 成 是 从 字符 串 到 值 的 映射 。 这 种 基本 数 

据 结 构 还 有 很 多 种 叫 法 ， 有 些 我 们 已 然 非常 熟悉 ， 比 如 “ 敬 

列 ”(hash) 、“ 散 列表 ”(hashtable) 、“ 字 上 典 ”(dictionary) 、“ 关 联 数 

组 ”(associative array) 。 然 而 对 象 不 仅仅 是 字符 串 到 值 的 映射 ， 除 了 

可 以 保持 和 目 有 的 属性 ，JavaScript 对 象 还 可 以 从 一 个 称 为 原型 的 对 象 继 

承 属 性 。 对 象 的 方法 通常 是 继承 的 属性 。 这 种 “原型 式 继 

承 ” (prototypal inheritance) 是 JavaScript 的 核心 特征 。 


JavaScript 对 象 是 动态 的 可 以 新 增 属 性 也 可 以 删除 属性 但 它们 
常用 来 模拟 静态 对 象 以 及 静态 类 型 语言 中 的 “结构 体 ”(struct) 。 有 时 
它们 也 用 做 字符 串 的 集合 (忽略 名 / 值 对 中 的 值 。 


除了 字符 串 、 数 字 、true、false、null 和 undefined 之 外 ，JavaScript 中 的 
值 都 是 对 象 。 尽 管 字符 串 、 数 字 和 布尔 值 不 是 对 象 ， 但 它们 的 行为 和 
不 可 变 对 象 (参照 3.6 节 ) 非常 类 似 。 


3.7 玉 已 经 讲 到 ， 对 象 是 可 变 的 ， 我 们 通过 引用 而 非 值 来 操作 对 象 。 如 
朱 变 量 x 是 指 加 一 个 对 象 的 引用 ， 那 么 执行 代码 var y=x; 变 量 y 也 是 指 问 
同一 个 对 象 的 引用 ， 而 非 这 个 对 象 的 副本 。 通 过 变量 y 修 改 这 个 对 象 本 


会 对 变量 x 造成 影响 。 


对 象 最 常见 的 用 法 是 创建 (create) 、 设 置 (set) 、 查 找 (guery) 、 
删除 (delete) 、 检 测 (test) 和 枚 举 (enumerate) 它 的 属性 。 我 们 会 
在 开始 的 几 节 讲述 这 些 基础 操作 。 后 续 的 几 市 讲述 高 级 主题 ， 其 中 相 
当 一 部 分 内 容 来 目 于 ECMAScript 5。 


属性 包括 名 字 和 值 。 属 性 名 可 以 是 包含 空 字符 串 在 内 的 任意 字符 串 ， 
但 对 象 中 不 能 存在 两 个 同名 的 属性 。 值 可 以 是 任意 JavaScript 值 ， 或 者 
(在 ECMAScript 5 中 ) 可 以 是 一 个 getter 或 setter 函 数 (或 两 者 都 有 ) 。 
6.6 节 会 有 关于 getter 和 setter 函 数 的 讲解 。 除 了 名 字 和 值 之 外 ， 每 个 属 
性 还 有 一 些 与 之 相关 的 值 ， 称 为 “属性 特性 ” (property attribute) (i: 


:可 写 (writable attribute) ， 表 明 是 否 可 以 设置 该 属性 的 值 。 


.可 枚 举 (enumerable attribute) ， 表 明 是 否 可 以 通过 fowvin 循 环 返 回 该 
属性 。 

:可 配置 (configurable attribute) ， 表 明 是 否 可 以 删除 或 修改 该 属性 。 
在 ECMAScript 5 之 前 ， 通 过 代码 给 对 象 创建 的 所 有 属性 都 是 可 写 的 、 
可 枚 举 的 和 可 配置 的 。 在 ECMAScript 5 中 则 可 以 对 这 些 特性 加 以 配 
置 。6.7 节 讲述 如 何 操作 。 


除了 包含 属性 之 外 ， 每 个 对 象 还 拥有 三 个 相关 的 对 象 特性 (object 


attribute) : 


.对象 的 原型 (prototype) 指向 另外 一 个 对 象 ， 本 对 象 的 属性 继承 目 它 
的 原型 对 象 。 


-对象 的 类 (class) 是 一 个 标识 对 象 类 型 的 字符 串 。 


-对象 的 扩展 标记 (extensible flag) 指明 了 (在 ECMAScript 5 中 ) 是 否 
可 以 向 该 对 象 添加 新 属性 。 


6.1.3 世 和 6.2.2 世 会 有 关于 原型 和 属性 继承 的 讲述 ，6.8 市 会 进一步 详细 
讲述 这 三 个 特性 。 


最 后 ， 我 们 用 下 面 这 些 术 语 来 对 三 类 JavaScript 对 象 和 两 类 属性 作 区 
hs 


:内 置 对 象 (native object) 是 由 ECMAScript 规 范 定义 的 对 象 或 类 。 例 
如 ， 数 组 、 画 数 、 日 期 和 正则 表达 式 都 是 内 置 对 象 。 


.宿主 对 象 (host object) 是 由 JavaScript 解 释 器 所 租 入 的 宿主 环境 ( 比 
如 Web 浏 览 器 ) 定义 的 。 客 户 端 JavaScript 中 表示 网 页 结构 的 
HTMLElement 对 象 均 是 答 主 对 象 。 既 然 答 主 环境 定义 的 方法 可 以 当成 
普通 的 JavaScript 函 数 对 象 ， 那 么 宿主 对 象 也 可 以 当成 内 置 对 象 。 


. 自 定 义 对 象 (user-defined object) 是 由 运行 中 的 JavaScript 代 码 创 建 的 
对 象 。 


. 自 有 属性 (own property) 是 直接 在 对 象 中 定义 的 属性 。 
继承 属性 (inherited property) 是 在 对 象 的 原型 对 象 中 定义 的 属性 。 
6.1 创建 对 象 


可 以 通过 对 象 直接 量 、 关 键 字 new 和 (ECMAScript 5 中 的 ) 
Object.create() 汞 数 来 创建 对 象 。 接 下 来 儿 节 将 对 这 些 技术 一 一 讲述 。 


6.1.1 对 象 直 接 量 


创建 对 象 最 简单 的 方式 就 是 在 JavaScript 代 码 中 使 用 对 象 直接 量 。 对 象 
直接 量 是 由 者 干 名 / 值 对 组 成 的 映射 表 ， 名 / 值 对 中 间 用 冒号 分 隔 ， 名 / 
值 对 之 间 用 逗号 分 隔 ， 整 个 映射 表 用 人 花 括 号 括 起 来 。 属 性 名 可 以 旦 
JavaScript 标 识 符 也 可 以 是 字符 串 直 接 量 (包括 空 字符 串 ) 。 属性 的 值 
可 以 是 任意 类 型 的 JavaScript 表 达 式 ， 表 达 式 的 值 〈 可 以 是 原始 值 也 可 
以 是 对 象 值 ) 就 是 这 个 属性 的 值 。 下 面 有 一 些 例子 : 


var empty={};// 没 有 任何 属性 的 对 象 


var point={fx:9,y':9};// 两 个 属性 


var point2={x:point.x,y:point.y+1};// 更 复杂 的 值 


Var book={ 


"main title":"JavaScript",// 属 性 名 字 里 有 空格 , 必须 用 字符 串 表示 


'sub-title':"The Definitive Guide",// 属 性 名 字 里 有 连 字 符 ， 必 须 用 字符 串 表 示 


"for":"all audiences",//"for" 是 保留 字 ， 因 此 必须 用 引号 


author:{// 这 个 属性 的 值 是 一 个 对 象 


firstname:"David",// 注 意 ， 这 里 的 属性 名 都 没有 引号 


surname:"Flanagan" 


在 ECMAScript 5 (以 及 ECMAScript 3 的 一 些 实现 ) 中 ， 保 留 字 可 以 用 
做 不 带 引 号 的 属性 名 。 然 而 对 于 ECMAScript 3 来 说 ， 使 用 保留 字 作 为 
属性 名 必须 使 用 引号 引起 来 。 在 ECMAScript 5 中 ， 对 象 直接 量 中 的 最 
后 一 个 属性 后 的 逗号 将 忽略 ， 且 在 ECMAScript 3 的 大 部 分 实现 中 也 可 
以 忽略 这 个 逗号 ， 但 在 正中 则 报错 。 


对 和 象 直接 量 是 一 个 表达 式 ， 这 个 表达 式 的 每 次 运算 都 创建 并 初始 化 一 
个 新 的 对 象 。 每 次 计算 对 象 直 接 量 的 时 候 ， 也 都 会 计算 它 的 每 个 属性 
的 值 。 也 就 是 说 ， 如 果 在 一 个 重复 调用 的 函数 中 的 循环 体内 使 用 了 对 
象 直接 量 ， 它 将 创建 很 多 新 对 象 ， 并 且 每 次 创建 的 对 象 的 属性 值 也 有 
可 能 不 同 。 

6.1.2 ”通过 new 创 建 对 象 

new 运 算 符 创建 并 初始 化 一 个 新 对 象 。 天 键 字 new 后 跟随 一 个 函数 调 

用 。 这 里 的 函数 称 做 构造 函数 (constructor) ， 构 造 函 数 用 以 初始 化 一 


ee 
数 。 侨 [D: 


var o=new 0bject();// 创 建 一 个 空 对 象 ， 和 {} 一 样 


var a=new Array();// 创 建 一 个 空 数组 ， 和 [] 一 样 


var d=new Date( );// 创 建 一 个 表示 当前 时 间 的 Date 对 和 象 


var r=new RegExp("js");// 创 建 一 个 可 以 进行 模式 匹配 的 EegExp 对 象 


除了 这 些 内 置 构造 画 数 ， 用 自 定义 构造 画 数 来 初始 化 新 对 象 也 是 非常 
常见 的 。 第 9 章 将 详细 讲述 其 中 的 细节 。 


6.1.3 ”原型 


在 讲述 第 三 种 对 象 创 建 技术 之 前 ， 我 们 应 当 首 移 解释 一 下 原型 。 每 一 
个 JavaScript 对 象 (null 除 外 ) 都 和 男 一 个 对 象 相 关联 。“ 男 一 个 ”对 象 
不是 我 们 熟知 的 原型 ， 每 一 个 对 象 都 从 原型 继承 属性 。 


所 有 通过 对 象 直 接 量 创 建 的 对 象 都 具有 同一 个 原型 对 象 ， 并 可 以 通过 
JavaScript 代 码 Object.prototype 获 得 对 原型 对 象 的 引用 。 通 过 关键 字 
new 和 构造 贸 数 调用 创建 的 对 象 的 原型 就 是 构造 画 数 的 prototype 属 性 的 
值 。 因 此 ， 同 使 用 {} 创 建 对 象 一 样 ， 通 过 new ObjectO 创 建 的 对 象 也 继 
承 目 Object.prototype。 同 样 ， 通 过 new Array0 创 建 的 对 象 的 原型 就 是 
Array.prototype， 通 过 new Date() 创 建 的 对 象 的 原型 就 是 

Date.prototype ° 


没有 原型 的 对 象 为 数 不 多 ，Object.prototype 束 是 其 中 之 一 。 它 不 继承 
任何 属性 。 其 他 原型 对 象 都 是 普通 对 象 ， 普 通 对 象 都 具有 原型 。 所 有 
的 内 置 构造 函数 〈 以 及 大 部 分 目 定 义 的 构造 函数 ) 都 具有 一 个 继承 上 自 
Object.prototype 的 原型 。 例 如 ，Date.prototype 的 属性 继承 目 
Object.prototype， 因 此 由 new DateO 创 建 的 Date 对 象 的 属性 同时 继承 目 
Date.prototype 和 Object.prototype。 这 一 系列 链接 的 原型 对 象 承 是 所 谓 
的 “原型 链 ” (prototype chain) 。 


6.2.2 节 讲述 属性 继承 的 工作 机 制 。6.8.1 市 将 会 讲 到 如 何 获 取 对 象 的 原 
型 。 第 9 章 将 会 更 详细 地 讨论 原型 和 构造 琅 数 ， 包 括 如 何 通 过 编写 构造 
函数 定义 对 象 的 “类 ”， 以 及 给 构造 画 数 的 prototype 属 性 赋值 可 以 让 

其 “实例 ”直接 使 用 这 个 原型 上 的 属性 和 方法 。 


6.1.4 Object.createl() 


ECMAScript 5 定义 了 一 个 名 为 Object.create() 的 方法 ， 它 创建 一 个 新 对 
象 ， 其 中 第 一 个 参数 是 这 个 对 象 的 原型 。Object.create() 提 供 第 二 个 可 
、 用 以 对 对 象 的 属性 进行 进一步 描述 。6.7 节 会 详细 讲述 第 二 个 
Object.create0) 是 一 个 静态 函数 ， 而 不 是 提供 给 某 个 对 象 调用 的 方法 。 
使 用 它 的 方法 很 简单 ， 只 须 传 入 所 需 的 原型 对 象 即 可 : 


Ea 


var 01=0bject.create({x:1,y:2});//0i1 继 承 了 属 ' 


[还 


Ex 和 y 


可 以 通过 传 入 参数 null 来 创建 一 个 没有 原型 的 新 对 象 ， 但 通过 这 种 方 
式 创建 的 对 象 不 会 继承 任何 东西 ， 甚 至 不 包括 基础 方法 ， 比 如 
toString0， 也 束 是 说 ， 它 将 不 能 和 “+? 运 算 符 一 起 正 荫 工作: 


生 和 方法 


可 
el 
[ 京 


var 02=0bject.create(null);//02 不 继承 任何 属 | 


如 栗 想 创建 种 一 个 普通 的 空 对 象 比 如 通过 {} 或 new ObjectO 创 建 的 对 
象 ) ， 需要 传 入 Obj ect.prototype: 


var 03=0bject.create(Object.prototype);//03 和 {} 和 new 0bject() 一 样 


可 以 通过 任意 原型 创建 新 对 象 ( 换 句 话说 ， 可 以 使 任意 对 象 可 继 
承 ) ， 这 是 一 个 强大 的 特性 。 在 ECMAScript 3 中 可 以 用 类 似 例 6-1 中 的 
代码 来 模拟 原型 继承 [4 


例 6-1: 通过 原型 继承 创建 一 个 新 对 象 


//inherit( ) 返 回 了 一 个 继承 


原型 对 象 p 的 属性 的 新 对 象 


// 这 里 使 用 ECMAScript 5 中 的 0bject .create( ) 画 数 (如 果 存 在 的 话 ) 


// 如 果 不 存在 object .create( )， 则 退化 使 用 其 他 方法 


function inherit(p){ 


if(p==nul1L)throw TypeError();//p 是 一 个 对 象 ， 但 不 能 是 null 


if(0bject.create)// 如 果 0bject.create( ) 存 在 


它 


return 0bject.create(p);// 直 接 使 


var t=typeof p;// 和 否则 进行 进一步 检 沈 


if(t!=="object"&&t!=="function")throw TypeError(); 


function f(){f}，; /7 定义 一 个 空 构造 函数 


f.prototype=p;// 将 其 原型 属性 设置 为 p 


return new f();// 使 用 f( ) 创 建 p 的 继承 对 象 


} 


在 看 完 第 9 章 关 于 构造 钞 数 的 内 容 后 ， 例 6-1 中 的 inherit0 芳 数 会 更 容易 
理解 。 现 在 只 要 知道 它 返回 的 新 对 象 继承 了 参数 对 象 的 属性 加 可 以 
了 了。 注意，inheritO 并 不 能 完全 代替 Object.create(0)， 它 不 能 通过 传 入 
null 原 型 来 创建 对 象 ， 而 且 不 能 接收 可 选 的 第 二 个 参数 。 不 过 我 们 仍 
会 在 本 章 和 第 9 章 的 示例 代码 中 多 次 用 到 inheritO 。 


inheritO 函 数 的 其 中 一 个 用 途 就 是 防止 库 函 数 无 意 间 〈 非 恶意 地 ) 修改 
那些 不 受 你 控制 的 对 象 。 不 是 将 对 象 直接 作为 参数 传 入 函数 ， 而 是 将 
它 的 继承 对 象 传 入 函数 。 当 函数 读 取 继 承 对 象 的 属性 时 ， 实 际 上 读 取 
的 是 继承 来 的 值 。 如 采 给 继承 对 和 象 的 属性 赋值 ， 则 这 些 属性 只 会 影响 
这 个 继承 对 象 目 喘 ， 而 不 是 原始 对 象 : 


var o={x:"don't change this value"}; 


library_function(inherit(0));// 防 止 对 o 的 意外 修改 


了 解 其 工作 原理 ， 需 要 首先 了 解 JavaScript 中 属性 的 查询 和 设置 机 制 。 
信人 下 水 D3 


6.2 属性 的 查询 和 设置 


4.4 广 已 经 提 人 到 ， 可 以 通过 点 (.) 或 方 括号 (中 运算 符 来 获取 属性 的 值 。 运 
算 符 左 侧 应 当 是 一 个 表达 式 ， 它 返回 一 个 对 象 。 对 于 点 () 来 说 ， 右 侧 
必须 是 一 个 以 属性 名 称 命名 的 简单 标识 符 。 对 于 方 括号 来 说 ([])， 方 括 
2 站 计算 结果 为 字符 串 的 表达 式 ， 这 个 字符 串 束 是 属性 的 
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var author=book.author;// 得 到 book 的 "author" 属 性 
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var title=book["main title"]// 得 到 book 的 "main title" 属 性 


和 查询 属性 值 的 写法 一 样 ， 通 过 点 和 方 括号 也 可 以 创建 属性 或 给 属性 
赋值 ， 但 需要 将 它们 放 在 赋值 表达 式 的 左 侧 : 


book.edition=6;// 给 book 创 建 一 个 名 为 "edition" 的 属性 


证 


book["main title"]="ECMAScript";// 给 "main title" 属 性 赋值 


在 ECMAScript 3 中 ， 点 运算 符 后 的 标识 符 不 能 是 保留 字 ， 比 如 ，o.for 
或 o.class 是 非法 的 ， 因 为 for 是 JavaScript 的 天 键 字 ，class 是 保留 字 。 如 
果 一 个 对 象 的 属性 名 是 保留 字 ， 则 必须 使 用 方 括 号 的 形式 访问 它们 ， 
比如 of["for"] 和 o["class"]。ECMAScript 5 对 此 放宽 了 限制 (包括 
ECMAScript 3 的 某 些 实现 ) ， 可 以 在 点 运算 符 后 直接 使 用 保留 字 。 


当 使 用 方 括号 时 ， 我 们 说 方 括号 内 的 表达 式 必 须 返 回 字 符 串 。 其 实 更 
严格 地 讲 ， 表 达 式 必须 返回 字符 串 或 返回 一 个 可 以 转换 为 字符 串 的 
I 这 情况 象 是 非常 
利 见 的 。 


6.2.1 ”作为 天 联 数组 的 对 和 象 
上 文 提 到 ， 下 面 两 个 JavaScript 表 达 式 的 值 相同 : 


object .property 


object["property"] 


第 一 种 语法 使 用 点 运算 符 和 一 个 标识 符 ， 这 和 C 和 Java 中 访问 一 个 结构 
体 或 对 象 的 静态 字段 非常 类 似 。 第 二 种 语法 使 用 方 括号 和 一 个 字符 
串 ， 看 起 来 更 像 数 组 ， 只 是 这 个 数组 元 素 是 通过 字符 串 索 引 而 不 是 数 
字 索 引 。 这 种 数组 束 是 我 们 所 说 的 关联 数组 (associative array) ， 也 
称 做 散 列 、 了 映射 或 字典 (dictionary) 。 JavaScript 对 象 都 是 关联 数组 ， 
本 节 将 讨论 它 的 重要 性 。 


在 C、C++ 和 Java 和 一 些 强 类 型 (strong typed) 中 -语言 中 ， 对 象 只 能 拥有 
固定 数目 的 属性 ， 并 且 这 些 属性 名 称 必 须 提 前 定义 好 。 由 于 JavaScript 
是 弱 类 型 语言 ， 因 此 不 必 尊 循 这 条 规定 ， 在 任何 对 象 中 程序 都 可 以 创 
建 任意 数量 的 属性 [外 。 但 当 通 过 点 运算 符 (.) 访 问 对 象 的 属性 时 ， 属 性 
名 用 一 个 标识 符 来 表示 。 标 识 符 必须 直接 出 现在 JavaScript 程 序 中 ， 它 
们 不 是 数据 类 型 ， 因 此 程序 无 法 修改 它们 Sl。 


肥 过 来 讲 ， 当 通过 [来 访问 对 象 的 属性 时 ， 属 性 名 通过 字符 串 来 表 
示 。 字 符 串 是 JavaScript 的 数据 类 型 ， 在 程序 运行 时 可 以 修改 和 创建 它 
们 。 因 此 ， 可 以 在 JavaScript 中 使 用 下 面 这 种 代码 : 


var addr=""， 
for(i=0;i<4;i++){ 


addr+=customer["address"+i]+'\n';} 


这 段 代码 读 取 customer 对 象 的 address0 、 address1、address2 和 address3 
属性 ， 并 将 它们 连接 起 来 。 


这 个 例子 主要 说 明了 使 用 数组 写法 和 用 字符 第 表达 式 来 访问 对 象 属性 

的 灵活 性 。 这 段 代码 也 可 以 通过 点 运算 符 来 重 写 ， 但 是 很 多 场景 只 能 

使 用 数组 写法 来 完成 。 假 设 你 正在 写 一 个 程序 ， 这 个 程序 利用 网 络 资 

产 计 算 当 前 用 户 股 票 市 场 投 资 的 金额 。 程序 允许 用 户 输 入 每 只 股票 的 

名 称 和 购 股 份额 。 该 程序 使 用 名 为 portfolio 的 对 象 来 存储 这 些 信息 。 
只 股票 在 这 个 对 象 中 都 有 对 应 的 属性 ， 属 性 名 称 瑟 是 股票 名 称 ， 属 性 

值 就 是 购 股 数量 ， 例 如 ， 如 采用 户 持 有 IBM 的 50 股 ， 那 么 portfolio.ibm 
属性 的 值 天 为 50。 


下 面 是 程序 的 部 分 代码 ， 这 个 函数 用 来 给 portifolio 深 加 新 的 股票 : 


function addstock(portfolio, stockname, shares)t{ 
portfolio[stockname]=shares; 


} 


由 于 用 户 是 在 程序 运行 时 输入 股票 名 称 ， 因 此 在 之 前 无 法 得 知 这 些 股 
票 的 名 称 是 什么 。 而 由 于 在 写 程序 的 时 候 不 知道 属性 名 称 ， 因 此 无 法 
通过 点 运算 符 (.) 来 访问 对 象 portfolio 的 属性 。 但 可 以 使 用 [] 运 算 符 ， 
为 它 使 用 字符 串 值 (字符 串 值 是 动态 的 ， 可 以 在 运行 时 更 改 ) 而 不 是 
0 (标识 符 是 静态 的 ， 必 须 写 死 在 程序 中 ) 作为 索引 对 属性 进行 
访问 。 

第 5 章 介 绍 了 fovin 循 环 (6.5 节 还 会 进一步 介绍 ) 。 当 使 用 for/i n 循 环 


遍历 天 联 数 组 时 ， 就 可 以 清晰 地 体会 到 for/in 的 强大 之 处 。 下 面 的 例子 
瓯 是 利用 fovin 计 算 portfolio 的 总 计 值 : 


function getvalue(portfolio)t{ 


Var total=0.0; 


for(stock :in portfolio){// 遍 历 portfolio 中 的 每 只 股票 


var shares=portfo1lio[stock];// 得 至 


te 


每 只 股票 的 份额 


var price=getquote(stock);// 查 找 股票 价格 


total+=shares*price;// 将 结果 累加 至 total 中 


} 


return total;// 返 回 total 的 值 


} 


6.2.2 ”继承 


JavaScript 对 象 具有 “ 自 有 属性 ”(own property) ， 也 有 一 些 属性 是 从 原 
型 对 象 继承 而 来 的 。 为 了 更 好 地 理解 这 种 继承 ， 必 须 更 深入 地 了 解 属 
性 访问 的 细节 。 本 和 中 的 许多 示例 代码 借用 了 例 6-1 中 的 inheritO) 画 

数 ， 通 过 给 它 传 入 指定 原型 对 象 来 创建 实例 。 


假设 要 查询 对 象 的 属性 x， 如 果 o 中 不 存在 x， 那 么 将 会 继续 在 o 的 原型 
对 象 中 查询 属性 x。 如 果 原 型 对 象 中 也 没有 x， 但 这 个 原型 对 象 也 有 原 
型 ， 那 么 继续 在 这 个 原型 对 象 的 原型 上 执行 查询 ， 直 到 找到 x 或 者 查找 
到 一 个 原型 是 null 的 对 象 为 止 。 可 以 看 到 ， 对 和 象 的 原型 属性 构成 了 一 
个 “ 链 ”， 通 过 这 个 “ 链 ” 可 以 实现 属性 的 继承 。 


var 0={}//0 从 0bject prototype 继承 对 象 的 方法 


0.X=1;// 给 o 定 义 一 个 属性 x 


var p=inherit(0);//p 继 承 o 和 0bject.prototype 


p.y=2;// 给 p 定 义 一 个 属性 y 


var q=inherit(p);//q 继 承 p、o 和 0bject.prototype 


q.Z=3;// 给 q 定 义 一 个 属性 z 


var Ss=q.toString();//toString 继 承 自 Object.prototype 


q .Xtq.y//=>3:;x 和 y 分 别 继承 自 o 和 p 


现在 假设 给 对 象 的 属性 x 赋值 ， 如 采 o 中 已 经 有 属性 x (这 个 属性 不 是 
继承 来 的 ， 那 么 这 个 赋值 操作 只 改变 这 个 已 有 属性 x 的 值 。 如 果 o 中 
不 存在 属性 x， 那 么 赋值 操作 给 o 添 加 一 个 新 属性 x。 如 有 宁 之 前 o 继 厌 目 
属性 x， 那 么 这 个 继承 的 属性 束 被 新 创建 的 同名 属性 覆 六 了。 


属性 赋值 操作 首先 检查 原型 链 ， 以 此 判定 是 否 允 许 赋值 操作 。 例 如 ， 
如 果 o 继 承 自 一 个 只 读 属 性 x， 那 么 赋值 操作 是 不 允许 的 〈6.2.3 节 将 对 
此 进行 详细 讨论 ) 。 如 果 人 允许 属性 赋值 操作 ， 它 也 总 是 在 原始 对 象 上 
创建 属性 或 对 已 有 的 属性 赋值 ， 而 不 会 去 修改 原型 链 。 在 JavaScript 
中 ， 只 有 在 查询 属性 时 才 会 体会 到 继承 的 存在 ， 而 设置 属性 则 和 继承 
无 关 ， 这 是 JavaScript 的 一 个 重要 特性 ， 该 特性 让 程序 员 可 以 有 选择 地 
窗 盖 (override) 继承 的 属性 。 


var unitcircle={r:1};// 一 个 用 来 继承 的 对 象 


二 


var c=inherit(unitcircle);//c 继 承 属 1 


[还 


Er 


c.X=1;c.y=1;//c 定 义 两 个 属性 


c .r=2;//c 禾 盖 继 承 来 的 属性 


unitcircle.,r;//=>1， 原 型 对 象 没 有 修改 


属性 赋值 要 么 失败 ， 要 么 创建 一 个 属性 ， 要 么 在 原始 对 象 中 设置 属 
性 ， 但 有 一 个 例外 ， 如 果 o 继 承 目 属性 x， 而 这 个 属性 是 一 个 具有 setter 
方法 的 accessor 属 性 (参照 6.6 节 ) ， 那 么 这 时 将 调用 setter 方 法 而 不 是 
给 o 创 建 一 个 属性 x。 需 要 注意 的 是 ，setter 方 法 是 由 对 象 o 调 用 的 ， 而 
不 是 定义 这 个 属性 的 原型 对 象 调用 的 。 因 此 如 果 setter 方 法 定义 任意 属 
性 ， 这 个 操作 只 是 针对 o 本 身 ， 并 不 会 修改 原型 链 。 


6.2.3 ”属性 访问 错误 


属性 访问 并 不 总 是 返回 或 设置 一 个 值 。 本 节 讲 述 查询 或 设置 属性 时 的 
一 些 出 错 情况 。 
查询 一 个 不 存在 的 属性 并 不 会 报错 ， 如 果 在 对 象 自 身 的 属性 或 继承 的 


属性 中 均 未 找到 属性 x， 属 性 访问 表达 式 o.x 返 回 undefined。 回 想 一 下 
我 们 的 book 对 象 有 属性 "sub-title"， 而 没有 属性 "subtitle": 


book.subtitle;//=>undefined: 属 性 不 存在 


但 是 ， 如 果 对 和 象 不 存在 ， 那 么 试图 查询 这 个 不 存在 的 对 象 的 属性 就 会 
I ee 属性 ， 因 此 查询 这 些 值 的 属性 会 报 
背 ， 接 上 例 : 


// 抛 出 一 个 类 型 错误 异常 ，undefined 没 有 length 属 性 


var len=book.subtitle.length; 


除非 确定 book 和 book.subtitle 都 是 (或 在 行为 上 ) 对 象 ， 否 则 不 能 这 样 
a 因为 这 样 会 报错 ， 下 面 提供 了 两 种 避免 
背 的 方法 : 


// 一 种 元 余 但 很 易 懂 的 方法 


var len=undefined; 


if(book){ 


if(book.subtitle)len=book.subtitle.1length,; 


} 


// 一 种 更 简练 的 常用 方法 ， 获 取 subtitle 的 length 属 性 或 undefined 


var len=book&&book.subtitle&&book.subtitle.1length; 


为 了 理解 为 什么 这 里 的 第 二 种 方法 可 以 避免 类 型 错误 异常 ， 可 以 参照 
4.10.1 节 中 关于 色色 运算 符 的 短路 行为 。 


当然 ， 给 null 和 undefined 设 置 属性 也 会 报 类 型 错误 。 给 其 他 值 设置 属 
性 也 不 总 是 成 功 ， 有 一 些 属性 是 只 读 的 ， 不 能 重新 赋值 ， 有 一 些 对 象 
不 允许 新 增 属性 ， 但 让 人 磊 感 意外 的 是 ， 这 些 设置 属性 的 失败 操作 不 


人 


// 内 置 构造 函数 的 原型 是 只 读 的 


Object,prototype=0;// 赋 值 失 败 ， 但 没 报错 ，0bject .prototype 没 有 修改 


这 是 一 个 历史 遗留 问题 ， 这 个 bug 在 ECMAScript 5 的 严格 模式 中 已 经 修 
。 在 严格 模式 中 ， 任 何 失败 的 属性 设置 操作 都 会 抛 出 一 个 类 型 错误 


& 管 属性 赋值 成 功 或 失败 的 规律 看 起 来 很 侧 单 ， 但 要 摘 述 清楚 并 不 容 
易 。 在 这 些 场景 下 给 对 象 o 设 置 属性 p 会 失败 : 


.0 中 的 属性 p 是 只 读 的 : 不 能 给 只 读 属 性 重新 赋值 (defineProperty0 方 
法 中 有 一 个 例外 ， 可 以 对 可 配置 的 只 读 属 性 重新 赋值 ) 。 


:0 中 的 属性 p 是 继承 属性 ， 且 筷 是 只 读 的 : 不 能 通过 同名 目 有 属性 禾 兰 
只 读 的 继承 属性 。 


.0 中 不 存在 目 有 属性 p: o 没 有 使 用 setter 方 法 继承 属性 p， 并 且 o 的 可 扩 
展 性 (extensible attribute) 是 false 《参照 6.8.3 节 ) 。 如 果 o 中 不 存在 p， 
而 且 没 有 setter 方 法 可 供 调 用 ， 则 p 一 定 会 添加 至 o 中 。 但 如 果 o 不 是 可 
扩展 的 ， 那 么 在 o 中 不 能 定义 新 属性 。 


6.3 删除 属性 
delete 运 算 符 ( 见 4.13.3 节 ) 可 以 删除 对 象 的 属性 。 它 的 操作 数 应 当 是 


一 个 属性 访问 表达 式 。 计 人 感到 意外 的 是 ，delete 只 是 断 开 属性 和 宿主 
对 象 的 联系 ， 而 不 会 去 操作 属性 中 的 属性 [9 


delete book.author;//book 不 再 有 属性 author 


delete book["main title"];//book 也 不 再 有 属性 "main title" 


delete 运 算 符 只 能 删除 自 有 属性 ， 不 能 删除 继承 属性 (要 删除 继承 属性 
必须 从 定义 这 个 属性 的 原型 对 象 上 删除 它 ， 而 且 这 会 影响 到 所 有 继承 


自 这 个 原型 的 对 象 ) 。 


当 delete 表 达 式 删除 成 功 或 没有 任何 副作用 (比如 删除 不 存在 的 属性 ) 
时 ， 它 返回 true。 如 果 delete 后 不 是 一 个 属性 访问 表达 式 ，delete 同 样 返 


[sltrue: 


0={X:1};//o 有 一 个 属性 x， 并 继承 属性 tostring 


delete 0.Xx;// 删 除 x， 返 回 true 


delete 0o,x;// 什 么 都 没 做 (x 已 经 不 存在 了 ) 


， 返 回 true 


delete o.toString;// 什 么 也 没 做 \toString 是 继承 来 的 ) ， 返 回 true 


delete 1;// 无 意义 ， 返 回 true 


delete 不 能 删除 那些 可 配置 性 为 false 的 属性 (尽管 可 以 删除 不 可 扩展 对 
象 的 可 配置 属性 ) 。 某 些 内 置 对 象 的 属性 是 不 可 配置 的 ， 比 如 通过 变 
量 声明 和 函数 声明 创建 的 全 局 对 象 的 属性 。 在 严格 模式 中 ， 删 除 一 个 
不 可 配置 属性 会 报 一 个 类 型 错误 。 在 非 严格 模式 中 (以 及 ECMAScript 
3 中 ) ， 在 这 些 情 况 下 的 delete 操 作 会 返回 false: 


delete 0bject .prototype;// 不 能 删除 ， 


var X=1;// 声 明 一 个 全 局 变量 


delete this.x;// 不 能 删除 这 个 属性 


function f(){}// 声 明 一 个 全 局 画 数 


delete this.f;// 也 不 能 删除 全 局 函数 


属 全 


必 性 是 不 可 配 


当 在 非 严 格 模式 中 删除 全 局 对 象 的 可 配 值 属性 时 ， 可 以 省 略 对 全 局 对 
象 的 引用 ， 直 接 在 delete 操 作 符 后 跟随 有 要 删 除 的 属性 名 即 可 : 


TI 


全 局 属性 (没有 用 var) 


this .x=1;// 创 建 一 个 可 配 


delete x;// 将 它 删除 


然而 在 严格 模式 中 ，delete 后 跟随 一 个 非法 的 操作 数 比如 x) ， 则 会 
报 一 个 语法 错误 ， 因 此 必须 显 式 指定 对 象 及 其 属性 : 


delete x;// 在 严格 模式 下 报 语法 错误 


delete this.x;// 正 常 工作 


6.4 ”检测 属性 


JavaScript 对 象 可 以 看 做 属性 的 集合 ， 我 们 经 常会 检测 集合 中 成 员 的 所 
属 关系 判断 某 个 属性 是 否 存在 于 某 个 对 象 中 。 可 以 通过 in 运 算 

伯 、hasOwnPreperty() 和 propertyIsEnumerable() 方 法 来 完成 这 个 工作 ， 
甚至 仅 通 过 属性 查询 也 可 以 做 到 这 一 点 。 


ip 运算 符 的 左 侧 是 属性 名 《字符 串 ) ， 右 侧 是 对 象 。 如 有 果 对 和 象 的 目 有 
属性 或 继承 属性 中 包含 这 个 属性 则 返回 true: 


var o={x:1} 


"x"in 0;//true: "x" 是 0 的 属性 


= 


"y"in 0;//false:"y" 不 是 o 的 属性 


[还 


[ 弃 


"toString"in 0;//true: 0 继承 toString 属 性 


对 象 的 hasOwnProperty0) 方 法 用 来 检测 给 定 的 名 字 是 否 是 对 象 的 目 有 局 
性 。 对 于 继承 属性 它 将 返回 false: 


Var o={x:1} 


0.hasOownProperty("x");//true: 0 有 一 个 自 有 属性 X 


0.hasownProperty("y");//false: o 中 不 存在 属性 y 


a 
I 


o0.hasownProperty("tostring");//false: toString 是 继承 属性 


propertyIsEnumerable(O) 是 hasOwnProperty0O 的 增强 版 ， 只 有 检测 到 是 目 
有 属性 且 这 个 属性 的 可 枚 举 性 (enumerable attribute) 为 true 时 它 才 返 
回 true。 某 些 内 置 属性 是 不 可 枚 举 的 。 通 常 由 JavaScript 代 码 创 建 的 属 

性 都 是 可 枚 举 的 ， 除 非 在 ECMAScript 5 中 使 用 一 个 特殊 的 方法 来 改变 
属性 的 可 枚 举 性 ， 随 后 会 提 到 : 


Var o=inherit({y:2}); 


0.X=1; 


0.propertyIsEnumerable("x");//true:o 有 一 个 可 枚 举 的 自 有 属性 x 


0.propertyIsEnumerable("y");//false:y 是 继承 来 的 


Object.prototype.propertyIsEnumerable("toString");//false: 不 可 枚 举 


除了 使 用 in 运算 符 之 外 ， 另 一 种 更 简便 的 方法 是 使 用 “44==? 判 断 一 个 属 


性 是 否 是 undefined: 


Var o={x:1} 


A 


0.x!==undefined;//true:0o 中 由 属 


ml 
tt 
x 


0.y!==undefined;//false:o 中 没有 属性 


ms 
< 


HF 


o.toString!==undefined;//true:o 继 承 了 toString 属 性 


然而 有 一 种 场景 只 能 使 用 ip 运算 符 而 不 能 使 用 上 述 属 性 访问 的 方式 。 
下 以 区 分 不 存在 的 属性 和 存在 但 值 为 undefined 的 属性 。 例 如 下 面 的 


var o={fx:undefined}// 属 性 被 显 式 赋 值 为 undefined 


0.x!==undefined//false: 属性 存在 ， 但 值 为 undefined 


o.y!==undefined//false: 属性 不 存在 


"x"in 0//true: 属性 存在 


"y"in 0//false: 属性 不 存在 


delete 0o.x;// 删 除了 属性 x 


"x"in 0//false: 属性 不 再 存在 


注意 ， 上 还 代码 中 使 用 的 是 “!==” 运 算 符 ， 而 不 是 “1=”。“!==” 可 以 区 分 
undefined 和 null。 有 了 时 则 不 必 作 这 种 区 分 : 


// 如 果 o 中 含有 属性 x， 且 x 的 值 不 是 null 或 undefined，0o.,x 乘 以 2. 


if(0.x!=null)o,x*=2;// 如 果 o 中 含有 属性 x， 且 x 的 值 不 能 转换 为 false，o ,x 乘 以 2. 


// 如 果 x 是 undefined、null、false、""、0 或 NaN， 则 它 保持 不 变 


If(o,X)0.X*=2) 


6.5” 枚 举 属性 


除了 检测 对 象 的 属性 是 否 存 在 ， 我 们 还 会 经 常 裔 历 对 象 的 属性 。 通 常 
使 用 fovin 循 环 遍历 ，ECMAScript 5 提供 了 两 个 更 好 用 的 替代 方案 。 


5.5.4 ” 节 讨 论 过 for/i n 循 环 ，for/i n 循 环 可 以 在 循环 体 中 遍历 对 象 中 所 
有 可 枚 举 的 属性 (包括 自 有 属性 和 继承 的 属性 ) ， 把 属性 名 称 赋值 给 
循环 变量 。 对 象 继承 的 内 置 方法 不 可 枚 举 的 ， 但 在 代码 中 给 对 象 添加 
的 属性 都 是 可 枚 举 的 (除非 用 下 文中 提 到 的 一 个 方法 将 它们 转换 为 不 
可 枚 举 的 ) 。 例 如 : 


var 0={X:1,y:2,z:3};// 三 个 可 枚 举 的 自 有 属性 


0.propertyIsEnumerable("toString")//=>false, 不 可 枚 举 


for(p in o)// 遍 历 属 性 


console.1og(p);// 输 出 x、y 和 Zz， 不 会 输出 toString 


有 许多 实用 工具 库 给 Object.prototype 添 加 了 新 的 方法 或 属性 ， 这 些 方 
法 和 属性 可 以 被 所 有 对 象 继承 并 使 用 。 然 而 在 ECMAScript 5 标准 之 
前 ， 这 些 新 添加 的 方法 是 不 能 定义 为 不 可 枚 举 的 ， 因 此 它们 都 可 以 在 
forin 循 环 中 枚 举 出 来 。 为 了 避免 这 种 情况 ， 需 要 过 滤 fovin 循 环 返回 的 
属性 ， 下 面 两 种 方式 是 最 常见 的 : 


for(p in o){ 


人 


if(!o.hasownProperty(p))continue;// 跳 过 继承 的 属性 


| 


} 


for(p in 0){ 


} 


例 6-2 定 义 了 一 些 有 用 的 工具 函数 来 操控 对 象 的 属性 ， 这 些 函 数 用 到 了 
forvin 循 环 。 实 际 上 extend0 画 数 经常 出 现在 JavaScript 实 用 工具 库 中 总 


例 6-2: 用 来 枚 举 属性 的 对 象 工具 函数 


A 


* 把 p 中 的 可 枚 举 属性 复制 


到 o 中 ， 


返回 o 


* 如 果 o 和 p 中 含有 


时 性 ， 则 禾 盖 o 中 的 属 


mm 
bn 
I 
Yt 


* 这 个 画 数 


不 处 至 


getter 和 setter 以 及 复制 属性 
*/ 


function extend(o,p){ 


for(prop in p){// 遍 历 p 


的 所 有 属性 
o[prop]=p[prop];// 将 属性 添加 至 o 中 
} 
return o; 
}/* 
* 将 p 中 的 可 枚 举 属性 复制 至 o 中 ， 并 返回 o 
* 如 果 o 和 p 中 有 同名 的 属性 ，o 中 的 属性 将 不 受 影响 
* 这 个 函数 并 不 处 理 getter 和 setter 以 及 复制 属性 
*/ 


function merge(o,p)t{ 


for(prop in p){// 人 遍历 p 中 的 所 有 属性 


if(o.hasownProperty[prop] )continue;// 过 滤 掉 


已 经 


生 o 中 存在 的 


o[prop]=p[prop];// 将 


属性 添加 至 


全 0 中 


return 0) 


}/* 
* 如 果 o 中 的 属性 在 p 中 没有 同名 属性 ， 则 从 o 中 删除 这 个 属性 
* 返 回 0 
A 
function restrict(o,p)t{ 
for(prop in o){// 遍 历 o 中 的 所 有 属性 
if(!(prop in p))delete o[prop];// 如 果 在 p 中 不 存在 ， 则 删除 之 
} 
return o; 
}/* 
* 如 果 o 中 的 属性 在 p 中 存在 同名 属性 ， 则 从 o 中 删除 这 个 属性 
* 返 回 0 
这 
function subtract(o,p)t{ 
for(prop in p){// 遍 历 p 中 的 所 有 属性 
delete o[prop];// 从 o 中 删除 (删除 一 个 不 存在 的 属 怕 


E 不 会 报错 ) 


return o; 


}/™ 


* 返 回 一 个 3 


所 对 象 ， 这 个 对 象 同时 拥有 o 的 属性 和 p 的 属性 


* 如 果 o 和 p 中 重 包 属 性 ， 审 


*/ 


function union(o,p){return extend(extend({},0),p);}/* 


* 返 回 一 个 新 对 象 ， 这 个 对 象 拥有 同时 在 oO 和 p 中 出 现 的 属性 
* 很 像 求 o 和 p 的 交集 ， 但 p 中 属性 的 值 被 忽略 
*/ 


function intersection(o,p)t{return restrict(extend({},0),p);}/* 


* 反 也 


一 个 数组 ， 这 个 数组 包含 的 是 oj 


FP 可 枚 举 的 自 有 属性 的 名 人 


A 
function keys(o){ 


if(typeof o!==" 


object")throw TypeError();// 参 数 必须 是 对 象 


var result=[];// 将 要 返回 的 数组 


for(var prop in 0){// 人 遍历 所 有 可 枚 举 的 属性 


if(o.hasOwnpProperty(prop))//} 


剖 断 是 否 是 自 有 属性 


result .push(prop);// 将 属性 名 添加 至 数组 中 


ed 


return result;// 返 回 这 个 数组 


ECMAScript 5 定义 了 两 个 用 以 枚 举 属性 名 称 的 函 
数 。 第 一 个 是 Object.keys()， 它 返回 一 个 数组 ， 这 个 数组 由 对 象 中 可 榴 
兴 自 有 禹 性 的 名 称 组 成 ， 它 的 工作 原理 和 例 6-2 中 的 工具 函数 keys() 


ECMAScript 5 中 第 二 个 枚 举 属 性 的 函数 是 
Object.getOwnPropertyNames()， 它 和 Ojbect.keys() 类 似 ， 只 是 它 运 回 对 
象 的 所 有 目 有 属性 的 名 称 ， 而 不 仅仅 是 可 枚 举 的 属性 。 在 ECMAScript 
3 中 是 无 法 实现 的 类 似 的 函 数 且 ， 因为 ECMAScript 3 中 没有 提供 任何 方 
法 来 获取 对 象 不 可 枚 举 的 属性 


6.6 属性 getter 和 setter 


我 们 知道 ， 对 象 属性 是 由 名 字 、 值 和 一 组 特性 (attribute) 构成 的 。 在 
ECMAScript518- 中 ， 属 性 值 可 以 用 一 个 或 两 个 方法 砍 代 ， 这 两 个 方法 
丈 是 getter 和 setter。 由 getter 和 setter 定 义 的 属性 称 做 * 存 取 髓 属 

性 ” (accessor property) ， 它 不 同 于 “数据 属性 ”(data property) ， 数 
据 属性 只 有 一 个 简单 的 值 。 


当 程序 查询 存 取 器 属性 的 值 时 ，JavaScript 调 用 getter 方 法 (无 参数 ) 。 
这 个 方法 的 返回 值 束 是 属性 存 取 表达 式 的 值 。 当 程序 设置 一 个 存 取 器 
属性 的 值 时 ，JavaScript 调 用 setter 方 法 ， 将 赋值 表达 式 右 侧 的 值 当 做 参 
数 传 入 setter。 从 某 种 意义 上 讲 ， 这 个 方法 负责 “设置 "属性 值 。 可 以 名 
略 setter 方 法 的 返回 值 。 


和 数据 属性 不 同 ， 存 取 器 属性 不 具有 可 写 性 (writable attribute) 。 如 

采 属 性 同时 具有 getter 和 和 setter 万 法 ， 那么 它 是 一 个 读 / 写 属性 。 如 果 它 

只 有 getter 方 法 ， 那 么 它 是 一 个 只 读 属性 。 如 果 它 只 有 setter 方 法 ， 那 么 
它 是 一 个 只 写 属 性 (数据 属性 中 有 一 些 例外 ) ， 读 取 只 写 属 性 总 是 返 
[slundefined 。 


Si 辕 性 最 简单 的 方法 十 使 用 对 象 直接 量 语法 的 一 种 扩展 写 
大 


var 0={// 普 通 的 数据 属性 


data_prop:value, // 存 取 器 属性 都 是 成 对 定义 的 函数 


get accessor_prop( ){/* 这 里 是 函数 体 */}， 


set accessor_prop(value){/* 这 里 是 画 数 体 */} 


}; 


存 取 喜 属性 定义 为 一 个 或 两 个 和 属性 同名 的 函数 ， 这 个 函数 定义 没有 
使 用 function 天 键 字 ， 而 是 使 用 get 和 (或 ，set。 注 意 ， 这 里 没有 使 用 
冒号 将 属性 名 和 函数 体 分 隔 开 ， 但 在 函数 体 的 结束 和 下 一 个 方法 或 数 
据 属 性 之 间 有 逗号 分 隔 。 例 如 ， 思 考 下 面 这 个 表示 2D 笛 卡尔 点 坐标 虽 | 
的 对 象 。 它 有 两 个 普通 的 属性 x 和 y 分 别 表示 对 应 点 的 X 坐 标 和 Y 坐 标 ， 
它 还 有 两 个 等 价 的 存 取 器 属性 用 来 表示 点 的 极 坐 标 : 


al 
[Wy 


var p={//x 和 y 是 普通 的 可 读 写 的 数据 属性 


x:1.0, 


y:1.0, /Mr 是 可 读 写 的 存 取 器 属性 ， 它 有 getter 和 setter. 


// 图 数 体 结束 后 不 要 忘记 带 上 逗号 


get r(){return Math.sqrt(this.x*this.x+this.y*this.y);}, 


set r(newvalue){ 


var oldvalue=Math.sqrt(this.x*this.x+this.y*this.y); 


var ratio=newvalue/oldvalue,; 


this.x*=ratio,; 


this.y*=ratio,; 


},//theta 是 只 读 存 取 器 属性 ， 它 只 有 getter 方 法 


get theta(){return Math.atan2(this.y,this.x);} 


}; 


注意 在 这 上 段 代 码 中 getter 和 setter 里 this 关 键 字 的 用 法 。JavaScript 把 这 些 
函数 当做 对 象 的 方法 来 调用 ， 也 就 是 说 ， 在 函数 体内 的 this 指 癌 表 示 这 
个 点 的 对 象 ， 因 此 ，r 属 性 的 getter 方 法 可 以 通过 this.x 和 this.y 引 用 x 和 和 y 
属性 。8.2.2 节 会 对 方法 和 this 关 键 字 做 更 详尽 的 讲述 。 


和 数据 属性 一 样 ， 存 取 喜 属性 是 可 以 继承 的 ， 因 此 可 以 将 上 述 代 码 中 
的 对 象 p 当 做 另 一 个 “点 ”的 原型 。 可 以 给 新 对 象 定义 它 的 x 和 y 属 性 ， 但 
r 和 theta 属 性 是 继承 来 的 : 


var q=inherit(p);// 创 建 一 个 继承 getter 和 setter 的 新 对 象 


q .X=1,q .y=1;// 给 q 添 加 两 个 属性 


[还 


console.1og(q.r);// 可 以 使 用 继承 的 存 取 器 属性 


console.1og(q.theta) 


这 段 代码 使 用 存 取 器 属性 定义 API，API 提 供 了 表示 同一 组 数据 的 两 种 
方法 ( 币 卡 尔 坐 标 系 表示 法 和 极 坐 标 系 表示 法 ) 。 还 有 很 多 场景 可 以 
， ， 比 如 智能 检测 属性 的 写 入 值 以 及 在 每 次 属性 读 取 时 
巡回 个 同 但 : 


// 这 个 对 象 产 生 严格 自 增 的 序列 号 


下 


包含 下 一 个 序列 号 


var serialnum={// 这 个 数据 属 


//$ 符 号 暗示 这 个 属性 是 一 个 私有 属性 


$n:0,// 返 回 当 前 值 ， 然 后 自 增 


get next(){freturn this.$n++;},// 给 n 设 置 新 的 值 ， 但 只 有 当 它 比 当 前 值 大 时 才 设 置 成 功 


Set next(n){ 


if(n>=this.$n)this.$n=n; 


else throw" 序 列 号 的 值 不 能 比 当前 值 小 "; 


}; 


最 后 我 们 再 来 看 一 个 例子 ， 这 个 例子 使 用 geter 广 法 实现 一 种 "神奇 的 
读 性 : 


// 这 个 对 象 有 一 个 可 以 返回 随机 数 的 存 取 器 属性 


el 
肾 


// 例 如 ， 表 达 式 "random.octet" 产 生 一 个 随机 数 


// 每 次 产生 的 随机 数 都 在 0~255 之 间 


var random={ 


get octet(){return Math.floor(Math.random( )*256);}, 


get uint16(){return Math.floor(Math.random( )*65536);}, 


get int16(){return Math.floor(Math.random( )*65536)-32768;} 


}; 


本 节 介 绍 了 如 何 给 对 象 直接 量 定 义 存 取 紫 属性 。 下 一 市 会 介绍 如 何 给 
一 个 已 经 存在 的 对 象 添加 一 个 存 取 絮 属 性 。 


6.7 ”属性 的 特性 


除了 包含 名 字 和 值 之 外 ， 属 性 还 包含 一 些 标识 它们 可 写 、 可 枚 举 和 可 
配置 的 特性 。 在 ECMAScript 3 中 无 法 设置 这 些 特性 ， 所 有 通过 
ECMAScript 3 的 程序 创建 的 属性 都 是 可 写 的 、 可 枚 举 的 和 可 配置 的 ， 
且 无 法 对 这 些 特性 做 修改 。 本 节 将 讲述 ECMAScript 5 中 查询 和 设置 这 
些 属性 特性 的 API。 这 些 API 对 于 库 的 开发 者 来 说 非常 重要 ， 因 为 : 


可 以 通过 这 些 API 给 原型 对 象 添加 方法 ， 并 将 它们 设置 成 不 可 枚 举 
的 ， 这 让 它们 看 起 来 更 像 内 置 方法 。 


0 借 此 “锁定 ”这 
个 对 象 。 


在 本 节 里 ， 我 们 将 存 取 咒 属性 的 getter 和 setter 方 法 看 成 是 属性 的 特性 。 
按照 这 个 逻辑 ， 我 们 也 可 以 把 数据 属性 的 值 同样 看 做 属性 的 特性 。 
此 ， 可 以 认为 一 个 属性 包含 一 个 名 字 和 4 个 特性 。 数 据 属性 的 4 个 特性 
分 别 是 它 的 值 (value) 、 可 写 性 (writable) 、 可 枚 举 性 

(enumerable) 和 可 配置 性 (configurable) 。 存 取 器 属性 不 具有 值 

(value) 特性 和 可 写 性 ， 它 们 的 可 写 性 是 由 setter 方 法 存在 与 否决 定 
的 。 因 此 存 取 器 属性 的 4 个 特性 是 读 取 (get) 、 写 入 (set) 、 可 枚 举 
性 和 可 配置 性 。 


为 了 实现 属性 特性 的 查询 和 设置 操作 ，ECMAScript 5 中 定义 了 一 个 名 
为 “属性 描述 符 ” (property descriptor) 的 对 象 ， 这 个 对 象 代表 那 4 个 特 
性 。 摘 述 符 对 象 的 属性 和 它们 所 摘 述 的 属性 特性 是 同名 的 。 因 此 ， 数 
据 属 性 的 描述 符 对 象 的 属性 有 value、writable、enumerable 和 
configurable。 存 取 需 属性 的 朱 述 符 对 象 则 用 get 属 性 和 set 属 性 代替 
value 和 writable。 其 中 writable、enumerable 和 configurable 都 是 布尔 值 ， 
当然 ，get 属 性 和 set 属 性 是 函数 值 。 


通过 调用 Object.getOwnPropertyDescriptor() 可 以 获得 某 个 对 象 特定 属性 
的 属性 描述 符 : 


// 返 回 {value:1,writable:true,enumerable:true,configurable:true} 


Ek 


0bject .getownPropertyDescriptor({x:1}, "x");// 查 询 上 文中 定义 的 randam 对 象 的 octet 属 性 


| 


// 返 回 {get:/*func*/,set:undefined,enumerable:true,configurable:true} 


Object.getownPropertyDescriptor(random, "octet");// 对 于 继承 属性 和 不 存在 的 属性 ， 返 下 


undefined 


0bject.getownPropertyDescriptor({}, "x");//undefined， 没有 这 个 属性 


0bject.getOwnPropertyDescriptor({}, "toString");//undefined， 继 承 属性 


从 国 数 名 字 束 可 以 看 出 ，Object.getOwnPropertyDescriptorO 只 能 得 到 目 
有 属性 的 描述 符 。 要 想 获 得 继承 属性 的 特性 ， 需 要 遍历 原型 链 (参照 
6.8.1 节 的 Object.getPrototypeOfO) 。 


要 想 设 置 属性 的 特性 ， 或 者 想 让 新 建 属性 具有 某 种 特性 ， 则 需要 调用 
Object.definePeoperty0， 传 入 要 修改 的 对 象 、 要 创建 或 修改 的 属性 的 
名 称 以 及 属性 描述 符 对 象 : 


var o={]};// 创 建 一 个 空 对 象 


// 添 加 一 个 不 可 枚 举 的 数据 属性 x， 并 赋值 为 


Object .definepProperty(o,"x", {value:1, 


writable:true, 


enumerable:false, 


configurable:true});// 属 性 是 存在 的 ， 但 不 可 枚 举 


0.X;//=>1 


0bject .keys(0)//=>[]// 现 在 对 属性 x 做 修改 ， 让 它 变 为 只 读 


0bject.defineProperty(o,"x", {writable:false});// 试 图 更 改 这 个 属性 的 值 


0 .X=2;// 操 作 失 败 但 不 报错 ， 而 在 严格 模式 中 抛 出 类 型 错误 异常 


0.Xx//=>1// 属 性 依然 是 可 配置 的 ， 因 此 可 以 通过 这 种 方式 对 它 进行 修改 : 


Object ,defineProperty(0，"Xx"v{value:2})， 


0.X//=>2// 现 在 将 x 从 数据 属性 修改 为 存 取 器 属性 


mn 


Object.definepProperty(o,"x", {get:function(){return 0;}}); 


0.xX//=>0 


传 入 Object.defineProperty() 的 属性 摘 述 特 对 象 不 必 包 含 所 有 4 个 特性 。 
对 于 新 创建 的 属性 来 说 ， 默 认 的 特性 值 是 false 或 undefined。 对 于 修改 
的 已 有 属性 来 说 ， 默 认 的 特性 值 没 有 做 任何 修改 。 注 意 ， 这 个 方法 要 
么 修改 已 有 属性 要 么 新 建 自 有 属性 ， 但 不 能 修改 继承 属性 。 


如 果 要 同时 修改 或 创建 多 个 属性 ， 则 需要 使 用 
Object.defineProperties()。 第 一 个 参数 是 要 修改 的 对 象 ， 第 二 个 参数 是 
人 它 包含 要 新 建 或 修改 的 属性 的 名 称 ， 以 及 它们 的 属性 搞 
述 符 ， 例 如 : 


var p=0bject.defineProperties({},{ 


x:{value:1,writable:true,enumerable:true,configurable:true}, 


y:{value:1,writable:true,enumerable:true,configurable:true}, 


ri:{ 


get:function(){return Math.sqrt(this.x*this.x+this.y*this.y)}, 


enumerable:true, 


configurable:true 


} 


}); 


这 段 代码 从 一 个 空 对 象 开 始 ， 然 后 给 它 添加 两 个 数据 属性 和 一 个 只 读 
存 取 器 属性 。 最 终 Object.defineProperties() 返 回 修 改 后 的 对 象 (和 
Object.defineProperty() 一 样 ) 。 


对 于 那些 不 允许 创建 或 修改 的 属性 来 说 ， 如 采用 Object.defineProperty0) 
和 Object.defineProperties() 对 其 操作 (新 建 或 修改 ) 就 会 抛 出 类 型 错误 
异常 ， 比 如 ， 给 一 个 不 可 扩展 的 对 象 (参照 6.8.3 节 ) 新 增 属性 就 会 抛 
出 类 型 错误 异常 。 造 成 这 些 方法 抛 出 类 型 错误 异常 的 其 他 原因 则 和 特 
性 本 号 相关 。 可 写 性 控制 着 对 值 特性 的 修改 。 可 配置 性 控制 着 对 其 他 
特性 (包括 属性 是 否 可 以 删除 ) 的 修改 。 然 而 规则 远 不 止 这 么 简单 ， 
例如 ， 如 宁 属 性 是 可 配置 的 话 ， 则 可 以 修改 不 可 写 属 性 的 值 。 同 样 ， 
如 果 属 性 是 不 可 配置 的 ， 仍 然 可 以 将 可 写 属性 修改 为 不 可 写 属性 。 下 
面 是 完整 的 规则 ， 任 何 对 Object.defineProperty0) 或 
Object.definePropertiesO) 违 反 规 则 的 使 用 都 会 抛 出 类 型 错误 弄 常 : 


-如果 对 象 是 不 可 扩展 的 ， 则 可 以 编辑 已 有 的 目 有 属性 ， 但 不 能 给 它 洪 
加 新 属性 。 


-如 采 属 性 是 不 可 配置 的 ， 则 不 能 修改 它 的 可 配置 性 和 可 枚 举 性 。 


-如 有 条 存 取 才 属 性 是 不 可 配置 的 ， 则 不 能 修改 其 getter 和 setter 方 法 ， 也 
不 能 将 它 转换 为 数据 属性 。 


如 果 数 据 属性 是 不 可 配置 的 ， 则 不 能 将 它 转换 为 存 取 器 属性 。 
将 它 


.如 果 数 据 属性 是 不 可 配置 的 ， 则 不 能 将 它 的 可 写 性 从 false 修 改 为 
true， 但 可 以 从 true 修 改 为 false 。 


-如 采 数 据 属 性 是 不 可 配置 且 不 可 写 的 ， 则 不 能 修改 它 的 值 。 然 而 可 配 
置 但 不 可 写 属性 的 值 是 可 以 修改 的 实际 上 是 先 将 它 标 记 为 可 写 的 ， 
然后 修改 它 的 值 ， 最 后 转换 为 不 可 写 的 ) 。 


例 6-2 中 实现 了 extend0) 范 数 ， 这 个 函数 把 一 个 对 象 的 属性 复制 到 男 一 
个 对 象 中 。 这 个 函数 只 是 简单 地 复制 属性 名 和 值 ， 没 有 复制 属性 的 特 
性 ， 而 且 也 没有 复制 存 取 器 属性 的 getter 和 和 setter 方 法 ， 只 是 将 它们 人 简单 
地 转换 为 静态 的 数据 属性 。 例 6-3 给 出 了 改进 的 extend()， 它 使 用 
Object.getOwnPropertyDescriptor0 和 Object.definePropertyO 对 属性 的 所 
有 特性 进行 复制 。 新 的 extend(0 作 为 不 可 枚 举 属 性 添加 到 


Object.prototype 中 ， 因 此 它 是 Object 上 定义 的 新 方法 ， 而 不 是 一 个 独立 
时 函数 。 


例 6-3: 复制 属性 的 特性 


* 给 Object .prototype 添加 一 个 不 可 枚 举 的 extend ( ) 方 法 


* 这 个 方法 继承 自 调 用 它 的 对 象 ， 将 作为 参数 传 入 的 对 象 的 


el 


性 一 一 复制 


性 的 所 有 特性 ， 除 非 在 目标 对 象 中 存在 同名 的 属性 ， 


* 除 了 值 之 外 ， 也 复制 


mh 


* 参 数 对 象 的 所 有 自 有 对 象 (包括 不 可 枚 举 的 属性 ) 也 会 一 一 复制 。 


eu 


*/ 


Object .definepProperty(Object.prototype, 


"extend", // 定 义 0bject.prototype.extend 


writable:true, 


enumerable:false,// 将 其 定义 为 不 可 枚 举 的 


configurable:true, 


value:function(o){// 值 就 是 这 个 函数 


// 得 到 所 有 的 自 有 属性 ， 包 括 不 可 枚 举 属性 


var names=0bject .getOownPropertyNames(0);// 遍 历 它们 


for(var i=0;i<names.length;i+t+){// 如 果 属 性 已 经 存在 ， 则 跳 过 


if(names[i]in this)continue;// 获 得 o 中 的 属性 的 描述 符 


var desc=0bject.getOwnPropertyDescriptor(o,names[i]);// 用 它 给 this 创 建 一 个 属性 
Object.defineProperty(this,names[i], desc); 

} 

} 


}); 


getter 和 setter 的 老式 API 


可 以 通过 6.6 市 描述 的 对 象 直 接 量 语法 给 新 对 象 定义 存 取 絮 属 性 ， 但 不 
能 查询 属性 的 getter 和 setter 方 法 或 给 已 有 的 对 象 添 加 新 的 存 取 絮 属 性 。 
在 ECMAScript 5 中 ， 可 以 通过 Object.getOwnPropertyDescriptor() 和 
Object.defineProperty0) 来 完成 这 些 工 作 。 


中 态 蝇 已 


在 ECMAScript 5 标准 被 采纳 之 前 ， 大 多 数 JavaScript 的 实现 (IE 浏览 器 
除外 ) 已 经 可 以 支持 对 象 直接 量 语法 中 的 get 和 set 写 法 。 这 些 实现 提供 
了 非 标准 的 老式 API 用 来 查询 和 设置 getter 和 setter。 这 些 API 由 4 个 方法 
组 成 ， 所 有 对 象 都 拥有 这 些 方法 。_lookupGetter 0 和 

_ lookupSetter_() 用 以 返回 一 个 命名 属性 的 getter 和 setter 方 法 。 

_ defineGetter () 和 ”defineSetter (用 以 定义 getter 和 setter， 这 两 个 
函数 的 第 一 个 参数 是 属性 名 字 ， 第 二 个 参数 是 getter 和 setter 方 法 。 这 4 
个 方法 都 是 以 两 条 下 划 线 作 前 经， 两 条 下 划 线 作 后 级 ， 以 表明 它们 是 
非 标 准 的 方法 。 本 书 第 三 部 分 没有 对 非 标 准 的 方法 做 介绍 。 


6.8 对象 的 三 个 属性 

每 一 个 对 象 都 有 与 之 相关 的 原型 (prototype) 、 类 (class) 和 可 扩展 
性 (extensible attribute) 。 下 面 儿 节 将 会 展开 讲述 这 些 属性 有 什么 作 
用 ， 以 及 如 何 查询 和 设置 它们 。 


6.8.1 原型 属性 


对 象 的 原型 属性 是 用 来 继承 属性 的 〈 关 于 原型 和 原型 继承 的 更 多 内 容 
请 参照 6.1.3 有 和 6.2.2) ， 这 个 属性 如 此 重要 ， 以 至 于 我 们 经 常 把 “o 
的 原型 属性 ”直接 叫做 “o 的 原型 ”。 


原型 属性 是 在 实例 对 象 创建 之 初 束 设置 好 的 ， 回 想 一 下 6.1.3 节 提 到 
的 ， 通 过 对 象 直接 量 创建 的 对 象 使 用 Object.prototype 作 为 它们 的 原 
型 。 通 过 new 创 建 的 对 象 使 用 构造 函数 的 prototype 属 性 作为 它们 的 原 
型 。 和 (也 可 以 是 null) 作 
为 它们 的 原型 。 


在 ECMAScript 5 中 ， 将 对 象 作 为 参数 传 入 Object.getPrototypeOfO 可 以 
查询 它 的 原型 。 在 ECMAScript 3 中 ， 则 没有 与 之 等 价 的 函数 ， 但 经 党 
使 用 表达 式 o.constructorprototype 来 检测 一 个 对 象 的 原型 。 通 过 new 表 
达 式 创建 的 对 象 ， 通 党 继承 一 个 constructor 属 性 ， 这 个 属性 指 代 创建 这 
个 对 象 的 构造 画 数 。 更 多 细 市 将 会 放 在 9.2 市 进一步 讨论 ，9.2 广 还 解释 
了 使 用 这 种 方法 来 检测 对 象 原 型 的 方式 并 不 可 靠 的 原因 。 注 意 ， 通 过 
对 象 直 接 量 或 Object.create0 创 建 的 对 象 包含 一 个 名 为 constructor 的 属 
性 ， 这 个 属性 指 代 Object(0 构 造 钞 数 。 因 此 ，constructor.prototype 才 是 
对 象 直接 量 的 真正 的 原型 ， 但 对 于 通过 Object.createO 创 建 的 对 象 则 往 
往 不 是 这 样 。 


要 想 检测 一 个 对 象 是 否 是 另 一 个 对 象 的 原型 (或 处 于 原型 链 中 ) ， 请 
使 用 isPrototypeOfO 方 法 。 例 如 ， 可 以 通过 p.isPrototypeOf(o) 来 检测 p 是 
否 是 0 的 原型 : 


var p={X:1};// 定 义 一 个 原型 对 象 


var 0=0bject.create(p);// 使 用 这 个 原型 创建 一 个 对 象 


p.isPrototype0of(0)//=>true:0o 继 承 自 p 


Object.prototype.isprototypeof(0)//=>true:p 继 承 自 0bject.prototype 


需要 注 章 的 是 ，isPrototypeOf() 汞 数 实现 的 功能 和 instanceof 运 算 符 非常 
类 似 《参照 4.9.4 节 ) 。 


Mozilla 实 现 的 JavaScript (包括 早 些 年 的 Netscape) 对 外 烘 露 了 一 个 专 

门 命名 为 _proto_ 的 属性 ， 用 以 直接 查询 /设置 对 象 的 原型 。 但 并 不 推 

荐 使 用 _proto” ， 因 为 尽管 Safari 和 Chrome 的 当前 版 本 都 支持 它 ， 但 

IE 和 Opera 还 未 实现 它 (可 能 以 后 也 不 会 实现 ) 。 实 现 了 ECMAScript 5 

和 但 对 修改 不 可 扩展 对 象 的 原型 做 了 
| 。 


6.8.2 类 属性 


对 象 的 类 属性 (class attribute) 是 一 个 字符 串 ， 用 以 表示 对 象 的 类 型 信 
息 。ECMAScript 3 和 ECMAScript 5 都 未 提供 设置 这 个 属性 的 方法 ， 并 
只 有 一 种 间接 的 方法 可 以 查询 它 。 默 认 的 toString() 方 法 (继承 目 
Object.prototype) 返回 了 如 下 这 种 格式 的 字符 串 : 


[object class] 


因此 ， 要 想 获 得 对 象 的 类 ， 可 以 调用 对 象 的 toString() 方 法 ， 然 后 提取 
已 返回 字符 串 的 第 8 个 到 倒数 第 二 个 位 置 之 间 的 字符 。 不 过 让 人 感觉 二 
手 的 是 ， 很 多 对 象 继承 的 toString(0 方 法 重 写 了 ， 为 了 能 调用 正确 的 
toString0 版 本 ， 必 须 间接 地 调用 Function.call0 方 法 (参照 8.7.3 节 ) 

例 6-4 中 的 classof0 汞 数 可 以 返回 传递 给 它 的 任意 对 象 的 类 : 


例 6-4: classof() 函 数 


function classof(o){ 

if(o0o===null)return"Null"; 
if(o===undefined)return"Undefined"; 

return Object.prototype.toString.call(o).slice(8, -1); 


} 


classofO) 函 数 可 以 传 入 任何 类 型 的 参数 。 数 字 、 字 人 符 串 和 布尔 值 可 以 直 
接 调 用 toString(0) 方 法 ， 就 和 对 象 调用 toString() 方 法 一 样 ' 也-， 并 且 这 个 
函数 包含 了 对 null 和 undefined 的 特殊 处 理 (在 ECMAScript 5 中 不 需要 
对 这 些 特殊 情况 做 处 理 ) 。 通 过 内 置 构造 函数 (比如 Array 和 Date) 创 
建 的 对 象 包含 “类 属性 ”(class attribute) ， 它 与 构造 画 数 名 称 相 还 配 。 
答 主 对 象 也 包含 有 意义 的 “类 属性 *"， 但 这 和 具体 的 JavaScript 实 现 有 
关 。 通 过 对 象 直接 量 和 Object.create 创 建 的 对 象 的 类 属性 是 "Object"， 
那些 目 定义 构造 函数 创建 的 对 象 也 是 一 样 ， 类 属性 也 是 "Object"， 因 此 
对 于 目 定义 的 类 来 说 ， 没 办 法 通过 类 属性 来 区 分 对 象 的 类 : 


classof (nyull)//=>"Null" 


classof(1)//=>"Number" 


classof("")//=>"String" 


classof(false)//=>"Boolean" 


classof({})//=>"0Object" 


classof([])//=>"Array" 


classof(/./)//=>"Regexp" 


classof(new Date())//=>"Date" 


classof (window)//=> "Window" (这 是 客户 端 宿主 对 象 ) 


function f(){};// 定 义 一 个 自 定义 构造 函数 


classof (new f());//=>"0bject" 


6.8.3 ”可 扩展 性 


对 象 的 可 扩展 性 用 以 表示 是 否 可 以 给 对 象 添 加 新 属性 。 所 有 内 置 对 象 
和 目 定 义 对 象 都 是 显 式 可 扩展 的 ， 窒 主 对 象 的 可 扩展 性 是 由 JavaScript 


引擎 定义 的 。 在 ECMAScript 5 中 ， 所 有 的 内 置 对 象 和 目 定 义 对 象 都 是 
可 扩展 的 ， 除 非 将 它们 转换 为 不 可 扩展 的 ， 同 样 ， 和 宾主 对 象 的 可 扩展 
性 也 是 由 实现 ECMAScript 5 的 JavaScript 引 警 定 义 的 。 


ECMAScript 5 定义 了 用 来 查询 和 设置 对 象 可 扩展 性 的 函数 。 通 过 将 对 
象 传 入 Object.esE xtensible0 ， 来 判断 该 对 象 是 否 是 可 扩展 的 。 如 果 想 
将 对 象 转换 为 不 可 扩展 的 ， 需 要 调用 Object.preventExtensions()， 将 竺 
转换 的 对 象 作 为 参数 传 进去 。 注 意 ， 一 旦 将 对 象 转换 为 不 可 扩展 的 ， 
束 无 法 再 将 其 转换 回 可 扩展 的 了 。 同 样 需要 注意 的 是 ， 
preventExtensionsO 只 影响 到 对 象 本 身 的 可 扩展 性 。 如 果 给 一 个 不 可 扩 
这 个 不 可 扩展 的 对 象 同样 会 继承 这 些 新 属 


可 扩展 属性 的 目的 是 将 对 象 “ 锁 定 ”， 以 避免 外 界 的 干扰 。 对 象 的 可 扩 
展 性 通常 和 属性 的 可 配 值 性 与 可 写 性 配合 使 用 ，ECMAScript 5 定义 的 
一 些 钞 数 可 以 更 方便 地 设置 多 种 属性 。 


Object.seal() 和 Object.preventExtensions() 类 似 ， 除 了 能 够 将 对 象 设 置 为 
不 可 扩展 鸭 ， 还 可 以 将 对 象 的 所 有 目 有 属性 都 设置 为 不 可 配置 的 。 也 
瓯 是 说 ， 不 能 给 这 个 对 象 添 加 新 属性 ， 而 且 它 已 有 的 属性 也 不 能 删除 
或 配置 ， 不 过 它 已 有 的 可 写 属性 依然 可 以 设置 。 对 于 那些 已 经 封闭 

(sealed) 起 来 的 对 象 是 不 能 解 封 的 。 可 以 使 用 Object.isSealed0) 来 检测 
对 象 是 否 封 闭 。 


Object.freeze() 将 更 严格 地 锁定 对 象 “ 东 结 ” (frozen) 。 除 了 将 对 象 
设置 为 不 可 扩展 的 和 将 其 属性 设置 为 不 可 配置 的 之 外 ， 还 可 以 将 它 目 
有 的 所 有 数据 属性 设置 为 只 读 (如 果 对 象 的 存 取 器 属性 具有 setter 方 
法 ， 存 取 器 属性 将 不 受 影响 ， 仍 可 以 通过 给 属性 赋值 调用 它们 ) 。 使 
用 Object.isFrozen() 来 检测 对 象 是 否 冻 结 。 


Object.preventExtensionsO0、Object.seal0 和 Object.freeze0 都 返回 传 入 的 
对 象 ， 也 束 是 说 ， 可 以 通过 函数 租 僚 的 方式 调用 它们 : 


// 创 建 一 个 封闭 对 象 ， 包 括 一 个 冻结 的 原型 和 一 个 不 可 枚 举 的 属性 


Var o=0bject.seal(Object.create(Object.freeze({x:1}), 


{y:{value:2,writable:true}})); 


6.9 ”序列 化 对 象 


对 象 序 列 化 (serialization) 是 指 将 对 象 的 状态 转换 为 字符 串 ， 也 可 将 

字符 串 还 原 为 对 象 。ECMAScript 5 提供 了 内 置 函 数 JSON.stringifyO0 和 

JSON.parse() 用 来 序列 化 和 还 原 JavaScript 对 象 。 这 些 方 法 都 使 用 JSON 

作为 数据 交换 格式 ，JSON 的 全 称 是 "JavaScript Object Notation" 

人 ， 它 的 语法 和 JavaScript 对 象 与 数组 直接 量 的 语法 
单 相 近 : 


o={x:1,y:{z:[false,null,""]}};// 定 义 一 个 测试 对 象 
s=JSON.stringify(0);//s 是 '{"x":1,"y":{"z":[false,null,""]}}' 


p=JSON ,parse(s);//p 是 0 的 深 拷贝 


ECMAScript 5 中 的 这 些 函 数 的 本 地 实现 和 http:Wjson.org/json2.js 中 的 公 
共 域 ECMAScript 3 版 本 的 实现 非常 类 似 ， 或 者 说 完全 一 样 ， 因 此 可 以 
通过 引入 json2.js 模 块 在 ECMAScript 3 的 环境 中 使 用 ECMAScript 5 中 的 
这 些 函 数 。 


JSON 的 语法 是 JavaScript 语 法 的 子 集 ， 它 并 不 能 表示 JavaScript 里 的 所 
有 值 。 文 持 对 象 、 数 组 、 字 人 符 串 、 无 穷 大 数字 、true、false 和 null， 并 
且 它 们 可 以 序列 化 和 还 原 。NaN、Infinity 和 -Infinity 序 列 化 的 结果 是 
null， 日 期 对 象 序列 化 的 结果 是 ISO 格 式 的 日 期 字符 串 (参照 
Date.toJSON() 函 数 ) ， 但 JSON.parse() 依 然 保 留 它 们 的 字符 串 形态 ， 而 
不 会 将 它们 还 原 为 原始 日 期 对 象 。 了 芳 数 、RegExp、Error 对 和 象 和 
undefined 值 不 能 序列 化 和 还 原 。JSON.stringifyO 只 能 序列 化 对 象 可 枚 
举 的 目 有 属性 。 对 于 一 个 不 能 序列 化 的 属性 来 说 ， 在 序列 化 后 的 输出 
字符 串 中 会 将 这 个 属性 省 略 掉 。JSON.stringify0 和 JSON.parseO 都 可 以 
接收 第 二 个 可 选 参数 ， 通 过 传 入 需要 序列 化 或 还 原 的 属性 列表 来 定制 
和 目 定义 的 序列 化 或 还 原 操作 。 第 三 部 分 有 关于 这 些 函 数 的 详细 文档 。 


6.10 ”对象 方法 


上 文 已 经 讨论 过 ， 所 有 的 JavaScript 对 象 都 从 Object.prototype 继 承 属性 
(除了 那些 不 通过 原型 显 式 创建 的 对 象 ) 。 这 些 继承 属性 主要 是 方 
法 ， 因 为 JavaScript 程 序 员 普 所 对 继承 方法 更 感 兴趣 。 我 们 已 经 讨论 过 
hasOwnProperty()、 propertyIsEnumerable() 和 isPrototypeOfO 这 三 个 方 
法 ， 以 及 在 Object 构 造 钞 数 里 定义 的 静态 玉 数 Object.create() 和 
Object.getPrototypeOf() 等 。 本 广 将 对 定义 在 Object.prototype 里 的 对 和 象 方 
法 展开 讲解 ， 这 些 方 法 非常 好 用 而 且 使 用 广泛 ， 但 一 些 特 定 的 类 会 重 
号 了/ 


6.10.1 toString() 方 法 


toString() 方 法 没有 参数 ， 它 将 返回 一 个 表示 调用 这 个 方法 的 对 象 值 的 

字符 串 。 在 需要 将 对 象 转换 为 字符 串 的 时 候 ，JavaScript 都 会 调用 这 个 
方法 。 比 如 ， 当 使 用 “+” 运 算 符 连接 一 个 字符 串 和 一 个 对 象 时 或 者 在 布 
望 使 用 字符 串 的 方法 中 使 用 了 对 象 时 都 会 调用 toString()。 


默认 的 toString0 方 法 的 返回 值 带 有 的 信息 量 很 少 (尽管 它 在 检测 对 象 
的 类 型 时 非常 有 用 ， 参 照 6.8.2 节 ) ， 例 如 ， 下 面 这 行 代 码 的 计算 结果 
为 字符 串 "[object Object]": 


Var s={x:1,y:1}.toString(); 


由 于 默认 的 toString() 方 法 并 不 会 输出 很 多 有 用 的 信息 ， 因 此 很 多 类 都 
带 有 目 定 义 的 toString0。 例 如 ， 当 数组 转换 为 字符 串 的 时 候 ， 结 果 是 
一 个 数组 元 素 列 表 ， 只 是 每 个 元 素 都 转换 成 了 字符 串 ， 再 比如 ， 当 辑 
数 转 换 为 字符 串 的 时 候 ， 得 到 函数 的 源 代码 。 第 三 部 分 有 关于 
toString0 的 详细 文档 说 明 ， 比 如 Array.toString()、Date.toString() 以 及 


Function.toString() ° 


9.6.3 节 介绍 如 何 给 上 自 定 义 类 重 写 toString() 方 法 。 


6.10.2 ”toLocaleString() 方 法 


除了 基本 的 toString0 方 法 之 外 ， 对 象 都 包 仿 toLocaleString() 方 法 ， 这 个 
方法 返回 一 个 表示 这 个 对 象 的 本 地 化 字符 串 。Object 中 默认 的 
toLocaleString() 方 法 并 不 做 任何 本 地 化 目 身 的 操作 ， 它 仅 调 用 toString() 


方法 并 返回 对 应 值 。Date 和 Number 类 对 toLocaleString(0) 方 法 做 了 定 

制 ， 可 以 用 它 对 数字 、 日 期 和 时 间 做 本 地 化 的 转换 。Array 类 的 

toLocaleString() 方 法 和 toString() 方 法 很 像 ， 唯 一 的 不 同 是 每 个 数组 元 素 

2 。 用 toLocaleString() 方 法 转换 为 字符 串 ， 而 不 是 调用 各 目的 toString() 
* o 

6.10.3 toJSONU0) 方 法 

Object.prototype 实 际 上 没有 定义 toJSON(0) 方 法 ， 但 对 于 需要 执行 序列 

化 的 对 象 来 说 ，JSON.stringify0) 方 法 会 调用 toJSONU0 方 法 。 如 果 在 竺 序 

列 化 的 对 象 中 存在 这 个 方法 ， 则 调用 它 ， 返 回 值 即 是 序列 化 的 结果 ， 

而 不 是 原始 的 对 象 。 有 具体 示例 参见 Date.toJSON(O。 


6.10.4 ”valueOf0 方 法 


valueOf0 方 法 和 toString() 方 法 非常 类 似 ， 但 往往 当 JavaScript 需 要 将 对 
象 转换 为 某 种 原始 值 而 非 字 符 串 的 时 候 才 会 调用 它 ， 尤 其 是 转换 为 数 
字 的 时 候 。 如 果 在 需要 使 用 原始 值 的 上 下 文中 使 用 了 对 象 ，JavaScript 
驶 会 目 动 调用 这 个 方法 。 默 认 的 valueOfO0 方 法 不 足 为 奇 ， 但 有 些 内 置 
类 自 定 义 了 valueOf() 方 法 《比如 Date.valueOfO) ，9.6.3 闻 讨论 如 何 给 

目 定义 对 象 类 型 定义 valueOfO 方 法 。 


[1]_property 和 attribute 都 可 以 单独 理解 为 “属性 ”， 在 这 里 property 
attribute 是 一 个 词组 ， 意 思 是 “属性 的 特性 *"， 随 后 提 到 的 “可 写 ”、“ 可 
枚 举 " 和 “可 配置 * 即 是 属性 的 三 种 特性 。 


[2] .一致 认 为 Douglas Crockford 是 最 早 提出 用 这 种 方法 实现 对 象 继承 函 
数 的 人 ， 参 照 ， http://javascript.crockford.com/prototypal.html 。 


[3]. 强 类 型 ， 为 所 有 变 最 指 定数 据 类 型 称 为 “ 强 类 型 ”。 强 / 弱 类 型 是 指 
类 型 检查 的 严格 程度 。 语 言 有 无 类 型 、 弱 类 型 和 强 类 型 三 种 。 无 类 型 
的 不 检查 ， 甚 至 不 区 分 指令 和 数据 。 弱 类 型 的 检查 很 弱 ， 仅 能 挛 格 地 
区 分 指令 和 数据 。 强 类 型 的 则 严格 的 在 编译 期 间 进行 检查 


[4] 这 里 的 意思 是 可 以 动态 地 给 对 象 添 加 属性 。 严 格 讲 ，JavaScript 对 
象 的 属性 个 数 是 有 上 限 的 。 


[5]“ 程 序 不 能 修改 标识 符 ” 的 意思 是 说 ， 在 程序 运行 时 无 法 动态 指定 一 
个 标识 符 ， 当 然 eval 除 外 。 


[6].a={p:{Xx:1}};b=a.p;delete a.p; 执 行 这 段 代码 之 后 b.x 的 值 依然 是 1。 由 
于 已 经 删除 的 属性 的 引用 依然 存在 ， 因 此 在 JavaScript 的 某 些 实现 中 ， 
可 能 因为 这 种 不 严 齐 的 代码 而 造成 内 存 泄 漏 。 所 以 在 销毁 对 象 的 时 
候 ， 要 过 有 历 属 性 中 的 属性 ， 依 次 删除 。 


[7] 这 里 所 实现 的 extend() 逻 辑 虽 然 正确 ， 但 并 不 能 弥 什 下 中 有 一 些 众 
所 周知 的 bug， 在 例 8-3 中 会 有 更 健壮 的 extendO 实 现 。 


[8] 包括 除了 IE 之 外 的 最 新 主流 浏览 硕 的 ECMAScript 3 的 实现 。 


[9]. 笛 卡尔 坐标 系 就 是 直角 坐标 系 和 和 斜 角 坐 标 系 的 统称 。 相 交 于 原点 的 
两 条 数 轴 ， 构 成 了 平面 放射 坐标 系 。 


[10] 实际 上 是 这 些 类 型 的 变量 调用 toString0) 方 法 ， 而 不 是 通过 它们 的 
直接 量 调用 toString0， 比 如 1.toString0 是 不 对 的 ， 而 是 要 先 声 明 变 量 
var a=1; 然后 调用 a.toString()。 


第 7 章 ”数组 


数组 是 值 的 有 序 集合 。 每 个 值 叫 做 一 个 元 素 ， 而 每 个 元 素 在 数组 中 有 
一 个 位 置 ， 以 数字 表示 ， 称 为 索引 。JavaScript 数 组 是 无 类 型 的 ， 数组 
元 素 可 以 是 任意 类 型 ， 并 且 同 一 个 数组 中 的 不 同 元 素 也 可 能 有 不 同 的 
类 型 。 数 组 的 元 素 甚 至 也 可 能 是 对 象 或 其 他 数组 ， 这 人 允许 创建 复杂 的 
数据 结构 ， 如 对 象 的 数组 和 数组 的 数组 。JavaScript 数 组 的 索引 是 基于 
零 的 32 位 数值 ， 第 一 个 元 素 的 索引 为 0， 最 大 可 能 的 索引 为 4 294 967 
294 (232-2) ， 数 组 最 大 能 容纳 4 294 967 295 个 元 素 。JavaScript 数 组 
是 动态 的 : 根据 需要 它们 会 增长 或 缩减 ， 并 且 在 创建 数组 时 无 须 声明 
一 个 固定 的 大 小 或 者 在 数组 大 小 变化 时 无 须 重新 分 配 空间 。JavaScript 
数组 可 能 是 稀疏 的 : 数组 元 素 的 索引 不 一 定 要 连续 的 ， 它 们 之 间 可 以 
有 至 缺 。 每 个 JavaScript 数 组 都 有 一 个 langth 必 性。 针对 非 稀 芷 数组 ， 
人 。 针对 稀疏 数组 ，length 比 所 有 元 素 的 索引 
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JavaScript 数 组 是 JavaScript 对 象 的 特殊 形式 ， 数 组 索引 实际 上 和 碰巧 是 
整数 的 属性 名 差不多 。 我 们 将 在 本 章 的 其 他 地 方 更 多 地 讨论 特殊 化 的 
数组 。 通 常 ， 数 组 的 实现 是 经 过 优化 的 ， 用 数字 索引 来 访问 数组 元 素 
一 般 来 说 比 访问 常规 的 对 象 属性 要 快 很 多 。 


数组 继承 上 自 Array.prototype 中 的 属性 ， 它 定义 了 一 套 丰 富 的 数组 操作 方 
法 ，7.8 节 和 7.9 广 涵盖 这 方面 内 容 。 大 多 数 这 些 方法 是 通用 的 ， 这 意味 
着 它们 不 仅 对 真正 的 数组 有 有效， 而 且 对 “类 数组 对 象 " 同 样 有 效 。7.11 
节 讨 论 类 数组 对 象 。 在 ECMAScript 5 中 ， 字 符 串 的 行为 与 字符 数组 类 
似 ， 我 们 将 在 7.12 节 讨论 。 


7.1 创建 数组 


使 用 数组 直接 量 是 创建 数组 最 简单 的 方法 ， 在 方 括号 中 将 数组 元 素 用 
逗号 隔 开 即 可 。 例 如 : 


var empty=[];// 没 有 元 素 的 数组 


var primes=[2,3,5,7,11];// 有 5 个 数值 的 数组 


var misc=[1.1,true, "a",];//3 个 不 同类 型 的 元 素 和 结尾 的 逗号 


数组 直接 量 中 的 值 不 一 定 要 是 利 量 ; 它们 可 以 是 任意 的 表达 式 : 


1 


Var base=1024 


var table=[base,base+1,base+2, base+3]; 


它 可 以 包含 对 象 直 接 量 或 其 他 数组 直接 


var b=[[1,{x:1,y:2}], [2,{xX:3,y:4}]]; 


如 采 省 略 数 组 直接 量 中 的 茶 个 值 ， 省 略 的 元 聚 将 被 赋予 undefined 值 : 


var count=[1,，,3];// 数 组 有 3 个 元 素 ， 中 间 的 那个 元 素 值 为 undefined 


ey 


2 个 元 素 ， 都 是 undefined 


var undefs=[,，,];// 数 组 


数组 十 搂 量 四 语 浴 多 许 有 可 适 先 的 结尾 的 逗号 ， 故 [,,] 只 有 两 个 元 素 而 非 
| 


调用 构造 画 数 Array0 十 创建 数组 的 另 一 种 方法 。 可 以 用 三 种 方式 调用 
构造 函数 。 


调用 时 没有 参数 : 


var a=new Array(); 


该 方法 创建 一 个 没有 任何 元 素 的 空 数组 ， 等 同 于 数组 直接 量 [] 。 


调用 时 有 一 个 数值 参数 ， 它 指定 长 度 : 


var a=new Array(10); 


该 技术 创建 指定 长 度 的 数组 。 当 预先 知道 所 需 元 素 个 数 时 ， 这 种 形式 
的 Array0 构 造 画 数 可 以 用 来 预 分 配 一 个 数组 空间 。 注 意 ， 数 组 中 没有 
存储 值 ， 甚 至 数组 的 索引 属性 “0”、“1” 等 还 未 定义 。 


` 显 式 指 定 两 个 或 多 个 数组 元 素 或 者 数组 的 一 个 非 数 值 元 素 : 


var a=new Array(5,4,3,2,1,"testing,testing"); 


以 这 种 形式 ， 构 造 画 数 的 参数 将 会 成 为 新 数组 的 元 素 。 使 用 数组 字面 
量 比 这 样 使 用 Array0 构 造 函 数 要 简单 多 了 。 


7.2 ”数组 元 聚 的 读 和 写 


使 用 [] 操 作 符 来 访问 数组 中 的 一 个 元 素 。 数 组 的 引用 位 于 方 括号 的 左 
边 。 方 括号 中 是 一 个 返回 非 负 整数 值 的 任意 表达 式 。 使 用 该 语法 既 可 
以 读 又 可 以 写 数组 的 一 个 元 素 。 因 此 ， 如 下 代码 都 是 合法 的 JavaScript 


语句 : 


var a=["wor1d"];// 从 一 个 元 素 的 数组 开始 


var value=a[0] ;// 读 第 0 个 元 素 


a[1]=3.14;// 写 第 1 个 元 素 


i=2， 


a[i]=3;// 写 第 2 个 元 素 


a[i+1]="hello";// 写 第 3 个 元 素 


a[a[i]]=a[9];// 读 第 9 个 和 第 2 个 元 素 ， 写 第 3 个 元 素 


请 记 住 ， 数 组 是 对 象 的 特殊 形式 。 使 用 方 括号 访问 数组 元 素 吏 像 用 方 
括号 访问 对 象 的 属性 一 样 。JavaScript 将 指定 的 数字 索引 值 转换 成 字符 
串 一 一 索引 值 1 变 成 “1 一 一 然后 将 其 作为 属性 名 来 使 用 。 天 于 索引 值 
从 数字 转换 为 字符 串 没 什么 特别 之 处 ， 对 常规 对 象 也 可 以 这 么 做 : 


o={};// 创 建 一 个 普通 的 对 象 


o[1]="one";// 用 一 个 整数 来 索引 它 


数组 的 特别 之 处 在 于 ， 当 使 用 小 于 2 兰 的 非 负 整数 作为 属性 名 时 数组 
会 目 动 维护 其 length 属 性 值 。 如 上 ， 创 建 仪 有 一 个 元 素 的 数组 。 然 后 在 
和 


a.length//=>4 


清晰 地 区 分 数组 的 索引 和 对 象 的 属性 名 是 非常 有 用 的 。 所 有 的 索引 都 
古 属 性 名 ， 但 只 有 在 0~2 -2 之 间 的 整数 属性 名 才 是 索引 。 所 有 的 数 
组 都 是 对 象 ， 可 以 为 其 创建 任意 名 字 的 属性 。 但 如 条 使 用 的 属性 是 数 
组 的 索引 ， 数 组 的 特殊 行为 殉 是 将 根据 需要 更 痢 它 们 的 length 属 性 值 。 


注意 ， 可 以 使 用 负数 或 非 整数 来 索引 数组 。 这 种 情况 下 ， 数 值 转换 为 
字符 串 ， 字 符 串 作为 属性 名 来 用 。 既 然 名 字 不 是 非 负 整数 ， 它 殉 只 能 
当做 单 规 的 对 象 属性 ， 而 非 数组 的 索引 。 同 样 ， 如 条 旋 巧 使 用 了 十 非 
人 负 整 数 的 字符 串 ， 它 束 当 做 数组 索引 ， 而 非 对 象 属性 。 当 使 用 的 一 个 
浮 后 数 和 一 个 整数 相等 时 情况 也 是 一 样 的 : 
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a[-1.23]=true;// 这 将 创建 一 个 名 为 "-1.23" 的 属性 


a["1000"]=0;// 这 是 数组 的 第 1001 个 元 素 


a[1.009]// 和 a[1] 相 等 


事实 上 数组 索引 仅仅 是 对 象 属性 名 的 一 种 特殊 类 型 ， 这 意味 着 
JavaScript 数 组 没有 “越界 "错误 的 概念 。 当 试图 查询 任何 对 象 中 不 存在 
的 属性 时 ， 不 会 报错 ， 只 会 得 到 undefined 值 。 类 似 于 对 象 ， 对 于 对 象 
同样 存在 这 种 情况 。 


既然 数组 是 对 象 ， 那 么 它们 可 以 从 原型 中 继承 元 素 。 在 ECMAScript 5 
中 ， 数 组 可 以 定义 元 素 的 getter 和 setter 方 法 〈 见 6.6 节 ) 。 如 果 一 个 数 
组 确实 继承 了 元 素 或 使 用 了 元 素 的 getter 和 setter 方 法 ， 你 应 该 期 望 它 使 
用 非 优 化 的 代码 路 径 : 访问 这 种 数组 的 元 素 的 时 间 会 与 常规 对 象 属 性 
的 查找 时 间 相 近 。 


7.3” 稀 玖 数组 


黎 政 数组 就 是 包含 从 0 开始 的 不 连续 索引 的 数组 。 通 第 ， 数 组 的 length 
属性 值 代 表 数 组 中 元 素 的 个 数 。 如 有 果 数 组 是 稀 玻 的 ，length 属 性 值 大 于 
元 素 的 个 数 。 可 以 用 Array0 构 造 男 数 或 简单 地 指定 数组 的 索引 值 大 于 
当前 的 数组 长 度 来 创建 稀 芒 数组 。 


ss 


9 元素， 但 是 a .length 是 5 


a=new Array(5);// 数 组 没 


a=[];// 创 建 一 个 空 数组 ，length=0 


a[1000]=0;// 赋 值 添加 一 个 元 素 ， 但 是 设置 1ength 为 1001 


后 面 会 看 到 你 也 可 以 用 delete 操 作 符 来 生产 稀疏 数组 。 


足够 稀 朴 的 数组 通 音 在 实现 上 比 稠密 的 数组 更 慢 、 内 存 利用 率 更 高 ， 
在 这 样 的 数组 中 得 找 元 素 的 时 间 与 彰 规 对 象 属性 的 查找 时 间 一 样 长 。 


注意 ， 当 在 数组 直接 量 中 省 略 值 时 不 会 创建 稀 朴 数组 。 省 略 的 元 系 在 
数组 中 是 存在 的 ， 其 值 为 undefined。 这 和 数组 元 素 根本 不 存在 是 有 一 
些微 妙 的 区 别 的 。 可 以 用 in 操 作 符 检 测 两 者 之 间 的 区 别 : 


var al=[,，，];// 数 组 是 [undefined, undefined,undefined] 


var a2=new Array(3);// 该 数组 根本 没有 元 素 


0 in al//=>true:al 在 索引 0 处 有 一 个 元 素 


0 in a2//=>false:a2 在 索引 0 处 没有 元 素 


当 使 用 for/in 循 环 时 ，al 和 a2 之 间 的 区 别 也 很 明显 ( 见 7.6 节 ) 。 


需要 注意 的 是 ， 当 省 略 数组 直接 量 中 的 值 时 《使 用 连续 的 逗号 ， 比 如 
[1,,3]) ， 这 时 所 得 到 的 数组 也 是 稀疏 数组 ， 省 上 略 挥 的 值 古 不 存在 的 : 


var al=[,];// 此 数组 没有 元 素 ， 长 度 是 1 


var a2=[undefined];// 此 数组 包含 一 个 值 为 undefined 的 元 素 


0 in al//=>false:al 在 索引 0 处 没有 元 素 


0 in a2//=>true:a2 在 索引 0 处 有 一 个 值 为 undefined 的 元 素 


在 一 些 旧 版 本 的 实现 中 〈 比 如 Firefox 3) ， 在 存在 连续 逗号 的 情况 
下 ， 插 入 undefined 值 的 操作 则 与 此 不 同 ， 在 这 些 实现 中 ，[1,,3] 和 
[1,undefined,3] 是 一 模 一 样 的 。 


了 解 稀 玻 数组 是 了 解 JavaScript 数 组 的 真实 本 质 的 一 部 分 。 尽 管 如 此 ， 
实际 上 你 所 碰 到 的 绝 大 多 数 JavaScript 数 组 不 是 稀疏 数组 。 并 且 ， 如 果 
你 确实 碰 到 了 称 世 数组 ， 你 的 代码 很 可 能 像 对 待 非 入 臣 数组 一 样 来 对 
竺 它们， 只 不 过 它们 包含 一 些 undefined 值 。 


74 数组 长 度 
每 个 数组 有 一 个 langth 属 性 ， 束 是 这 个 属性 使 其 区 别 于 常规 的 


JavaScript 对 象 。 针 对 稠密 〈 也 驶 是 非 稀 臣 ) 数组 ，length 属 性 值 代 表 
数组 中 元 素 的 个 数 。 其 值 比 数组 中 最 大 的 索引 大 1: 


[] .length//=>0: 数 组 没有 元 素 


['a','b', 'c'] .length//=>3: 最 大 的 索引 为 2，length 为 3 


当 数 组 是 稀 臣 的 时 ，length 属 性 值 大 于 元 素 的 个 数 。 而 且 关 于 此 我 们 可 
以 说 的 一 切 也 束 是 数组 长 度 保证 大 于 它 每 个 元 素 的 索引 值 。 或 者 ， 换 

一 种 说 法 ， 在 数组 中 (无 论 稀 蚊 与 否 ) 肯定 找 不 到 一 个 元 素 的 索引 值 

大 于 或 等 于 它 的 长 度 。 为 了 维持 此 规则 不 变化 ， 数 组 有 两 个 特殊 的 行 

为 。 第 一 个 如 同上 面 的 描述 ， 如 采 为 一 个 数组 元 素 赋值 ， 它 的 索引 i 大 
于 或 等 于 现 有 数组 的 长 度 时 ，length 属 性 的 值 将 设置 为 i+1 。 


第 二 个 特殊 的 行为 就 是 设置 length 属 性 为 一 个 小 于 当前 长 度 的 非 负 整数 
n 时 ， 当 前 数组 中 那些 索引 值 大 于 或 等 于 n 的 元 素 将 从 中 删除 : 


a=[1, 2,3,4,5];// 从 5 个 元 素 的 数组 开始 


a.length=3;// 现 在 a 为 [1, 2, 3] 


a.length=0;// 删 除 所 有 的 元 素 。a 为 [] 


a.length=5;// 长 度 为 5， 但 是 没有 元 素 ， 就 像 new Array(5) 


还 可 以 将 数组 的 length 属 性 值 设置 为 大 于 其 当前 的 长 度 。 实 际 上 这 不 会 
癌 数组 中 添加 新 的 元 素 ， 它 只 古 在 数组 尾部 创建 一 个 空 的 区 域 。 


在 ECMAScript 5 中 ， 可 以 用 Object.defineProperty0 让 数组 的 length 属 性 
变 成 只 读 的 ( 见 6.7 节 ) : 


a=[1,2,3];// 从 3 个 元 素 的 数组 开始 


息 


Object.defineProperty(a, "length", {writable:false});//i 让 length 属 性 只 


a.length=0;//a 不 会 改变 


类 似 地 ， 如 果 让 一 个 数组 元 素 不 能 配置 ， 束 不 能 删除 它 。 如 果 不 能 删 
除 它 ，length 属 性 不 能 设置 为 小 于 不 可 配置 元 素 的 索引 值 。 ( 见 6.7 市 
和 6.8.3 节 的 Object.seal0 和 Object.freeze0) 方 法 。) 


7.5 数组 元 素 的 添加 和 删除 
我 们 已 经 见 过 添加 数组 元 素 最 简单 的 方法 : 为 新 索引 赋值 : 


a=[]// 开 始 是 一 个 空 数组 


a[0]="zero";// 然 后 向 其 中 添加 元 素 


a[1]="one"; 


也 可 以 使 用 push0) 方 法 在 数组 末尾 增加 一 个 或 多 个 元 到: 


a=[] ;// 开 始 是 一 个 空 数组 


a.push("zero")// 在 末尾 添加 一 个 元 素 。a=["zero"] 


a.push("one", "two")// 再 添加 两 个 元 素 。a=["zero", "one", "two"] 


在 数组 尾部 压 入 一 个 元 素 与 给 数组 a[a.length] 赋 值 是 一 样 的 。 可 以 使 用 
unshift() 方 法 (在 7.8 季 有 描述 ) 在 数组 的 首部 插入 一 个 元 素 ， 并 且 将 
其 他 元 素 依次 移 到 更 高 的 索引 处 。 


可 以 像 删 除 对 象 属 性 一 样 使 用 delete 运 算 符 来 删除 数组 元 素 : 


a=[1,2,3]; 


delete a[1];//a 在 索引 1 的 位 置 不 再 有 元 素 


1 in a//=>false: 数 组 索引 1 并 未 在 数组 中 定义 


a.length//=>3:delete 操 作 并 不 影响 数组 长 度 


删除 数组 元 素 与 为 其 赋 undefined 值 是 类 似 的 (但 有 一 些微 妙 的 区 

别 ) 。 注 意 ， 对 一 个 数组 元 素 使 用 delete 不 会 修改 数组 的 length 属 性 ， 
也 不 会 将 元 隶 从 高 索引 处 移 下 来 填充 已 删除 属性 留 下 的 空白 。 如 采 从 
数组 中 删除 一 个 元 素 ， 它 束 变 成 稀 臣 数组 。 


上 面 我 们 看 到 ， 也 可 以 简单 地 设置 langth 属 性 为 一 个 新 的 期 望 长 度 来 删 
除数 组 尾部 的 元 素 。 数 组 有 pop(0) 方 法 〈 它 和 pushO0 一 起 使 用 ) ， 后 者 
一 次 使 减少 长 度 1 并 返回 被 删除 元 素 的 值 。 还 有 一 个 shift0 方 法 ( 它 和 
unshift() 一 起 使 用 ) ， 从 数组 头 部 删除 一 个 元 素 。 和 delete 不 同 的 是 
shift0) 方 法 将 所 有 元 素 下 移 到 比 当 前 索引 低 1 的 地 方 。7.8 节 和 第 三 部 分 
涵盖 pop() 和 shift() 的 内 容 。 


最 后 ，splice0 是 一 个 通用 的 方法 来 插入 、 删 除 或 替换 数组 元 素 。 它 会 
根据 需要 修改 length 属 性 并 移动 元 素 到 更 高 或 较 低 的 索引 处 。 详 细 内 容 
见 7.8 节 。 

7.6 ”数组 遍历 


使 用 for 循 环 〈 见 5.5.3 节 ) 是 裔 历数 组 元 素 最 常见 的 方法 : 


var keys=0bject.keys(0);// 获 得 o 对 象 属性 名 组 成 的 数组 


var values=[]// 在 数组 中 存储 匹配 属性 的 值 


for(var i=0;i<keys,.,length;i++){// 对 于 数组 中 每 个 索引 


var key=keys[i];// 获 得 索引 处 的 键 值 


values[i]=o[key];// 在 values 数 组 中 保存 属性 值 


} 


在 舱 套 循环 或 其 他 性 能 非常 重要 的 上 下 文中 ， 可 以 看 到 这 种 基本 的 数 
0 需要 优化 ， 数 组 的 长 度 应 该 只 查询 一 次 而 非 每 次 循环 都 要 碍 
18): 


for(var i=0,len=keys.length;i<len;i++){// 循 环 体 仍然 不 变 
} 
这 些 例 子 假设 数组 是 稠密 的 ， 并 且 所 有 的 元 素 都 是 合法 数据 。 人 否则 ， 


使 用 数组 元 素 之 前 应 该 先 检测 它们 。 如 有 果 想 要 排除 null、undefined 和 
不 存在 的 元 素 ， 代 码 如 下 : 


for(var i=0;i<a.length;i++)f{ 


if(1a[i])continue;// 跳 过 nul1l1、undefined 和 不 存在 的 元 素 


// 循 环 体 


} 


如 果 只 想 跳 过 undefined 和 不 存 的 元 素 ， 代 码 如 下 : 


for(var i=0;i<a.length;i++)f{ 


if(a[i]===undefined)continue;// 跳 过 undefined+ 不 存在 的 元 素 


// 循 环 体 


} 


最 后 ， 如 果 只 想 跳 过 不 存在 的 元 素 而 仍然 要 处 理 存在 的 undefined 元 
素 ， 代 码 如 下 : 


for(var i=0;i<a.length;i++)f{ 


if(!(i in a))continue;// 跳 过 不 存在 的 元 素 


// 循 环 体 


还 可 以 使 用 fowi n 循 环 〈 见 5.5.4 节 ) 处 理 稀 玻 数组 。 循 环 每 次 将 一 个 可 
(包括 数组 索引 ) 赋值 给 循环 变量 。 不 存在 的 索引 将 不 
会 乙 历 到 : 


for(var index in sparseArray)t{ 


五 


var value=sparseArray[index];// 此 处 可 以 使 用 索引 和 值 做 一 些 事 ' 


} 


在 6.5 节 已 经 注意 到 for/in 循 环 能 够 枚 举 继承 的 属性 名 ， 如 添加 到 
Array.prototype 中 的 方法 。 由 于 这 个 原因 ， 在 数组 上 不 应 该 使 用 for/in 
人 。 如 下 检测 代码 
久 其 一 刀 日 : 


for(var i in a){ 


3 


if(1a.hasOownProperty(i))continue;// 跳 过 继承 的 属性 


// 循 环 体 


} 


for(var i in a){// 跳 过 不 是 非 负 整数 的 i 


if(String(Math.floor(Math.abs(Number(i))))!==i)continue,; 


ECMAScript 规 范 允 许 fowin 循 环 以 不 同 的 顺序 遇 历 对 象 的 属性 。 通 常数 
组 元 素 的 遇 历 实现 是 升序 的 ， 但 不 能 保证 一 定 是 这 样 的 。 特 别 地 ， 如 
果 数 组 同时 拥有 对 象 属 性 和 数组 元 素 ， 返 回 的 属性 名 很 可 能 是 按照 创 
建 的 顺序 而 非 数值 的 大 小 顺序 。 如 何 处 理 这 个 问题 的 实现 各 不 相同 ， 

0 


ECMAScript 5 定义 了 一 些 遍 历数 组 元 素 的 新 方法 ， 按 照 索 引 的 顺序 按 
个 传递 给 定义 的 一 个 函数 。 这 些 方法 中 最 常用 的 就 是 forEach(0) 方 法 : 


var data=[1,2,3,4,5];// 这 是 需要 遍历 的 数组 


var sum0fSquares=0;// 要 得 到 数据 的 平方 和 


data,forEach(function(X){// 把 每 个 元 素 传递 给 此 函数 


sum0OfSquares+=x*Xx;// 平 方 相 加 


}); 


sumOofSquares//=>55:1+4+9+16+25 


forEachO0 和 相关 的 遍历 方法 使 得 数组 拥有 简单 而 强大 的 函数 式 编程 风 
0 0 3 
Cl 


7 多 维 数 组 


JavaScript 不 文 持 真 正 的 多 维 数组 ， 但 可 以 用 数组 的 数组 来 近似 。 访 问 
数组 的 数组 中 的 元 素 ， 只 要 简单 地 使 用 两 次 [] 操 作 符 即 可 。 例 如 ， 假 
设 变量 matrix 古 一 个 数组 的 数组 ， 它 的 基本 元 取 是 数值 ， 那 么 matrix[x] 
的 每 个 元 素 是 包含 一 个 数值 数组 ， 访 问 数 组 中 特定 数值 的 代码 为 


。 这 里 有 一 个 具体 的 例子 ， 它 使 用 二 维 数组 作为 一 个 九 九 
本 EY : 


// 创 建 一 个 多 维 数组 


var table=new Array(10);// 表 格 有 10 行 


for(var i=0;i<table.length;i++) 


table[i]=new Array(10);// 每 行 有 10 列 


// 初 始 化 数组 


for(var row=0;row<table.length;row+t++){ 


for(col=0;col<table[row].length;col++){ 


table[row][col]=row*col; 


// 使 用 多 维 数组 来 计算 (查询 ) 5*7 


var product=table[5][7];//35 


7.8 ”数组 方法 


ECMAScript 3 在 Array.prototype 中 定义 了 一 些 很 有 用 的 操作 数组 的 函 
数 ， 这 意味 着 这 些 函 数 作 为 任何 数组 的 方法 都 是 可 用 的 。 下 面 几 节 介 
绍 ECMAScript 3 中 的 这 些 方法 。 像 通常 一 样 ， 完 整 的 细 和 参见 第 四 部 
分 关于 数组 的 内 容 。ECMAScript 5 中 新 增 了 一 些 新 的 数组 遍历 方法 ; 
它们 涵盖 在 7.9 节 中 。 


7.8.1 join() 


Array.join() 方 法 将 数组 中 所 有 元 素 都 转化 为 字符 串 并 连接 在 一 起 ， 返 

回 最 后 生成 的 字符 串 。 可 以 指定 一 个 可 选 的 字符 串 在 生成 的 字符 串 中 

0 。 如 果 不 指定 分 隔 符 ， 默 认 使 用 喜 号 。 如 以 下 
弓 所 示 : 


var a=[1,2,3];// 创 建 一 个 包含 三 个 元 素 的 数组 


a.join();//=>"1,2,3" 


a.join("™");//=>"1 2 3" 


a.join("™");//=>"123" 


var b=new Array(19) ;// 长 度 为 10 的 空 数组 


b.join('-')//=>'--------- ' :9 个 连 字 号 组 成 的 字符 串 


Array.join() 方 法 是 String.split(0) 方 法 的 赣 回 操作 ， 后 者 是 将 字符 串 分 割 
成 若干 块 来 创建 一 个 数组 。 


7.8.2 reversel() 
Array.reverse() 方 法 将 数组 中 的 元 素 址 倒 顺 友 ， 返 回 逆 序 的 数组 。 它 采 
取 了 替换 ， 换 名 话说 ， 它 不 通过 重新 排列 的 元 素 创 建新 的 数组 ， 而 是 


在 原先 的 数组 中 重新 排列 它们 。 人 例如， 下面 的 代码 使 用 reverse0 和 
join0 方 法 生成 字符 串 “3，2，12”: 


var a=[1,2,3]; 


当 


在 的 a 是 [3, 2,1] 


a.reverse().join()//=>"3,2,1", 


7.8.3 sort() 


Array.sort() 方 法 将 数组 中 的 元 素 排 序 并 返回 排序 后 的 数组 。 当 不 市 参 
数 调用 sort0 时 ， 数 组 元 素 以 字母 表 顺 序 排序 (如 有 必要 将 临时 转化 为 
字符 串 进 行 比较 ) : 


var a=new Array("banana","cherry","apple"); 
a.sort(); 


var s=a.join(",");//s=="apple,banana, cherry" 


如 果 数 组 包 售 undefined 元 妹 ， 它 们 会 被 排 到 数组 的 尾部 。 


为 了 按照 其 他 方式 而 非 字 和 母 表 顺序 进行 数组 排序 ， 必 须 给 sort() 方 法 传 
递 一 个 比较 函数 。 该 本 数 决定 了 它 的 两 个 参数 在 排 好 序 的 数组 中 的 移 
后 顺序 。 假 设 第 一 个 参数 应 该 在 前 ， 比 较 函 数 应 该 返回 一 个 小 于 0 的 数 
值 。 反 之 ， 假 设 第 一 个 参数 应 该 在 后 ， 函 数 应 该 返回 一 个 大 于 0 的 数 

值 。 并 且 ， 假 设 两 个 值 相 等 〈 也 惑 是 说 ， 它 们 的 顺序 无 关 紧 要 ) ， 画 
。 因 此 ， 例 如， 用 数值 大 小 而 非 字 母 表 顺 序 进 行 数组 排 

予 ， 代 人 码 如 下 : 


var a=[33,4,1111,222]; 


a.Ssort();// 字 母 表 顺 序 ;1111, 222, 33,4 


a.sort(function(a,b){// 数 值 顺 序 :4,33,222,1111 


return a-b;// 根 据 顺 序 ， 返 回 负 数 、0、 正 数 


}); 


a.sort(function(a,b){return b-a});// 数 值 大 小 相反 的 顺序 


注意 ， 这 里 使 用 匿名 范 数 表达 式 非 常 方便。 既然 比 较 函 数 只 使 用 一 
次 ， 束 没 必要 给 它们 命名 了 。 


另外 一 个 数组 元 素 排 序 的 例子 ， 也 许 需要 对 一 个 字符 串 数 组 执行 不 区 
分 大 小 写 的 字母 表 排 序 ， 比 较 函 数 首先 将 参数 都 转化 为 小 写字 符 串 
〈 使 用 toLowerCase() 方 法 ) ， 再 开始 比较 : 


a=['ant','Bug','cat','Dog'] 


a.sort();// 区 分 大 小 写 的 排序 : ['Bug', 'Dog', 'ant',cat'] 


a.sort(function(s,t){// 不 区 分 大 小 写 的 排序 
var a=s.toLowerCase(); 

Var b=t.toLowerCase(); 
if(a<b)return-1; 

if(a>b)return 1; 

return 9; 


});//=>['ant','Bug','cat','Dog'] 


7.8.4 concat() 


Array.concat() 方 法 创建 并 返回 一 个 新 数组 ， 它 的 元 素 包 括 调用 concat() 
的 原始 数组 的 元 素 和 concat() 的 每 个 参数 。 如 果 这 些 参数 中 的 任何 一 个 
自身 是 数组 ， 则 连接 的 是 数组 的 元 素 ， 而 非 数 组 本 号 。 但 要 注意 ， 
concat(0) 不 会 递归 扁平 化 数组 的 数组 。concat0 也 不 会 修改 调用 的 数 

组 下 面 有 一 些 示例 : 


var a=[1,2,3]; 


a.concat(4,5)// 返 回 [1,2,3,4,5] 


a.concat([4,5]);// 返 回 [1,2,3,4,5] 


a.concat([4,5],[6,7])// 返 回 [1,2,3,4,5,6,7] 


a.concat(4,[5,[6,7]])// 返 回 [1,2,3,4,5,1[6,7]] 


7.8.5 slice() 


Array.slice() 方 法 返回 指定 数组 的 一 个 片段 或 子 数组 。 它 的 两 个 参数 分 
别 指定 了 片段 的 开始 和 结束 的 位 置 。 返 回 的 数组 包含 第 一 个 参数 指定 
的 位 置 和 所 有 到 但 不 含 第 二 个 参数 指定 的 位 置 之 间 的 所 有 数组 元 素 。 
如 果 只 指定 一 个 参数 ， 返 回 的 数组 将 包 售 从 开始 位 置 到 数组 结尾 的 所 
有 元 素 。 如 参数 中 出 现 负 数 ， 它 表示 相对 于 数组 中 最 后 一 个 元 素 的 位 
置 。 例 如 ， 参 数 -1 指定 了 最 后 一 个 元 素 ， 而 -3 指定 了 倒数 第 三 个 元 

素 。 注 意 ，slice0) 不 会 修改 调用 的 数组 。 下面 有 一 些 示 例 : 


var a=[1,2,3,4,5]; 


a.slice(0,3);// 返 回 [1,2,3] 


a.slice(3);// 返 回 [4,5] 


a.slice(1, -1);// 返 回 [2,3,4] 


a.Slice(-3, -2);// 返 回 [3] 


7.8.6 splicel() 


Array.splice() 方 法 是 在 数组 中 插入 或 删除 元 素 的 通用 方法 。 不 同 于 
slice() 和 concat()，splice() 会 修改 调用 的 数组 。 注 意 ，splice() 和 slice() 拥 
有 非常 相似 的 名 字 ， 但 它们 的 功能 却 有 本 质 的 区 别 。 


splice() 能 够 从 数组 中 删除 元 素 、 插 入 元 杂 到 数组 中 或 者 同时 完成 这 两 
种 操作 。 在 插入 或 删除 点 之 后 的 数组 元 素 会 根据 需要 增加 或 减 小 它们 
的 索引 值 ， 因 此 数组 的 其 他 部 分 仍然 伯 持 连续 的 。splice() 的 第 一 个 参 
数 指定 了 插入 和 (或 ) 删除 的 起 始 位 置 。 第 二 个 参数 指定 了 应 该 从 数 
组 中 删除 的 元 于 的 个 数 。 如 有 果 省 略 第 二 个 参数 ， 从 起 始点 开始 到 数组 


结尾 的 所 有 元 素 都 将 被 删除 。splice0 返 回 一 个 由 删除 元 素 组 成 的 数 
组 ， 或 者 如 果 没 有 删除 元 素 束 返回 一 个 空 数 组 。 例 如 : 


var a=[1,2,3,4,5,6,7,8]; 


a.splice(4);// 返 回 [5,6,7,8];a 是 [1,2,3,4] 


a.splice(1,2);// 返 回 [2,3];a 是 [1,4] 


a.splice(1,1);// 返 回 [4] ;a 是 [1] 


spliceO) 的 前 两 个 参数 指定 了 需要 删除 的 数组 元 系 。 紧 随 其 后 的 任意 个 
数 的 参数 指定 了 需要 插入 到 数组 中 的 元 素 ， 从 第 一 个 参数 指定 的 位 置 
开始 插入 。 例 如 : 


var a=[1,2,3,4,5]; 


a.splice(2,0,'a', 'b');// 返 回 [];a 是 [1,2,'a','b',3,4,5] 


a.splice(2,2,[1,2],3);// 返 回 ['a', 'b'];a 是 [1,2, [1,2],3,3,4,5] 


注意 ， 区 别 于 concat()，splice() 会 插入 数组 本 身 而 非 数 组 的 元 素 。 
7.8.7 pushO 和 popO) 


pushO 和 pop0 方 法 允许 将 数组 当做 栈 来 使 用 。push(0) 方 法 在 数组 的 尾音 
添加 一 个 或 多 个 元 素 ， 并 返回 数组 新 的 长 度 。pop(0) 方 法 则 相反 : 它 删 
除数 组 的 最 后 一 个 元 素 ， 减 小 数组 长 度 并 返回 它 删 除 的 值 。 注 意 ， 两 
个 方法 都 修改 并 替换 原始 数组 而 非 生成 一 个 修改 版 的 新 数组 。 组 合 使 
用 pushO0 和 pop0 能 够 用 JavaScript 数 组 实现 先进 后 出 的 栈 。 例 如 : 


var stack=[];//stack:[] 


stack.push(1,2);//stack:[1,2] 返回 2 


stack.pop();//stack:[1] 返回 2 


stack.push(3);//stack:[1,3] 返回 2 


stack.pop();//stack:[1] 返回 3 


stack.push([4,5]);//stack:[1,[4,5]] 返回 2 


stack.pop()//stack:[1] 返回 [4,5] 


stack.pop();//stack:[] 返回 1 


7.8.8 ”unshift() 和 shift() 


unshift() 和 shift() 方 法 的 行为 非常 类 似 于 pushO 和 pop()， 不 一 样 的 是 前 
者 是 在 数组 的 头 部 而 非 尾 部 进行 元 素 的 插入 和 删除 操作 。unshiftO 在 数 
组 的 头 部 添加 一 个 或 多 个 元 素 ， 并 将 已 存在 的 元 素 移 动 到 更 高 索引 的 
位 置 来 获得 足够 的 空间 ， 最 后 返回 数组 新 的 长 度 。shiftO0 删 除数 组 的 第 
一 个 元 素 并 将 其 返回 ， 然 后 把 所 有 随后 的 元 素 下 移 一 个 位 置 来 填补 数 
组 头 部 的 空缺 。 例 如 : 


var a=[];//a:[] 


a.unshift(1);//a:[1] 返 


加 
[uy 


.Unshift(22);//a:[22,1] 返 回 :2 


Ee 


.Shift();//a:[1] 返 回 :22 


见 


妃 
CD 


.Unshift(3, [4,5]);//a:[3, [4,5],1] 返 回 : 


Ee 


.Shift();//a:[[4,5],1] 返 回 :3 


oy 


Lo 


.Shift();//a:[1] 返 回 : [4,5] 


a.shift();//a:[] 返 回 :1 


注意 ， 当 使 用 多 个 参数 调用 unshift0 时 它 的 行为 令 人 惊讶 。 参 数 是 一 次 
性 插入 的 〈 吏 像 splice0 方 法 ) 而 非 一 次 一 个 地 插入 。 这 意味 着 最 终 的 

数组 中 插入 的 元 聚 的 顺序 和 它们 在 参数 列表 中 的 顺序 一 致 。 而 假如 元 

素 生 一 次 一 个 地 插入 ， 它 们 的 顺序 应 该 是 反 过 来 的 。 


7.8.9 _ toString0 和 toLocaleStringO) 


数组 和 其 他 JavaScript 对 象 一 样 拥有 toString0) 方 法 。 针 对 数组 ， 该 方法 
将 其 每 个 元 素 转 化 为 字符 串 (如 有 必要 将 调用 元 素 的 toString() 方 法 ) 
并 且 输 出 用 逗号 分 隔 的 字符 串 列表 。 注 意 ， 输 出 不 包括 方 括号 或 其 他 
任何 形式 的 包 囊 数组 值 的 分 隔 符 。 例 如 : 


[1,2,3].toString()// 生 成 '1,2,3' 


["a","b","c"] ,toString()// 生 成 'a,b,c' 


[1, [2, 'c']].toString()// 生 成 '1,2,c' 


注意 ， 这 里 与 不 使 用 任何 参数 调用 join() 方 法 返回 的 字符 串 是 一 样 的 。 


toLocaleString() 是 toString() 方 法 的 本 地 化 版 本 。 它 调用 元 素 的 
toLocaleString() 方 法 将 每 个 数组 元 素 转化 为 字符 串 ， 并 且 使 用 本 地 化 
《和 上 自 定 义 实现 的 ) 分 隔 符 将 这 些 字符 串 连 接 起 来 生成 最 终 的 字符 


7.9 ” ECMAScript 5 中 的 数组 方法 
ECMAScript 5 定义 了 9 个 新 的 数组 方法 来 授 历 、 上 映射、 过 滤 、 检 测 、 简 
化 和 搜索 数组 。 下 面 几 节 描述 了 这 些 方法 。 


但 在 开始 详细 介绍 之 前 ， 很 有 必要 对 ECMAScript 5 中 的 数组 方法 做 一 
个 概述 。 首 和 完 ， 大 多 数 方法 的 第 一 个 参数 授 收 一 个 钞 数 ， 并 且 对 数组 
的 每 个 元 素 (或 一 些 元 素 ) 调用 一 次 该 贸 数 。 如 果 是 入 压 数 组 ， 对 不 


存在 的 元 素 不 调用 传递 的 函数 。 在 大 多 数 情况 下 ， 调 用 提供 的 函数 使 
用 三 个 参数 : 数组 元 素 、 元 素 的 索引 和 数组 本 身 。 通 常 ， 只 需要 第 一 
个 参数 值 ， 可 以 忽略 后 两 个 参数 。 大 多 数 ECMAScript 5 数组 方法 的 第 
一 个 参数 是 一 个 函数 ， 第 二 个 参数 是 可 选 的 。 如 果 有 第 二 个 参数 ， 则 
调用 的 范 数 被 看 做 是 第 二 个 参数 的 方法 。 也 就 是 说 ， 在 调用 函数 时 传 
递 进去 的 第 二 个 参数 作为 它 的 this 关 键 字 的 值 来 使 用 。 被 调用 的 函数 的 
返回 值 非 常 重要 ， 但 是 不 同 的 方法 处 理 返回 值 的 方式 也 不 一 样 。 
ECMAScript 5 中 的 数组 方法 都 不 会 修改 它们 调用 的 原始 数组 。 当 然 ， 
传递 给 这 些 方法 的 函数 是 可 以 修改 这 些 数组 的 。 


7.9.1 forEach() 


forEach() 方 法 从 头 至 尾 遍 历数 组 ， 为 每 个 元 聚 调用 指定 的 画 数 。 如 上 
所 述 ， 传 递 的 函数 作为 forEach0 的 第 一 个 参数 。 然 后 forEachO 使 用 三 
个 参数 调用 该 画 数 ， 数 组 元 素 、 元 素 的 索引 和 数组 本 映 。 如 有 果 只 关心 
0 额外 的 参数 将 忽 
格 : 


var data=[1,2,3,4,5];// 要 求 和 的 数组 


// 计 算数 组 元 素 的 和 值 


var sum=0;// 初 始 为 0 


data.forEach(function(value){sumt+=value;});// 将 每 个 值 累加 到 sum 上 


sum//=>15// 每 个 数组 元 素 的 值 自 加 1 


data.forEach(function(v,i,a){a[il]=v+1;}); 


data//=> [2,3,4,5,6] 


注意 ，forEach0 无 法 在 所 有 元 素 都 传递 给 调用 的 函数 之 前 终止 壳 历 。 

也 就 是 说 ， 没 有 像 for 循 环 中 使 用 的 相应 的 break 语 句 。 如 采 要 提前 终 

止 ， 必 须 把 forEach() 方 法 放 在 一 个 try 块 中 ， 并 能 抛 出 一 个 异常 。 如 果 
forEach() 调 用 的 范 数 抛 出 foreach.break 异 常 ， 循 环 会 提前 终 上 上 : 


function foreach(a,f,t)t{ 
try{a.forEach(f,t);} 
catch(e)t{ 
if(e===foreach.break)return; 
else throw e; 

} 

} 


foreach.break=new Error("StopIteration"); 


7.9.2 map() 


map(0 方 法 将 调用 的 数组 的 每 个 元 素 传递 给 指定 的 画 数 ， 并 返回 一 个 数 
组 ， 它 包含 该 男 数 的 返回 值 。 例 如 : 


a=[1,2,3]; 

b=a.map(function(x){return x*x;});//b 是 [1,4,9] 

传递 给 map0 的 函数 的 调用 方式 和 传递 给 forEach0 的 函数 的 调用 方式 一 
样 。 但 传递 给 map0 的 函数 应 该 有 返回 值 。 注 意 ，map0 返 回 的 是 新 数 
组 : 它 不 修改 调用 的 数组 。 如 果 是 稀 葡 数组， 返回 的 也 是 相同 方式 的 
稀 昔 数组 : 它 上 共有 相同 的 长 度 ， 相 同 的 缺失 元 素 。 

7.9.3 filter() 


fliter(0 方 法 返回 的 数组 元 系 是 调用 的 数组 的 一 个 子 集 。 传 递 的 函数 是 
用 来 逻辑 判定 的 : 该 函数 返回 true 或 false。 调 用 判定 函数 就 像 调用 


forEach0 和 mapO 一 样 。 如 果 返 回 值 为 true 或 能 转化 为 true 的 值 ， 那 么 传 
递 给 判定 函数 的 元 素 束 是 这 个 子 集 的 成 员 ， 它 将 被 添加 到 一 个 作为 返 
回 值 的 数组 中 。 例 如 : 

a=[5,4,3,2,1]; 

smallvalues=a.filter(function(x){return x<3});//[2,1] 


everyother=a.filter(function(x,i){return i%2==0});//[S5,3,1] 


注意 ，filter0 会 跳 过 稀疏 数组 中 缺少 的 元 素 ， 它 的 返回 数组 忌 古 稠密 
的 。 为 了 压缩 稀 玖 数组 的 空 馈 ， 代 码 如 下 : 


var dense=sparse.filter(function(){return true,;}); 


其 至， 压缩 空 缺 并 删除 undefined 和 null 元 素 ， 可 以 这 样 使 用 filter0): 


a=a.filter(function(x){return x!==undefined&&x!=null,;}); 


7.9.4 every() 和 some() 


every() 和 some() 方 法 是 数组 的 逻辑 判定 : 它们 对 数组 元 素 应 用 指定 的 
函数 进行 判定 ， 返 回 true 或 false。 


every() 方 法 束 像 数学 中 的 “针对 所 有 ”的 量词 ， 当 且 仪 当 针 对 数组 中 的 
所 有 元 素 调用 判定 男 数 都 返回 true， 生 才 返回 true: 


a=[1,2,3,4,5]; 


a.every(function(x){return x<10;})//=>true: 所 有 的 值 <10 


a.every(function(x){return x%2===0;})//=>false: 不 是 所 有 的 值 都 是 偶数 


some() 方 法 就 像 数 学 中 的 “存在 ”的 量词 : 当 数 组 中 至 少 有 一 个 元 素 调 
用 判定 函数 返回 true， 它 就 返回 true; 并 且 当 且 仅 当 数 值 中 的 所 有 元 素 
调用 判定 函数 都 返回 false， 它 才 返 回 false: 


a=[1,2,3,4,5]; 


a.some(function(x)f{return x%2===0;})//=>true: a 含有 偶数 值 


a.some(isNaN)//=>false: a 不 包含 非 数值 元 素 


注意 ， 一 旦 every0 和 some0 确 认 该 返回 什么 值 它们 束 会 停止 和 志 历 数组 
元 丸 。some0 在 判定 函数 第 一 次 返回 true 后 天 返回 true， 但 如 采 判 定 函 
数 一 直 返回 false， 它 将 会 所 历 整个 数组 。every0) 恰 好 相反 : 它 在 判定 
函数 第 一 次 返回 false 后 就 返回 false， 但 如 果 判 定 函 数 一 直 返回 true， 写 
将 会 下 历 整 个 数组 。 注 意 ， 根 据 数学 上 的 惯例 ， 在 空 数组 上 调用 时 ， 
every() 返 回 true，some() 返 回 false。 


7.9.5 reduce0 和 reduceRightO) 

reduce() 和 reduceRight() 方 法 使 用 指定 的 画 数 将 数组 元 素 进行 组 合 ， 生 
成 单个 值 。 这 在 函数 式 编 程 中 是 常见 的 操作 ， 也 可 以 称 为 “注入 ”和 “ 折 
琶 ”。 举 例 说 明 它 是 如 何 工 作 的 : 

var a=[1,2,3,4,5] 

var Sum=a.reduce(function(x,y){freturn xty},0);// 数 组 求 和 

var product=a.reduce(function(x,y)f{return x*y},1);// 数 组 求 积 


var max=a.reduce(function(x,y){return(x>y)?x:y;});// 求 最 大 值 


reduce0 需 要 两 个 参数 。 第 一 个 是 执行 化 简 操 作 的 函数 。 化 简 轴 数 的 任 
务 束 是 用 茶 种 方法 把 两 个 值 组 合 或 化 简 为 一 个 值 ， 并 返回 化 价 后 的 
值 。 在 上 述 例子 中 ， 画 数 通过 加 法 、 乘 法 或 取 最 大 值 的 方法 组 合 两 个 
值 。 第 二 个 (可 选 ) 的 参数 是 一 个 传递 给 函数 的 初始 值 。 


reduce0) 使 用 的 函数 与 forEachO 〇 和 map0) 使 用 的 函数 不 同 。 比 较 熟 悉 的 
是 ， 数 组 元 素 、 元 素 的 索引 和 数组 本 吴 将 作为 第 2~4 个 参数 传递 给 函 
数 。 第 一 个 参数 是 到 目前 为 止 的 化 简 操作 累积 的 结果 。 第 一 次 调用 画 
数 时 ， 第 一 个 参数 是 一 个 初始 值 ， 它 就 是 传递 给 reduce() 的 第 二 个 参 
数 。 在 接 下 来 的 调用 中 ， 这 个 值 束 是 上 一 次 化 简 函 数 的 返回 值 。 在 上 
面 的 第 一 个 例子 中 ， 第 一 次 调用 化 简 函 数 时 的 参数 是 0 和 1。 将 两 者 相 
加 并 返回 1。 再 次 调用 时 的 参数 是 1 和 2， 它 返回 3。 然 后 它 计算 
ww \`6+4=10， 最 后 计算 10+5=15。 最 后 的 值 是 15，reduce0 返 回 这 
个 值 。 


可 能 已 经 注意 到 了 ， 上 面 第 三 次 调用 reduce0 时 只 有 一 个 参数 : 没有 指 
定 初始 值 。 当 不 指定 初始 值 调用 reduce0 时 ， 它 将 使 用 数组 的 第 一 个 元 
素 作 为 其 初始 值 。 这 意味 痢 第 一 次 调用 化 众 函 数 束 使 用 了 第 一 个 和 第 
二 个 数组 元 素 作为 其 第 一 个 和 第 二 个 参数 。 在 上 面 求 和 与 求 积 的 例子 
中 ， 可 以 省 略 初 始 值 参数 。 


在 空 数组 上 ， 不 市 初始 值 参数 调用 reduce( 将 导致 类 型 错误 异常 。 如 采 
调用 它 的 时 候 只 有 一 个 值 一 一 数组 只 有 一 个 元 素 并 且 没有 指定 初始 
值 ， 或 者 有 一 个 空 数 组 并 且 指 定 一 个 初始 值 一 reduce0 只 征 简单 地 返 
回 那 个 值 而 不 会 调用 化 简 函 数 。 


reduceRight() 的 工作 原理 和 reduce() 一 样 ， 不 同 的 是 它 按照 数组 索引 从 
高 到 低 (从 右 到 左 ) 处 理 数组 ， 而 不 是 从 低 到 高 。 如 果 化 简 操 作 的 优 
先 顺序 是 从 右 到 左 ， 你 可 能 想 使 用 它 ， 例 如 : 


人 


var a=[2,3,4]// 计 算 2^(3^A4)。 乘 方 操作 的 优先 顺序 是 从 右 到 五 


var big=a.reduceRight(function(accumulator,value)t{ 


return Math.pow(value,accumulator ); 


}); 


注意 ，reduce() 和 reduceRight() 都 能 接收 一 个 可 选 的 参数 ， 它 指定 了 化 
位 函 数 调用 时 的 this 天 键 字 的 值 。 可 选 的 初始 0 要 占 一 个 位 
置 。 如 果 想 让 化 位 函数 作为 一 个 特殊 对 象 的 方法 调用 ， 请 参看 
Function.bind() 方 法 。 


值得 注意 的 是 ， 上 面 描述 的 every0 和 some() 方 法 是 一 种 类 型 的 数组 化 
po 。 但 征 不 同 的 是 ， 它 们 会 尽早 终止 志 有 历 而 不 总 是 访问 每 一 个 数 
组 元 系 。 


为 了 简单 起 见 ， 到 目前 位 置 所 展示 的 例子 都 是 数值 的 ， 但 数学 计算 不 
是 reduce0 和 reduceRight0 的 唯一 意图 。 考 虑 一 下 例 6-2 中 的 union0) 函 

数 。 它 计算 两 个 对 象 的 “并 集 ”， 并 返回 另 一 个 新 对 象 ， 新 对 象 具 有 二 
者 的 属性 。 该 函数 期 竺 两 个 对 象 并 返回 另 一 个 对 象 ， 所 以 它 的 工作 原 
理 和 一 个 化 简 函 数 一 样 ， 并 且 可 以 使 用 reduce0) 来 把 它 一般 化 ， 计 算 任 
意 数 目的 对 象 的 “并 集 ”。 


var objects=[{x:1},{y:2},{z:3}]; 


var merged=objects.reduce(union);//=>{x:1,y:2,z:3} 


回想 一 下 ， 当 两 个 对 象 拥有 同名 的 属性 时 ，union() 函 数 使 用 第 一 个 参 
数 的 属性 值 。 这 样 ，reduce0 和 reduceRightO 在 使 用 union0 时 给 出 下 
同 的 结果 : 

var objects=[{x:1,a:1},{y:2,a:2}, {z:3,a:3}]; 

var leftunion=objects.reduce(union);//{xX:1,y:2,z:3,a:1} 


var rightunion=objects,.reduceRight(union);//{x:1,y:2,z:3,a:3} 


7.9.6 indexOfO 和 1lastIndexOfO) 


indexOfO 和 1lastImndexOfO 搜 索 整 个 数组 中 具有 给 定 值 的 元 素 ， 返 回 找到 
的 第 一 个 元 素 的 索引 或 者 如 果 没 有 找到 驶 返回 -1。indexOfO 从 头 至 尾 
搜索 ， 而 lastIndexOfO) 则 反问 搜索 。 


a=[09,1,2,1,0]; 


a.indexof(1)//=>1:a[1] 是 1 


a.lastIndex0of(1)//=>3:a[3] 是 1 


a.index0f(3)//=> -1: 没 有 值 为 3 的 元 素 


不 同 于 本 市 描述 的 其 他 方法 ，indexOf() 和 lastIndexOf() 方 法 不 接收 一 个 
函数 作为 其 参数 。 第 一 个 参数 是 需要 搜索 的 值 ， 第 二 个 参数 是 可 选 
的 : 它 指 定数 组 中 的 一 个 索引 ， 从 那里 开始 搜索 。 如 果 省 略 该 参数 ， 
indexOfO) 从 头 开始 搜索 ， 而 lastIndexOf() 从 末尾 开始 搜索 。 第 二 个 参数 
也 可 以 是 负数 ， 它 代表 相对 数组 末尾 的 偏 移 量 ， 对 于 splice(0) 方 法 : 例 
如 ，-1 指 定数 组 的 最 后 一 个 元 素 。 


如 下 夯 数 在 一 个 数组 中 搜索 指定 的 值 并 返回 包含 所 有 匹配 的 数组 索引 
的 一 个 数组 。 它 展示 了 如 何 运 用 indexOf() 的 第 二 个 参数 来 查找 除了 第 
一 个 以 外 匹配 的 值 。 


// 在 数组 中 查找 所 有 出 现 的 x， 并 返回 一 个 包含 匹配 索引 的 数组 


function findall(a,x){ 


var results=[],// 将 会 返回 的 数组 


len=a.length, // 待 搜索 数组 的 长 度 


pos=0;// 开 始 搜索 的 位 


while(pos<1len){// 循 环 搜 索 多 个 元 素 ... 


pos=a.index0f(x, pos);// 搜 索 


if(pos===-1)break;// 未 找到 ， 就 完成 搜索 


在 数组 中 存储 索引 


results.push(pos);// 否 则 ， 


pos=pos+1;// 并 从 下 一 个 位 置 开始 搜索 


} 


return results;// 返 回 包含 索引 的 数组 


} 
注 字符 串 也 有 indexOfO 和 ]lastIndexOfO 方 法 ， 它 们 和 数组 方法 的 功 


7.10 ”数组 类 型 


我 们 在 本 章 中 到 处 都 可 以 看 见 数 组 是 具有 特殊 行为 的 对 象 。 给 定 一 个 
未 知 的 对 象 ， 判 定 它 是 否 为 数组 通常 非常 有 用 。 在 ECMAScript 5 中 ， 
可 以 使 用 Array.isArray0 函 数 来 做 这 件 事情 : 


Array.isArray([])//=>true 


Array.isArray({})//=>false 


但 是 ， 在 ECMAScript 5 以 前 ， 要 区 分 数组 和 非 数 组 对 象 却 令 人 惊讶 地 

困难 。typeof 操 作 符 在 这 里 帮 不 上 忙 ， 对 数组 它 返回 “对 象 ” (并 且 对 于 

0 
J 情形 : 


[Jinstanceof Array//=>true 


({})instanceof Array//=>false 


使 用 instanceof 的 问题 是 在 Web 浏 上 质 器 中 有 可 能 有 多 个 窗口 或 窗 体 

frame) 存在 。 每 个 窗口 都 有 上 自己 的 JavaScript 环 境 ， 有 自己 的 全 局 对 
象 。 并 且 ， 每 个 全 局 对 象 有 自己 的 一 组 构造 函数 。 因 此 一 个 窗 体 中 的 
对 象 将 不 可 能 是 另外 窗 体 中 的 构造 函数 的 实例 。 窗 体 之 间 的 混 消 不 和 常 
。 0 问题 足 已 证 明 instanceof 探 作 符 不 能 视 为 一 个 可 靠 的 数组 
分 测 方 法 。 


解决 方案 是 检查 对 象 的 类 属性 ( 见 6.8.2 节 ) 。 对 数组 而 言 该 属性 的 值 
总 和 定 "Array"， 因此 在 ECMAScript 3 中 isArray0O 函 数 的 代码 可 以 这 样 书 


var isArray=Function.isArray||function(o){ 


return typeof o==="object"&&% 


}; 


实际 上 ， 此 处 类 属性 的 检测 就 是 ECMAScript 5 中 Array.isArray0) 画 数 所 
做 的 事情 。 获 得 对 象 类 属性 的 技术 使 用 了 6.8.2 节 和 例 6-4 中 展示 的 
Object.prototype.toString() 方 法 。 

7.11 ”类 数组 对 象 

我 们 已 经 看 到 ，JavaScript 数 组 的 有 一 些 特性 是 其 他 对 象 所 没有 的 : 

: 当 有 新 的 元 素 添 加 到 列表 中 时 ， 自 动 更 新 length 属 性 。 

设置 length 为 一 个 较 小 值 将 截断 数组 。 

.从 Array.prototype 中 继承 一 些 有 用 的 方法 。 

.其 类 属性 为 "Array"。 


这 些 特性 让 JavaScript 数 组 和 第 规 的 对 象 有 明显 的 区 别 。 但 是 它们 不 是 
定义 数组 的 本 质 特性 。 一 种 常常 完全 合理 的 看 法 把 拥有 一 个 数值 langth 


属性 和 对 应 非 负 整数 属性 的 对 象 看 做 一 种 类 型 的 数组 。 


实践 中 这 些 “ 类 数组 ?对象 实际 上 偶尔 出 现 ， 虽 然 不 能 在 它们 之 上 直接 
调用 数组 方法 或 者 期 望 langth 属 性 有 什么 特殊 的 行为 ， 但 是 仍然 可 以 用 
针对 真正 数组 刀 历 的 代码 来 损 历 它们 。 结 论 就 是 很 多 数组 算法 针对 类 
数组 对 象 工 作 得 很 好 ， 束 像 针 对 真正 的 数组 一 样 。 如 果 算 法 把 数组 看 
成 只 读 的 或 者 如 有 果 它 们 至 少 保持 数组 长 度 不 变 ， 也 尤其 是 这 种 情况 。 


以 下 代码 为 一 个 常规 对 象 增 加 了 一 些 属性 使 其 变 成 类 数组 对 象 ， 然 后 
届 历 生成 的 伪 数 组 的 “元 素 ”: 


var a= 人 ;// 从 一 个 常规 空 对 象 开 始 


// 添 加 一 些 属性 ， 称 为 "类 数组 " 


Var i=0; 


while(i<10){ 


a[i]=i*i; 


工 + 十 ， 


} 


a.length=i;// 现 在 ， 当 做 真正 的 数组 遍历 它 


Var total=0; 

for(var j=0;j<a.length;j++) 

total+=a[j]; 

8.3.2 节 摘 述 的 Arguments 对 象 束 是 一 个 类 数组 对 象 。 在 客户 姜 


JavaScript 中 ， 一 些 DOM 方 法 (如 document.getElementsByTagName()) 
也 返回 类 数组 对 象 。 下 面 有 一 个 函数 可 以 用 来 检测 类 数组 对 象 : 


// 判 定 0 是 否 是 一 个 类 数组 对 象 


// 字 符 串 和 画 数 有 length 属 性 ， 但 是 它们 


// 可 以 用 typeof 检 测 将 其 排除 。 在 客户 端 JavaScript 中 ，DOM 文 本 节点 


// 也 有 length 属 性 ， 需 要 用 额外 判断 0 .nodeType!=3 将 其 排除 


function isArrayLike(o){ 


if(0 人 区 //o 非 nul1、undefined 等 


typeof 0==="0object" 尺 以 //o 是 对 象 


isFinite(o.length) 人 多 //o.lLength 是 有 限 数值 


o,length>=0&&//o,length 为 非 负 值 


o.length===Math.floor(o.length)&&//o.length 是 整数 


o.length<4294967296)//0o.length<2^32 


return true;//o 是 类 数组 对 象 
else 


return false;// 否 则 它 不 是 


将 在 7.12 节 中 看 到 在 ECMAScript 5 中 字符 捉 的 行为 与 数组 类 似 (并 且 
有 些 浏览 器 在 ECMAScript 5 之 前 已 经 让 字符 串 变 成 可 索引 的 了 ) 。 然 
而 ， 类 似 上 述 的 类 数组 对 象 的 检测 方法 针对 字符 串 常常 返回 false 一 一 
它们 通常 最 好 当做 字符 串 处 理 ， 而 非 数 组 。 


JavaScript 数 组 方法 是 特意 定义 为 通用 的 ， 因 此 它们 不 仅 应 用 在 真正 的 
数组 而 且 在 类 数组 对 象 上 都 能 正确 工作 。 在 ECMAScript 5 中 ， 所 有 的 
数组 方法 都 是 通用 的 。 在 ECMAScript 3 中 ， 除 了 toStringO0 和 


toLocaleStringO 以 外 的 所 有 方法 也 是 通用 的 。 (concat(0 方 法 是 一 个 特 
例 : 虽然 可 以 用 在 类 数组 对 象 上 ， 但 它 没 有 将 那个 对 象 扩充 进 返 回 的 
数组 中 。) 既然 类 数组 对 象 没 有 继承 自 Array.prototype， 那 就 不 能 在 它 
ee 数组 方法 。 尽 管 如 此 ， 可 以 间接 地 使 用 Function.call 方 
法 调用 : 


var a={"0":"a", "1":"b","2":"c", length:3};// 类 数组 对 象 


Array.prototype.join.call(a, "+")//=>"at+b+tc" 


Array.prototype.slice.call(a,0)//=>["a","b", "c"]: 真正 数组 的 副本 


Array.prototype.map.call(a,function(x){ 

return x.toUpperCase(); 

})//=>["A","B", "Cc"]: 

在 7.10 市 的 isArray0 方 法 之 前 我 们 束 已 经 见 过 call0) 技 术 。8.7.3 节 酒 盖 关 
于 Function 对 和 象 的 call0 方 法 的 更 多 内 容 。 

ECMAScript 5 数组 方法 是 在 Firefox 1.5 中 引入 的 。 由 于 它们 的 写法 的 一 
般 性 ，Firefox 还 将 这 些 方法 的 版 本 在 Array 构 造 丽 数 上 直接 定义 为 画 
数 。 使 用 这 些 方法 定义 的 版 本 ， 上 述 例子 束 可 以 这 样 重 写 : 

var a={"O":"a", "1":"b" "2":"c" length:3};// 类 数组 对 象 

Array.join(a,"+") 

Array.slice(a,o0) 

Array.map(a,function(x){return x.toUpperCase( );}) 


当 用 在 类 数组 对 象 上 时 ， 数 组 方法 的 静态 函数 版 本 非常 有 用 。 但 既然 
它们 不 是 标准 的 ， 不 能 期 户 它 们 在 所 有 的 浏览 器 中 都 有 定义 。 可 以 这 


样 书写 代码 来 保证 使 用 它们 之 前 是 存在 的 : 


Array.join=Array.join||function(a, sep)t{ 
return Array.prototype.join.call(a, sep); 

}; 
Array.slice=Array.slice||function(a,from,to){ 
return Array.prototype.slice.call(a,from, to); 
}; 
Array.map=Array.map||function(a,f,thisArg)t 
return Array.prototype.map.call(a,f,thisArg); 


} 


7.12 ”作为 数组 的 字符 

在 ECMAScript 5 〈 在 众多 最 近 的 浏览 郁 实 现 一 一 包括 正 8 一 一 早 于 
ECMAScript 5) 中 ， 字 符 串 的 行为 类 似 于 只 读 的 数组 。 除 了 用 charAt() 
方法 来 访问 单个 的 字符 以 外 ， 还 可 以 使 用 方 括号 : 

Var s=test,; 

s.charAt(0)//=>"t" 

s[1]//=>"e" 


当然 ， 针 对 字符 串 的 typeof 操 作 符 仍然 返回 "string"， 但 是 如 果 给 
ArrayisArray(0 传 递 字 符 串 ， 它 将 返回 false。 


可 索引 的 字符 串 的 最 大 的 好 处 丈 是 催 单 ， 用 方 括号 代替 了 charAt(O 调 
用 ， 这 样 更 加 侧 洁 、 可 读 并 且 可 能 更 高 效 。 不 仅 如 此 ， 字 符 串 的 行为 
类 似 于 数组 的 事实 使 得 通用 的 数组 方法 可 以 应 用 到 字符 串 上 。 例 如 : 


s="Javascript" 


Array.prototype.join.call(s,"")//=>"Javascript" 


En A 


Array.prototype.filter .call(s,// 过 滤 字 符 串 中 的 字符 


function(x)t 


return x.match(/[^aeiou]/);// 只 匹配 非 元 音字 和 母 


}) .join("™")//=>"Jvscrpt" 


请 记 住 ， 字 符 串 是 不 可 变 值 ， 故 当 把 它们 作为 数组 看 竺 时 ， 它 们 是 只 
读 的 。 如 push()、sort()、reverse() 和 splice() 等 数组 方法 会 修改 数组 ， 它 
们 在 字符 串 上 是 无 效 的 。 不 仅 如 此 ， 使 用 数组 方法 来 修改 字符 串 会 导 
致 钳 误 : 出错 的 时 候 没 有 提示 。 


函数 是 这 样 的 一 段 JavaScript 代 码 ， 它 只 定义 一 次 ， 但 可 能 被 执行 或 调 
用 任意 次 。 你 可 能 已 经 从 诸如 子 例 程 (subroutine) 或 者 过 程 

(procedure) 这 些 名 字 里 对 函数 的 概念 有 所 了 解 。JavaScript 函 数 是 参 
数 化 的 ， 画 数 的 定义 会 包括 一 个 称 为 形 参 (parameter) 的 标识 符 列 
表 ， 这 些 参 数 在 函数 体 中 像 局 部 变量 一 样 工 作 。 函 数 调 用 会 为 形 参 提 
供 实 参 的 值 册 。 画 数 使 用 它们 实 参 的 值 来 计算 返回 值 ， 成 为 该 函数 调 
用 表达 式 的 值 。 除 了 实 参 之 外 ， 每 次 调用 还 会 拥有 为 一 个 值 一 一 本 次 
调用 的 上 下 文 一 一 这 就 是 this 天 键 字 的 值 。 


如 果 函 数 挂 载 在 一 个 对 象 上 ， 作 为 对 象 的 一 个 属性 ， 束 称 它 为 对 象 的 
方法 。 当 通过 这 个 对 象 来 调用 芳 数 时 ， 该 对 象 就 古 此 次 调用 的 上 下 文 

(context) ， 也 就 是 该 函数 的 this 的 值 。 用 于 初始 化 一 个 新 创建 的 对 象 
的 函数 称 为 构造 画 数 (constructor) 。6.1 玫 会 对 构造 画 数 有 进一步 的 
讲解 ， 第 9 章 还 会 再 谈 到 它 。 


在 JavaScript 里 ， 函 数 即 对 象 ， 程 序 可 以 随意 操控 它们 。 比 如 ， 
JavaScript 可 以 把 函数 赋值 给 变量 ， 或 者 作为 参数 传递 给 其 他 函数 。 
为 函数 束 是 对 象 ， 所 以 可 以 给 它们 设置 属性 ， 甚 至 调用 它们 的 方法 。 


JavaScript 的 函数 可 以 舱 套 在 其 他 画 数 中 定义 ， 这 样 它们 就 可 以 访问 它 
们 被 定义 时 所 处 的 作用 域 中 的 任何 变量 。 这 意味 着 JavaScript 函 数 构成 
了 一 个 闭 包 (closure) ， 它 给 JavaScript 带 来 了 非常 强劲 的 编程 能 


8.1 画 数 定 义 


函数 使 用 function 关 键 字 来 定义 ， 它 可 以 用 在 函数 定义 表达 式 ( 见 4.3 
节 ) 或 者 函数 声明 语句 ( 见 5.3.2 节 ) 里 。 在 两 种 形式 中 ， 函 数 定义 都 
从 function 天 键 字 开始 ， 其 后 跟随 这 些 组 成 部 分 : 


图 数 名 称 标识 符 。 玉 数 名 称 古 函数 声明 语句 必需 的 部 分 。 它 的 用 途 束 
像 变量 的 名 字 ， 痢 定义 的 函数 对 象 会 赋值 给 这 个 变量 。 对 函数 定义 表 
达 陈 来 说 ， 这 个 名 字 是 可 选 的 : 如 果 存 在， 该 名 字 只 存在 于 函数 体 
中 ， 并 指 代 该 函数 对 象 本 映 。 


一 对 圆 括号 ， 其 中 包含 由 0 个 或 者 多 个 用 逗号 隔 开 的 标识 符 组 成 的 列 
故 * 这些 标识 符 是 本 数 的 参数 名 称 ， 它 们 就 像 数 体 中 的 局部 灾 量 一 


一 对 花 括号 ， 其 中 包含 0 条 或 多 条 JavaScript 语 句 。 这 些 语句 构成 了 范 
数 体 : 一旦 调用 加 数 ， 就 会 执行 这 些 语句 。 


例 8-1 分 别 展示 了 函数 语句 和 表达 式 两 种 方式 的 范 数 定义 。 注 意 ， 以 表 
达 陈 来 定义 函数 只 适用 于 它 作 为 一 个 大 的 表达 式 的 一 部 分 ， 比 如 在 赋 
值 和 调用 过 程 中 定义 函数 : 


例 8-1: 定义 JavaScript 函 数 


> 
出 


// 输 出 o 的 每 个 属性 的 名 称 和 值 ， 返 回 undefined 


function printprops(o){ 


for(var p in 0) 


console.log(p+":"+o[p]+"\n"); 


} 


TU 
下 


// 计 算 两 个 笛 卡 尔 坐 标 (x1, y1) 和 (x2,y2) 之 间 的 吕 


Fe 
2 


function distance(x1,y1,x2,y2)t{ 


Var dx=x2-x1; 


Var dy=y2-y1; 


return Math.sqrt(dx*dx+dy*dy ); 


// 计 算 阶乘 的 递归 画 数 (调用 自身 的 函数 ) 


//X! 的 值 是 从 x 到 x 递减 ( 步 长 为 1) 的 值 的 累 乘 


function factorial(x){ 


if(x<=1)return 1; 


return x*factorial(x-1); 


// 这 个 函数 表达 式 定义 了 一 个 函数 用 来 求 传 入 参数 的 平方 


// 注 意 我 们 把 它 赋值 给 一 个 变量 


var square=function(x){return x*x;}// 画 数 表达 式 可 以 包含 名 称 ， 这 在 递归 时 很 有 


var f=function fact(x){if(x<=1)return 1;else return x*fact(x-1);};// 玉 数 表达 式 也 可 以 作 
为 参数 传 给 其 他 函数 


data.sort(function(a,b)f{return a-b;});// 画 数 表 达 式 有 时 定义 后 立即 调用 


var tensquared=(function(x){return x*x;}(10)); 


注意 ;以 表达 式 方式 定义 的 范 数 ， 画 数 的 名 称 是 可 计 的 。 一 条 函数 声 
明 语 句 实 际 上 声明 了 一 个 变量 ， 并 把 一 个 范 数 对 象 赋值 给 它 。 相 对 而 
言 ， 害 义 范 数 表达 式 时 并 没有 声明 一 个 变量 。 画 数 可 以 命名 ， 史 3 像 上 
面 的 阶乘 函数 ， 它 需要 一 个 名 称 来 指 代目 己 。 如 果 一 个 钞 数 定义 表达 
式 包含 名 称 ， 辑 数 的 局 部 作用 域 将 会 包含 一 个 绑 定 到 函数 对 象 的 名 
称 。 实 际 上 ， 画 数 的 名 称 将 成 为 画 数 内 部 的 一 个 局 部 变量 。 通 肖 而 
言 ， 以 表达 式 方式 定义 钞 数 时 都 不 需要 名 称 ， 这 会 让 定义 它们 的 代码 
更 为 紧 竣 。 函 数 定义 表达 式 特别 适合 用 来 定义 那些 只 会 用 到 一 次 的 函 
数 ， 比 如 上 面 展示 的 最 后 两 个 例子 。 


函数 命名 


任何 合法 的 JavaScript 标 识 符 都 可 以 用 做 一 个 函数 的 名 称 。 命 名 时 要 尽 
量 选 择 描述 性 强 而 又 简洁 的 轴 数 名 。 在 这 两 着 之 间 做 到 恰到好处 是 一 
门 乞 术 ， 需 要 丰富 的 经 验 。 精 心 挑选 的 画 数 名 可 以 极 大 地 改善 代码 的 
可 读 性 (从 而 也 提高 了 可 维护 性 ) 。 


玉 数 名 称 通 常 是 动词 或 以 动词 为 前 缀 的 词组 。 通 常 画 数 名 的 第 一 个 字 
符 为 小 写 ， 这 是 一 种 编程 约定 。 当 男 数 名 包含 多 个 单词 时 ， 一 种 约定 
是 将 单词 以 下 划 线 分 隔 ， 就 像 like_this0。 还 有 另外 一 种 约定 ， 就 是 除 
了 第 一 个 单词 之 外 的 单词 首 字 母 使 用 大 写字 和 母 ， 开 像 likeThis()。 有 一 
些 函 数 是 用 做 内 部 函数 或 私有 函数 (不 是 作为 公用 API 的 一 部 分 ) ， 
这 种 函数 名 通 香 以 一 条 下 划 线 为 前 绥 。 


在 一 些 编程 风格 中 ， 或 者 编程 框 如 里 ， 通 常 为 那些 经 常 调用 的 函数 指 
定 短 名 称 ， 比 如 客户 端 JavaScript 框 架 jQuery (第 19 章 会 详细 讲述 ) 就 
将 最 常用 的 方法 重 命名 为 $() 〈 一 个 美元 符号 ) (2.4 节 提 到 ， 美 元 符号 
和 下 划 线 是 除了 字母 和 数字 之 外 的 两 个 合法 的 JavaScript 标 识 符 ) 。 


如 5.3.2 节 所 述 ， 画 数 声明 语句 “被 提前 ”到 外 部 脚本 或 外 部 函数 作用 域 
的 顶部 ， 所 以 以 这 种 方式 声明 的 函数 ， 可 以 被 在 它 定 义 之 前 出 现 的 代 
码 所 调用 。 不 过 ， 以 表达 式 定义 的 函数 整 男 当 别论 了 了， 为 了 调用 一 个 
图 数 ， 必 须要 能 引用 它 ， 而 要 使 用 一 个 以 表达 式 方 式 定 义 的 范 数 之 
前 ， 必 须 把 它 赋值 给 一 个 变量 。 变 量 的 声明 提前 了 (参见 3.10.1 和 ) ， 
但 给 变量 赋值 是 不 会 提前 的 ， 所 以 ， 以 表达 式 方式 定义 的 函数 在 定义 
之 前 无 法 调用 ) 。 


请 注意 ， 例 8-1 中 的 大 多 数 函 数 〈 但 不 是 全 部 ) 包含 一 条 return 语 句 

( 见 5.6.4 节 ) 。retum 语 句 导 致 画 数 停止 执行 ， 并 返回 它 的 表达 式 (如 
果 有 有 的话) 的 值 给 调用 者 。 如 果 returmn 语 句 没 有 一 个 与 之 相关 的 表达 
式 ， 则 它 返 回 undefined 值 。 如 果 一 个 函数 不 包含 retum 语 句 ， 那 它 就 只 
执行 函数 体 中 的 每 条 语句 ， 并 返回 undefined 值 给 调用 者 。 


例 8-1 中 的 大 多 数 函 数 都 是 用 来 计算 出 一 个 值 的 ， 它 们 使 用 retur 把 值 
返回 给 调用 者 。 而 printprops() 函 数 的 不 用 之 处 在 于 ， 它 的 任务 是 输出 
对 象 各 属性 的 名 称 和 值 。 没 有 必要 返回 值 ， 该 函数 不 包含 return 语 句 。 
printpropsO) 函 数 的 返 回 值 始终 是 undefined。 〈 没 有 返回 值 的 函数 有 时 
候 称 为 过 程 ) 


般 套 函数 
在 JavaScript 里 ， 函 数 可 以 峙 父 在 其 他 函数 里 。 例 如 : 


function hypotenuse(ayb){ 


function square(x){return x*x;} 

return Math.sqrt(square(a)+square(b)); 

} 

区 套 画 数 的 有 趣 之 处 在 于 它 的 变量 作用 域 规则 它们 可 以 访问 舱 套 它 

们 (或 多 重 肉 套 ) 的 函数 的 参数 和 变量 。 例 如 ， 在 上 面 的 代码 里 ， 内 
部 函数 squareO0 可 以 读 写 外 部 函数 hypotenuse0 定 义 的 参数 a 和 b。 这 些 作 

用 域 规则 对 内 般 函 数 非 常 重 要 ， 我 们 会 在 8.6 世 再 深入 了 解 它 们 。 

5.3.2 节 曾 提 到 ， 画 数 声 明 语 句 并 非 真正 的 语句 ，ECMAScript 规 范 只 是 

J 它们 作为 斋 级 语句 。 它们 可 以 出 现在 全 局 代码 里 ， 或 者 内 般 在 其 

他 函数 中 ， 但 它们 不 能 出 现在 循环 、 条 件 判断 ， 或 者 try/cache/finally 

以 及 with 语句 中 中。 注意 ， 此 限制 仅 适 用 于 以 语句 声明 形式 定义 的 函 

数 。 玉 数 定义 表达 式 可 以 出 现在 JavaScript 代 码 的 任何 地 方 。 

8.2 ”函数 调用 


构成 男 数 主体 的 JavaScript 代 码 在 定义 之 时 并 不 会 执行 ， 只 有 调用 该 画 
数 时 ， 它 们 才 会 执行 。 有 4 种 方式 来 调用 JavaScript 函 数 : 


.作为 函数 

.作为 方法 

.作为 构造 函数 

.通过 它们 的 cal0 和 apply0 方 法 间接 调用 

8.2.1 函数 调用 

侯 用 调用 表 远 式 申 以 进行 普通 的 函数 调用 也 可 进行 方法 调用 ( 见 4.5 
节 ) 。 一 个 调用 表达 式 由 多 个 函数 表达 式 组 成 ， 每 个 函数 表达 式 都 是 
由 一 个 画 数 对 象 和 左 圆 括号 、 参 数列 表 和 右 圆 括号 组 成 ， 参 数列 表 是 


由 逗号 分 隔 的 零 个 或 多 个 参数 表达 式 组 成 。 如 有 果 函 数 表 达 式 是 一 个 属 
性 访问 表达 式 ， 即 该 荔 数 是 一 个 对 象 的 属性 或 数组 中 的 一 站 元素 ， 那 


么 它 驶 是 一 个 方法 调用 表达 式 。 下 面 将 会 解释 这 种 情形 。 下 面 的 代码 
展示 了 一 些 普通 的 函数 调用 表达 式 : 

printprops({x:1}); 

var total=distance(0,0,2,1)+distance(2,1,3,5); 


var probability=factorial(5)/factorial(13); 


在 一 个 调用 中 ， 每 个 参数 表达 式 〈 圆 括号 之 间 的 部 分 ) 都 会 计算 出 一 
个 值 ， 计 算 的 结 琳 作 为 参数 传递 给 男 外 一 个 函数 。 这 些 值 作为 实 参 传 
递 给 声明 函数 时 定义 的 形 参 。 在 函数 体 中 存在 一 个 形 参 的 引用 ， 指 同 
当前 传 入 的 实 参 列表 ， 通 过 它 可 以 获得 参数 的 值 。 


对 于 普通 的 函数 调用 ， 男 数 的 返回 值 成 为 调用 表达 式 的 值 。 如 果 该 函 
数 返 回 是 因为 解释 絮 到 达 结 尾 ， 返 回 值 束 是 undefined。 如 果 函 数 返 回 
是 因为 解释 絮 执 行 到 一 条 retum 语 句 ， 返 回 值 就 是 return 之 后 的 表达 式 
的 值 ， 如 果 return 语 句 没 有 值 ， 则 返回 undefined 。 


根据 ECMAScript 3 和 非 严格 的 ECMAScript 5 对 函数 调用 的 规定 ， 调 用 
上 下 文 (this 的 值 ， 是 全 局 对 象 。 然 而 ， 在 严格 模式 下 ， 调 用 上 下 文 则 


是 undefined 。 


以 函数 形式 调用 的 函数 通常 不 使 用 this 关 键 字 。 不 过 ，"this" 可 以 用 来 
判断 当前 和 是否 是 产 格 模式 。 


// 定 义 并 调用 一 个 函数 来 确定 当前 脚本 运行 时 是 否 为 严格 模式 


var strict=(function(){return!ithis;}()); 


8.2.2 方法 调用 


一 个 方法 无 非 是 个 保存 在 一 个 对 象 的 属性 里 的 JavaScript 函 数 。 如 采 有 
一 个 函数 f 和 一 个 对 象 o， 则 可 以 用 下 面 的 代码 给 o 定 义 一 个 名 为 m() 的 


给 对 象 o 定 义 了 方法 m0， 调 用 它 时 就 像 这 样 : 


o.m(); 


或 者 ， 如 果 m0 需 要 两 个 实 参 ， 调 用 起 来 则 像 这 样 : 


o.m(x,y); 


上 面 的 代码 是 一 个 调用 表达 式 : 它 包括 一 个 图 数 表达 式 o.m， 以 及 两 个 
实 参 表达 式 x 和 y， 函 数 表达 式 本 和 号 就 是 一 个 属性 访问 表达 式 ( 见 4.4 
ee 这 意味 着 该 函数 伞 当做 一 个 方法 ， 而 不 是 作为 一 个 普通 函数 来 
调用 。 


对 方法 调用 的 参数 和 返回 值 的 处 理 ， 和 上 面 所 描述 的 普通 函 数 调用 完 
全 一 致 。 但 是 ， 方 法 调用 和 函数 调用 有 一 个 重要 的 区 别 ， 即 : 调用 上 
下 文 。 属 性 访问 表达 式 由 两 部 分 组 成 : 一 个 对 象 (本 例 中 的 o) 和 属性 
名 称 (m) 。 在 像 这 样 的 方法 调用 表达 式 里 ， 对 象 o 成 为 调用 上 下 文 ， 
函数 体 可 以 使 用 关键 字 this 引 用 该 对 象 。 下 面 是 一 个 具体 的 例子 : 


人 


var calculator={// 对 象 


operand1:1, 


operand2:1, 


add:function( ){// 注 意 this 关 键 字 的 用 法 ，this 指 代 当 前 对 象 


this.result=this.operandi+this.operand2; 


} 


}; 


calculator .add( ) ;// 这 个 方法 调用 计算 1+1 的 结果 


calculator.result//=>2 


大 多 数 方法 调用 使 用 点 符号 来 访问 属性 ， 使 用 方 括号 (的 属性 访问 表 
达 式 ) 也 可 以 进行 属性 访问 操作 。 下 面 两 个 例子 都 是 函数 调用 : 


o["m"](x,y); /om(x,y) 的 另外 一 种 写法 


a[6](z)// 同 样 是 一 个 方法 调用 〈 


里 假设 a[0] 是 一 个 函数 ) 


全 


方法 调用 可 能 包括 更 复杂 的 属性 访问 表达 式 : 


customer .surname.toUpperCase();// 调 用 customer .surname 的 方法 


也 


f( ) .m( ) ; // 在 f( ) 调 用 结束 后 继续 调用 返 臣 


中 的 方法 m( ) 


方法 和 this 关 键 字 是 面 癌 对 象 编程 范例 的 核心 。 任 何 图 数 只 要 作为 方法 
调用 实际 上 都 会 传 入 一 个 隐 式 的 实 参 一 一 这 个 实 参 十 一 个 对 象 ， 方 法 
调用 的 母体 束 是 这 个 对 象 。 通 常 来 讲 ， 基 于 那个 对 象 的 方法 可 以 执行 
多 种 操作 ， 方 法 调用 的 语法 已 经 很 清晰 地 表明 了 函数 将 基于 一 个 对 象 
进行 操作 ， 比 较 下 面 两 行 代码 : 


rect.setSize(width,height); 


setRectSize(rect,width,height); 


我 们 假设 这 两 行 代 码 的 功能 完全 一 样 ， 它 们 都 作用 于 一 个 假定 的 对 象 
rect。 可 以 看 出 ， 第 一 行 的 方法 调用 语法 非常 清晰 地 表明 这 个 函数 执行 
的 载体 是 rect 对 象 ， 函 数 中 的 所 有 操作 都 将 基于 这 个 对 象 。 

方法 链 
当 方 法 的 返回 值 是 一 个 对 象 ， 这 个 对 象 还 可 以 再 调用 它 的 方法 。 这 种 
方法 调用 序列 中 (通常 称 为 “ 链 * 或 者 “级 联 ”) 每 次 的 调用 结果 都 是 另 
外 一 个 表达 式 的 组 成 部 分 。 比 如 ， 基 于 jQuery 库 (参见 第 19 章 ) ， 我 
们 常常 会 这 样 写 代码 : 


// 找 到 所 有 的 header， 取 得 它们 id 的 上 映射， 转换 为 数组 并 对 它们 进行 排序 


$(":header").map(function(){return this.id}).get().sort(); 


当 方 法 并 不 需要 返回 值 时 ， 最 好 直接 运 回 this。 如 末 在 设计 的 API 中 一 
直 采 用 这 种 方式 (每 个 方法 都 返回 this) ， 使 用 API 就 可 以 进行 “ 链 式 调 
用 ”中 风格 的 编程 ， 在 这 种 编程 风格 中 ， 只 要 指定 一 次 要 调用 的 对 象 

即 可 ， 余 下 的 方法 都 可 以 基于 此 进行 调用 : 


shape.setX(100).setY(100).setSize(50).setOutline("red").setFill("blue").draw(); 


不 要 将 方法 的 链 式 调 用 和 构造 画 数 的 链 式 调用 混为一谈 ，9.7.2 下 将 会 
讨论 构造 男 数 的 链 式 调用 。 


需要 注意 的 是 ，this 是 一 个 关键 字 ， 不 是 变量 ， 也 不 是 属性 名 。 
JavaScript 的 语法 不 允许 给 this 赋 值 。 


和 变量 不 同 ， 关 键 字 this 没 有 作用 域 的 限制 ， 般 套 的 函数 不 会 从 调用 它 
的 函数 中 继承 this。 如 果 藤 套 函 数 作为 方法 调用 ， 其 this 的 值 指 癌 调用 
它 的 对 象 。 如 采 藤 确 男 数 作为 男 数 调用 ， 其 this 值 不 是 全 局 对 象 〈 非 严 
格 模式 下 ) 就 是 undefined 〈 严 格 模式 下 ) 。 很 多 人 误 以 为 调用 磐 套 函 
数 时 this 会 指 问 调用 外 层 函 数 的 上 下 文 。 如 果 你 想 访 问 这 个 外 部 函数 的 


this 值 ， 需 要 将 his 的 值 保存 在 一 个 变量 里 ， 这 个 变量 和 内 部 函数 都 同 
在 一 个 作用 域内 。 通 党 使 用 变量 self 来 保存 this， 比 如 : 


var 0={// 对 象 


m:function(){// 对 象 中 的 方法 m( ) 


var self=this;// 将 this 的 值 保存 至 一 个 变量 中 


console.1og(this===o);// 输 出 true，this 就 是 这 个 对 象 0 


f( ) ; // 调 用 辅助 画 数 f( ) 


function f(){// 定 义 一 个 失 套 函数 f() 


console.1og(this===o);//"false'" :this 的 值 是 全 局 对 象 或 undefined 


console.1log(self===0);//"true":self 指 外 部 函数 的 this 值 


} 


} 


}; 


0.m( ) ;// 调 用 对 象 o 的 方法 m( ) 


在 8.7.4 节 的 例 8-5 中 有 var self=this 更 切合 实际 的 用 法 。 
8.2.3 ”构造 畏 数 调用 


如 果 函 数 或 者 方法 调用 之 前 各 有 关键 子 new， 它 谍 构 成 构造 画 数 调用 

(构造 瑟 数 调 用 在 4.6 节 和 6.1.2 广 有 简单 介绍 ， 第 9 革 会 对 构造 函数 做 
更 详细 的 讨论 ) 。 构 造 函 数 调 用 和 普通 的 函数 调用 以 及 方法 调用 在 实 
参 处 理 、 调 用 上 下 文 和 返回 值 方面 都 有 不 同 。 


如 果 构 造 画 数 调 用 在 圆 括号 内 包含 一 组 实 参 列 表 ， 先 计算 这 些 实 参 表 
达 式 ， 然 后 传 入 于 数 内 ， 这 和 函数 调用 和 方法 调用 是 一 致 的 。 但 如 采 
构造 函数 没有 形 参 ，JavaScript 构 造 画 数 调用 的 语法 钙 人 允许 省 略 实 参 列 
表 和 圆 括号 的 。 凡 是 没有 形 参 的 构造 画 数 调用 都 可 以 省 略 圆 括号 ， 比 
如 ， 下 面 这 两 行 代码 就 是 等 价 的 : 


var o=new Object(); 


Var o=new Object,; 


构造 画 数 调用 创建 一 个 新 的 空 对 象 ， 这 个 对 象 继 承 目 构 造 函 数 的 
prototype 必 性。 构造 画 数 试图 初始 化 这 个 新 创建 的 对 象 ， 并 将 这 个 对 
象 用 做 其 调用 上 下 文 ， 因 此 构造 函数 可 以 使 用 this 关 键 字 来 引用 这 个 新 
创建 的 对 象 。 注 意 ， 尺 管 构造 瑟 数 看 起 来 像 一 个 方法 调用 ， 它 依然 会 
使 用 这 个 新 对 象 作为 调用 上 下 文 。 也 整 是 说 ， 在 表达 式 new o.mO0 中 ， 
调用 上 下 文 并 不 是 o。 


构造 函数 通常 不 使 用 return 关 键 字 ， 它 们 通 肖 初始 化 靳 对 象 ， 当 构造 琅 
数 的 函数 体 执行 完毕 时 ， 它 会 显 式 返回 。 在 这 种 情况 下 ， 构 造 钞 数 调 
用 表达 式 的 计算 结果 束 是 这 个 靳 对 象 的 值 。 然 而 如 采 构 造 钞 数 显 式 地 
使 用 return 语 名 返回 一 个 对 象 ， 那 么 调用 表达 式 的 值 就 是 这 个 对 象 。 如 
果 构 造 画 数 使 用 retum 语 句 但 没有 指定 返回 值 ， 或 者 返回 一 个 原始 值 ， 
那么 这 时 将 忽略 返回 值 ， 同 时 使 用 这 个 新 对 象 作为 调用 结果 。 


8.2.4 间接 调用 


JavaScript 中 的 函数 也 是 对 象 ， 和 其 他 JavaScript 对 象 没 什么 两 样 ， 函数 
对 象 也 可 以 包含 方法 。 其 中 的 两 个 方法 call0 和 applyO 可 以 用 来 间接 地 
调用 函数 。 两 个 方法 都 允许 显 式 指定 调用 所 需 的 this 值 ， 也 残 是 说 ， 任 
何 函 数 可 以 作为 任何 对 象 的 方法 来 调用 ， 哪 介 这 个 函数 不 是 那个 对 象 
的 方法 。 两 个 方法 都 可 以 指定 调用 的 实 参 。ca1l0 方 法 使 用 它 自 有 的 实 
参 列 表 作 为 函数 的 实 参 ，apply0) 方 法 则 要 求 以 数组 的 形式 传 入 参数 。 
8.7.3 节 会 有 关于 call0 和 apply0 方 法 的 详细 讨论 。 


8.3 ”函数 的 实 参 和 形 参 


JavaScript 中 的 函数 定义 并 未 指定 函数 形 参 的 类 型 ， 男 数 调用 也 未 对 传 
入 的 实 参 值 做 任何 类 型 检查 。 实 际 上 ，JavaScript 函 数 调用 甚至 不 检查 
传 入 形 参 的 个 数 。 下 面 几 节 将 会 讨论 当 调 用 函数 时 的 实 参 个 数 和 声明 
的 形 参 个 数 不 匹 配 时 出 现 的 状况 ， 同 样 说 明了 如 何 显 式 测试 函数 实 参 
的 类 型 ， 以 避免 非法 的 实 参 传 入 函数 。 


8.3.1 可 选 形 参 


当 调 用 函 数 的 时 候 传 入 的 实 参 比 函 数 声明 时 指定 的 形 参 个 数 要 少 ， 剩 
下 的 形 参 都 将 设置 为 undefined 值 。 因 此 在 调用 函数 时 形 参 是 否 可 选 以 
及 是 否 可 以 省 略 应当 保 持 较 好 的 适应 性 。 为 了 做 到 这 一 点 ， 应 当 给 省 
略 的 参数 赋 一 个 合理 的 默认 值 ， 来 看 这 个 例子 : 


// 将 对 象 o 中 可 枚 举 的 属性 名 追加 至 数组 a 中 ， 并 返回 这 个 数组 a 


// 如 果 省 略 a， 则 创建 一 个 新 数组 并 返回 这 个 新 数组 


function getPropertyNames(o,/*optional*/a)t{ 


if(a===undefined)a=[];// 如 果 未 定义 ， 则 使 用 新 数组 


for(var property in o)a.push(property); 


return a; 


} 


// 这 个 函数 调用 可 以 传 入 1 个 或 2 个 实 参 


var a=getPropertyNames(0);// 将 o 的 属性 存储 到 一 个 新 数组 中 


getPropertyNames(p,a);// 将 p 的 属性 追加 至 数组 a 中 


如 果 在 第 一 行 代码 中 不 使 用 if 语句 ， 可 以 使 用 "> 运算 符 ， 这 是 一 种 习 
惯用 法 外. 


a=al|[]; 


回忆 一 下 ，4.10.2 贡 介绍 了 “运算 符 ， 如 采 第 一 个 实 参 是 真 值 的 话 束 
返回 第 一 个 实 参 ; 否则 返回 第 二 个 实 参 。 在 这 个 场景 下 ， 如 有 果 作为 第 
二 个 实 参 传 入 任意 对 象 ， 那 么 函数 束 会 使 用 这 个 对 象 。 如 有 果 省 略 挥 第 
二 个 实 参 (或 者 传递 null 以 及 其 他 任何 假 值 ，， 那 么 就 新 创建 一 个 空 
数组 ， 并 赋值 给 a 。 


需要 注意 的 是 ， 当 用 这 种 可 选 实 参 来 实现 丽 数 时 ， 需 要 将 可 选 实 参 放 
在 实 参 列表 的 最 后 。 那 些 调用 你 的 画 数 的 程序 员 是 没 办 法 省 略 第 一 个 
实 参 并 传 入 第 二 个 实 参 的 ， 它 必须 将 undefined 作 为 第 一 个 实 参 显 式 伟 
入 呈 ， 同样 注 意 在 本 数 定义 中 使 用 注释 opuonal/ 来 强调 形 参 是 可 和 


8.3.2 ”可 变 长 的 实 参 列 表 : 实 参 对 象 


当 调 用 函数 的 时 候 传 入 的 实 参 个 数 超过 函数 定义 时 的 形 参 个 数 时 ， 没 
有 办 法 直接 获得 未 命名 值 的 引用 。 参 数 对 和 象 解决 了 这 个 问题 。 在 函数 
体内 ， 标 识 符 arguments 古 指 癌 实 参 对 象 的 引用 ， 实 参 对 象 是 一 个 类 数 
组 对 象 《参照 7.11 全 ) ， 这 样 可 以 通过 数字 下 标 束 能 访问 传 入 函数 的 

实 参 值 ， 而 不 用 非 要 通过 名 子 来 得 到 实 参 。 


假设 定义 了 函数 f， 它 的 实 参 只 有 一 个 x。 如 果 调 用 这 个 芳 数 时 传 入 两 
个 实 参 ， 第 一 个 实 参 可 以 通过 参数 名 x 来 获得 ， 也 可 以 通过 
arguments[0] 来 得 到 。 第 二 个 实 参 只 能 通过 arguments[1] 来 得 到 。 此 
外 ， 和 真正 的 数组 一 样 ，arguments 也 包含 一 个 length 属 性 ， 用 以 标识 
其 所 包含 元 素 的 个 数 。 因 些 ， 如 果 调 用 函数 {0 时 传 入 两 个 参数 ， 
arguments.length 的 值 就 是 2。 


实 参 对 象 在 很 多 地 方 都 非常 有 用 ， 下 面 的 例子 展示 了 使 用 它 来 验证 实 
参 的 个 数 ， 从 而 调用 正确 的 逻辑 ， 因 为 JavaScript 本 身 不 会 这 么 做 : 


function f(x,y,z) 


{ 


// 首 先 ， 验 证 传 入 实 参 的 个 数 是 否 正确 


if(arguments.1length!=3){ 


throw new Error("function f called with"+arguments.length+ 


"arguments,but it expects 3 arguments."); 


} 
// 再 执行 函数 的 其 他 逻辑 ,. ， 
} 


需 注意 的 是 ， 通 营 不 必 像 这 样 检查 实 参 个 数 。 大 多 数 情 况 下 
JavaScript 的 默认 行为 是 可 以 满足 需要 的 : 省 略 的 实 参 都 将 是 
undefined， 多 出 的 参数 会 目 动 省 略 。 


实 参 对 象 有 一 个 重要 的 用 处 ， 就 是 让 函数 可 以 操作 任意 数量 的 实 参 。 
下 面 的 函数 就 可 以 接收 任意 数量 的 实 参 ， 并 返回 传 入 实 参 的 最 大 值 
(内 置 画 数 Max.max() 的 功能 与 之 类 似 ) : 


function max(/*...*/){ 


var max=Number ,NEGATIVE_INFINITY,;// 遍 历 实 参 ， 查 找 并 记 住 最 大 值 


for(var i=0;i<arguments.length;i++) 


if(arguments[I]>max)max=arguments[i];// 返 回 最 大 值 


return max 


var largest=max(1,10,100,2,3,1000,4,5,10000,6);//=>10000 


类 似 这 种 函数 可 以 接收 任意 ` 个 数 的 实 参 ， 这 种 函数 也 称 为 “不 定 实 参 函 
数 ” (varargs function) [lo-， 这 个 术语 源 自 古老 的 C 语 言 。 


注意 ， 不 定 实 参 画 数 的 实 参 个 数 不 能 为 零 ，arguments[] 对 象 最 适合 的 
应 用 场景 是 在 这 样 一 类 画 数 中 ， 这 类 画 数 包含 国 定 个 数 的 命名 和 必需 
参数 ， 以 及 随后 个 数 不 定 的 可 选 实 参 。 


记 住 ，arguments 并 不 是 真正 的 数组 ， 它 是 一 个 实 参 对 象 。 每 个 实 参 对 
象 都 包含 以 数字 为 索引 的 一 组 元 素 以 及 Jength 属 性 ， 但 它 毕竟 不 是 真正 
的 数组 。 可 以 这 样 理解 ， 它 是 一 个 对 象 ， 只 是 页 巧 具有 以 数字 为 索引 

的 属性 。 参 照 7.11 市 以 获得 更 多 关于 类 数组 对 象 的 信息 。 


数组 对 象 包 含 一 个 非 同 寻常 的 特性 。 在 非 严格 模式 下 ， 当 一 个 函数 包 
合 知 干 形 参 ， 实 参 对 象 的 数组 元 素 是 函数 形 参 所 对 应 实 参 的 别名 ， 实 
参 对 象 中 以 数字 索引 ， 并 且 形 参 名 称 可 以 认为 是 相同 变量 的 不 同 命 
名 。 通 过 实 参 名 字 来 修改 实 参 值 的 话 ， i ei 
取 到 更 改 后 的 值 ， 下 面 这 个 例子 清楚 地 说 明了 这 一 点 


SN 


function f(x){ 


console.1og(x);// 输 出 实 参 的 初始 值 


arguments[0]=null;// 修 改 实 参 数组 的 元 素 同 样 会 修改 x 的 值 


console .log(x);// 输 出 "null" 


} 


如 果实 参 对 象 是 一 个 普 裔 数组 的 话 ， 第 二 条 console.log(x) 语 句 的 结果 
绝对 不 会 是 null， 在 这 个 例子 中 ，arguments[0] 和 x 指 代 同 一 个 值 ， 修 改 
其 中 一 个 的 值 会 影响 到 另 一 个 。 


在 ECMAScript 5 中 移 除了 实 参 对 象 的 这 个 特殊 特性 。 在 严格 模式 下 还 
有 一 点 (和 非 严 格 模式 下 相 比 的 ) 不 同 ， 在 非 严 格 模式 中 ， 画 数 里 的 
arguments 仅 仅 是 一 个 标识 符 ， 在 严格 模式 中 ， 它 变 成 了 一 个 保留 字 。 


严格 模式 中 的 函数 无 法 使 用 arguments 作 为 形 参 名 或 局 部 变量 名 ， 也 不 


能 给 arguments 赋 值 。 
callee 和 caller 属 性 


除了 数组 元 素 ， 实 参 对 象 还 定义 了 callee 和 caller 必 性。 在 ECMAScript 
5 严格 模式 中 ， 对 这 两 个 属性 的 读 写 操作 都 会 产生 一 个 类 型 错误 。 而 在 
韭 严 格 模 式 下 ，ECMAScript 标 准 规范 规定 callee 属 性 指 代 当前 正在 执 
行 的 钞 数 。caller 是 非 标 准 的 ， 但 大 多 数 浏 览 妖 都 实现 了 这 个 属性 ， 它 
指 代 调用 当前 正在 执行 的 函数 的 函数 。 通 过 caller 属 性 可 以 访问 调用 

栈 。callee 属 性 在 某 些 时 候 会 非常 有 用 ， 比 如 在 匿名 函数 中 通过 callee 
来 递归 地 调用 自身 。 


var factorial=function(x){ 
if(x<=1)return 1; 
return x*arguments.callee(x-1); 


}; 


8.3.3 ”将 对 象 属性 用 做 实 参 


当 一 个 函数 包含 超过 三 个 形 参 时 ， 对 于 程序 员 来 说 ， 要 记 住 调 用 函数 
中 实 参 的 正确 顺序 实在 让 人 头疼 。 每 次 调用 这 个 函数 时 都 要 不 厌 其 烦 
地 查阅 文档 ， 为 了 不 让 程序 员 每 次 都 翻阅 手册 这 么 麻烦 ， 最 好 通过 名 / 
值 对 的 形式 来 传 入 参数 ， 这 样 参 数 的 顺序 就 无 天 紧要 了 。 为 了 实现 这 
种 风格 的 方法 调用 ， 定 义 函 数 的 时 候 ， 传 入 的 实 参 都 写 入 一 个 单独 的 
对 象 之 中 ， 在 调用 的 时 候 传 入 一 个 对 象 ， 对 象 中 的 名 / 值 对 是 真正 需要 
的 实 参数 据 。 下 面 的 代码 怠 展 示 了 这 种 风格 的 轴 数 调用 ， 这 种 写法 允 
许 在 函数 中 设置 省 略 参 数 的 默认 值 : 


sw 


/将 原始 数组 的 length 元 素 复制 至 目标 数组 


// 开 始 复 制 原始 数组 的 from_start 元 素 


下 


出 至 目标 数组 的 to_start 中 


// 将 其 复 


// 要 记 住 实 参 的 顺序 并 不 容易 


function arraycopy(/*array*/from,/*index*/from start,/*array*/to,/*index*/to_start, 


/*integer*/length) 


// 逻 辑 代码 


// 这 个 版 本 的 实现 效率 稍微 有 些 低 ， 但 你 不 必 再 去 记 住 实 参 的 顺序 


// 并 且 from_start 和 to_start 都 默认 为 9 


function easycopy(args)t{ 


arraycopy(args.from, 


args,from_start||9,// 注 意 这 里 设置 了 默认 值 


args.to, 


args.to_start||0,args.length); 


// 来 看 如 何 调用 easycopy() 


var a=[1,2,3,4],b=[]; 


easycopy({from:a,to:b,length:4}); 


JavaScript 方 法 的 形 参 并 未 声明 类 型 ， 在 形 参 传 入 函数 体 之 前 也 未 做 任 
何 类 型 检查 。 可 以 采用 语义 化 的 单词 来 给 函数 实 参 命名 ， 或 者 像 刚 才 
的 示例 代码 中 的 arraycopy0 方 法 一 样 给 实 参 补充 注释 ， 以 此 使 代码 目 
文档 化 ， 对 于 可 选 的 实 参 来 说 ， 可 以 在 注释 中 补充 一 下 “这 个 实 参 是 可 
选 的 ”。 当 一 个 方法 可 以 接收 任意 数量 的 实 参 时 ， 可 以 使 用 省 略 号 : 


function max(/*number...*/){/* 代 码 区 */} 


3.8 ”已 经 提 到 ，JavaScript 在 必要 的 时 候 会 进行 类 型 转换 。 因 此 如 果 
函数 期 望 接 收 一 个 字符 串 实 参 ， 而 调用 函数 时 传 入 其 他 类 型 的 值 ， 所 
传 入 的 值 会 在 函数 体内 将 其 用 做 字符 串 的 地 方 转换 为 字符 串 类 型 。 所 
有 的 原始 类 型 都 可 以 转换 为 字符 串 ， 所 有 的 对 象 都 包含 toString(0) 方 法 
(尽管 不 一 定 有 用 ) ， 所 以 这 种 场景 下 是 不 会 有 任何 错误 的 。 


然而 事情 不 总 是 这 样 ， 回 头 看 一 下 刚才 提 到 的 arraycopy0) 方 法 。 这 个 
方法 期 望 它 的 第 一 个 实 参 是 一 个 数组 。 当 传 入 一 个 非 数组 的 值 作 为 第 
一 个 实 参 时 〈 通 常会 传 入 类 数组 对 象 ) ， 尽 管 看 起 来 是 没 问 题 的 ， 实 
际 上 会 出 错 。 除 非 所 写 的 函数 是 只 用 到 一 两 次 的 “用 完 即 于 ”函数 ， 你 
应 当 添 加 类 似 的 实 参 类 型 检查 逻辑 ， 因 为 宁愿 程序 在 传 入 非法 值 时 报 
错 ， 也 不 愿 非 法 值 导 致 程序 在 执行 时 报错 ， 相 比 而 言 ， 逻 辑 执行 时 的 
报错 消息 不 其 清晰 且 更 难处 理 。 下 面 这 个 例子 中 的 函数 束 做 了 这 种 类 
型 检查 。 注 意 这 里 使 用 了 7.11 市 的 isArrayLikeO 函 数 : 


// 返 回 数组 (或 类 数组 对 象 ， a 的 元 素 的 累加 和 


// 数 组 a 中 必须 为 数字 、null 和 undefined 的 元 素 都 将 忽略 


function sum(a){ 


if(isArrayLike(a)){ 


Var total=0; 


for(var i=0;i<a.length;i++){// 遍 历 所 有 元 素 


var element=a[i]; 
if(element==null)continue;// 跳 过 null 和 undefined 
if(isFinite(element))total+=element,; 

else throw new Error("sum():elements must be finite numbers"); 


} 


return total,; 


} 


else throw new Error("sum():argument must be array-like"); 


} 


这 里 的 sum0 方 法 进行 了 非常 严格 的 实 参 检查 ， 当 传 入 非法 的 值 时 会 给 
出 容易 看 懂 的 错误 提示 信息 。 但 当 涉 及 类 数组 对 象 和 真正 的 数组 (不 
地 谨 雪 组 元 来 是 否 是 mull 还是 ndefined) ， 这 种 做 法 各 来 的 灵活 作 其 


JavaScript 是 一 种 非常 灵活 的 弱 类 型 语言 ， 有 时 适合 编写 实 参 类 型 和 实 
参 个 数 的 不 确定 性 的 函数 。 接 下 来 的 flexisum() 方 法 束 是 这 样 (可 能 
向 了 一 个 极端 ) 。 比 如 ， 它 可 以 接收 任意 数量 的 实 参 ， 并 可 以 递归 地 
处 理 实 参 是 数组 的 情况 ， 这 样 的 话 ， 它 束 可 以 用 做 不 定 实 参 函 数 或 者 
实 参 是 数组 的 函数 。 此 外 ， 这 个 方法 尽 可 能 的 在 抛 出 异常 之 前 将 非 数 
字 转 换 为 数字 : 


function flexisum(a)t{ 


Var total=0 


for(var i=0;i<arguments.length;i++){ 


var element=arguments[i],n; 


if(element==null)continue;// 忽 略 null 和 undefined 实 参 


if(isArray(element ) )// 如 果实 参 是 数组 


n=flexisum.apply(this,element );// 说 归 地 计算 累加 和 


else if(typeof element==="function")// 否 则 ， 如 果 是 函数 ,.， 


n=Number (element() ) ;// 调 用 它 并 做 类 型 转换 


else 
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接 做 类 型 转换 


n=Number (element ) ; // 和 否 见 


if(isNaN(n))// 如 果 无 法 转换 为 数字 ， 则 抛 出 异常 


throw Error("flexisum():can't convert"+element+"to number"); 


total+=n;// 否 则 ， 将 n 累 加 至 total 


return total,; 


8.4 作为 值 的 画 效 


画 数 可 以 定义 ， 也 可 以 调用 ， 这 是 画 数 最 重要 的 特性 。 画 数 定义 和 调 
用 是 JavaScript 的 词法 特性 ， 对 于 其 他 大 多 数 编程 语言 来 说 亦 是 如 此 。 
然而 在 JavaScript 中 ， 画 数 不 仅 是 一 种 语法 ， 也 是 值 ， 也 就 是 说 ， 可 以 
将 画 数 赋值 给 变量 ， 存 储 在 对 象 的 属性 或 数组 的 元 素 中 ， 作 为 参数 传 
入 另外 一 个 画 数 等 四 。 


为 了 便于 理解 JavaScript 中 的 函数 是 如 何 用 做 数据 的 以 及 JavaScript 语 
法 ， 来 看 一 下 这 样 一 个 函数 定义 : 


function square(x){return x*x;} 


这 个 定义 创建 一 个 新 的 画 数 对 象 ， 并 将 其 赋值 给 变量 square 。 函数 的 
名 字 实 际 上 是 看 不 见 的 ， 它 (square) 仅仅 是 变量 的 名 字 ， 这 个 变量 
es 。 畏 数 还 可 以 赋值 给 其 他 的 变量 ， 并 且 仍 可 以 正常 工 


var S=sduare;// 现 在 s 和 square 指 代 同 一 个 函数 


square(4);//=>16 


s(4);//=>16 


除了 可 以 将 函数 赋值 给 变量 ， 同 样 可 以 将 函数 赋值 给 对 象 的 属性 。 当 
函数 作为 对 象 的 属性 调用 时 ， 画 数 融 称 为 方法 : 


var o={fsquare:function(x){return x*x;}};// 对 象 直接 


var y=0.square(16);//y 等 于 256 


函数 甚至 不 需要 珊 名 字 ， 当 把 它们 赋值 给 数组 元 素 时 : 


人 


var a=[function(x){freturn x*x;},20];// 数 组 


a[o](a[1]);//=>400 


最 后 一 句 代 码 看 起 来 很 奇怪 ， 但 的 确 是 合法 的 琅 数 调用 表达 式 ! 


例 8-2 展 示 了 将 函数 用 做 值 时 的 一 些 例子 ， 这 段 代 码 可 能 会 难 读 一 些 ， 
但 注释 解释 了 代码 的 具体 含义 : 


例 8-2: 


将 函数 用 做 值 


// 在 这 里 定义 一 些 简单 的 画 数 


function 


function 


function 


function 


add(x,y){return x+y;} 


subtract(x,y)t{return x-y;} 


multiply(x,y){return x*y;} 


divide(x,y)t{return x/y;}// 这 里 的 画 数 以 上 面 的 某 个 画 数 作为 参数 


// 并 给 它 传 入 两 个 操作 数 然 后 调用 它 


function 


operate(operator, operand1, operand2){ 


return operator(operand1, operand2); 


// 这 行 代 码 所 示 的 函数 调用 实际 上 计算 了 (2+3)+(4*5) 的 值 


var i=operate(add,operate(add,2,3),operate(multiply,4,5));// 我 们 为 这 个 例 


单 的 画 数 


// 这 次 实现 使 用 函数 直接 量 ， 这 些 画 数 直 接 量 定 义 在 一 个 对 象 直接 量 中 


var operators={ 


add:function(x,y){return x+y;}, 


subtract: 


multiply: 


function(x,y){return x-y;}, 


function(x,y){return x*y;}, 


divide:function(x,y){return x/y;}, 


pow:Math. 


pow// 使 用 预定 义 的 函数 


i 


J」 对 


Wh 


ul 


准 


当 


个 简 


}; /7 这 个 函数 接收 一 个 名 字 作 为 运算 符 ， 在 对 象 中 查找 这 个 运算 符 


// 然 后 将 它 作 用 于 所 提供 的 操作 数 


// 注 意 这 里 调用 运算 符 函 数 的 语法 


function operate2(operation, operand1, operand2){ 


return operators[operation](operand1, operand2); 


else throw"unknown operator"; 


// 这 样 来 计算 ("hello"+""+"world" ) 的 值 


var j=operate2("add", "hello", operate2("add","", "world"));// 使 用 预定 义 的 函数 Math .pow( ) 


var k=operate2("pow",10,2); 


这 里 是 将 函数 用 做 值 的 另外 一 个 例 于 ， 考 虑 一 下 Array.sort() 方 法 。 这 
个 方法 用 来 对 数组 元 素 进 行 排序 。 因 为 排序 的 规则 有 很 多 中- (基于 数 
值 大 小 、 字 母 表 顺序 、 日 期 大 小 、 从 小 到 大 、 从 大 到 小 等 ) ，sort() 方 
法 可 以 接收 一 个 函数 作为 参数 ， 用 来 处 理 具体 的 排序 操作 。 这 个 函数 
的 作用 非常 简单 ， 对 于 任意 两 个 值 都 返回 一 个 值 ， 以 指定 它们 在 排序 
后 的 数组 中 的 先后 顺序 。 这 个 函数 参数 使 得 Array.sort0 具 有 更 完美 的 
通用 性 和 无 限 可 扩展 性 ， 它 可 以 对 任何 类 型 的 数据 进行 任意 排序 。 
7.8.3 访 有 示例 代码 。 


日 定义 函数 属性 


Javascript 中 的 函数 并 不 是 原始 值 ， 而 是 一 种 特殊 的 对 象 ， 也 就 是 说 ， 
画 数 可 以 拥有 属性 。 当 画 数 需要 一 个 “静态 ”变量 来 在 调用 时 保持 某 个 
值 不 变 ， 最 方便 的 方式 就 是 给 函数 定义 属性 ， 而 不 是 定义 全 局 变量 ， 
显然 定义 全 局 变量 会 让 命名 空间 变 得 更 加 杂乱 无 章 。 比 如 ， 假 设 你 想 


写 一 个 返回 一 个 唯一 整数 的 画 数 ， 不 管 在 哪里 调用 函数 都 会 返回 这 个 
整数 。 而 函数 不 能 两 次 返回 同一 个 值 ， 为 了 做 到 这 一 点 ， 函 数 必须 能 
够 跟踪 它 每 次 返回 的 值 ， 而 且 这 些 值 的 信息 需要 在 不 同 的 函数 调 过 程 
中 持久 化 。 可 以 将 这 些 信息 存放 到 全 局 变量 中 ， 但 这 并 不 是 必需 的 ， 
因为 这 个 信息 仅仅 是 函数 本 映 用 到 的 。 最 好 将 这 个 信息 你 存 到 函数 对 
象 的 一 个 属性 中 ， 下 面 这 个 例子 束 实 现 了 这 样 一 个 画 数 ， 每 次 调用 配 
数 都 会 返回 一 个 唯一 的 整数 : 


// 初 始 化 函数 对 象 的 计数 器 属性 


// 由 于 函数 声明 被 提前 了 ， 因 此 这 里 是 可 以 在 函数 声明 


// 之 前 给 它 的 成 员 赋值 的 


uniqueInteger .counter=0;// 每 次 调用 这 个 函数 都 会 返回 一 个 不 同 的 整数 


// 它 使 用 一 个 属性 来 记 住 下 一 次 将 要 返回 的 值 


function uniqueInteger(){ 


return uniqueInteger.counter++;// 先 返回 计数 器 的 值 ， 然 后 计数 器 自 增 1 


来 看 另外 一 个 例子 ， 下 面 这 个 函数 factorial(0) 使 用 了 目 号 的 属性 《将 目 
吴 当 做 数组 来 对 待 ) 来 缓存 上 一 次 的 计算 结果 : 


// 计 算 阶乘 ， 并 将 结果 缓存 至 函数 的 属性 中 


function factorial(n){ 


if(isFinite(n)&&n>0&&n==Math.round(n)){// 有 限 的 正 整 数 


if(!(n in factorial))// 如 果 没 有 缓存 结果 


factorial[n]=nx*factorial(n-1);// 计 算 结果 并 缓 有 


return factorial[n];// 返 回 缓存 结果 


} 


else return NaN;// 如 果 输 入 有 误 


} 


factorial[1]=1;// 初 始 化 缓存 以 保存 这 种 基本 情况 


8.5 ”作为 命名 空间 的 函数 


3.10.1 节 介 绍 了 JavaScript 中 的 函数 作用 域 的 概念 : 在 函数 中 声明 的 
变量 在 整个 函数 体内 都 是 可 见 的 《包括 在 般 套 的 函数 中 ) ， 在 函数 的 
外 部 是 不 可 见 的 。 不 在 任何 函数 内 声明 的 变量 是 全 局 变量 ， 在 整个 
JavaScript 程 序 中 都 是 可 见 的。 在 JavaScript 中 是 无 法 声明 只 在 一 个 代码 
块 内 可 见 的 变量 的 小， 基于 这 个 原因 ， 我 们 常常 简单 地 定义 一 个 函数 
人 在 这 个 命名 空间 内 定义 的 变量 都 不 会 污染 到 全 
司 命名 空间 。 


比如 ， 假 设 你 写 了 一 段 JavaScript 模 块 代码 ， 这 上 段 代码 将 要 用 在 不 同 的 
JavaScript 程 序 中 (对 于 客户 端 JavaScript 来 讲 通 常 是 用 在 各 种 各 样 的 网 
页 中 ) 。 和 大 多 数 代码 一 样 ， 假 定 这 段 代 码 定义 了 一 个 用 以 存储 中 间 
计算 结果 的 变量 。 这 样 问 题 就 来 了 ， 当 模块 代码 放 到 不 同 的 程序 中 运 
行 时 ， 你 无 法 得 知 这 个 变量 是 否 已 经 创建 了 ， 如 果 已 经 存在 这 个 变 

量 ， 那 么 将 会 和 代码 发 生 冲 突 。 解 决 办 法 当然 是 将 代码 放 入 一 个 函数 
内 ， 然 后 调用 这 个 函数 。 这 样 全 局 变量 就 变 成 了 函数 内 的 局 部 变量 : 


function mymodule( ){// 模 块 代码 


// 这 个 模块 所 使 用 的 所 有 变量 都 是 局 部 变量 


// 而 不 是 污染 全 局 命名 空间 


} 


mymodule( ) ;// 不 要 瑟 了 还 要 调用 这 个 函数 


这 段 代码 仅仅 定义 了 一 个 单独 的 全 局 变量 : 名 叫 "mymodule" 的 函数 。 
可 以 直接 定义 一 个 匿名 函数 ， 并 在 单个 表达 式 中 调 
它 : 


bz 
[Bs 
出 


(function( ){//mymodu1le() 郴 数 重 写 为 匿名 的 函数 表达 式 


// 模 块 代码 


}() ) ;// 结 束 函 数 定义 并 立即 调用 它 


这 种 定义 匿名 函数 并 立即 在 单个 表达 式 中 调用 它 的 写法 非常 常见 ， 已 
经 成 为 一 种 惯用 法 了 。 注 意 上 面 代 码 的 圆 括号 的 用 法 ，function 之 前 的 
左 圆 括号 是 必需 的 ， 因 为 如 果 不 写 这 个 左 圆 括 号 ，JavaScript 解 释 絮 会 
试 几 将 关键 字 function 解 析 为 函数 声明 语句 。 使 用 圆 括号 JavaScript 解 释 
右 才 会 正确 地 将 其 解析 为 函数 定义 表达 式 。 使 用 圆 括号 是 习惯 用 法 ， 
尽管 有 些 时 候 没 有 必要 也 不 应 当 省 略 。 这 里 定义 的 函数 会 立即 调用 。 


例 8-3 展 示 了 这 种 命名 空间 技术 。 它 定义 一 个 返回 extend() 函 数 的 匿名 
国 数 ， 正 如 在 例 6-2 中 所 展示 的 那样 ， 匿 名 函数 中 的 代码 检测 了 是 人 否 出 
现 了 一 个 众所周知 的 下 bug， 如 果 出 现 了 这 个 bug， 就 返回 一 个 市 补丁 
的 画 数 版 本 。 此 外 ， 这 个 匿名 函数 命名 空间 用 来 隐藏 一 组 属性 名 。 


例 8-3: 特定 场景 下 返回 融 补 丁 的 extend0) 版 本 


// 定 义 一 个 扩展 函数 ， 用 来 将 第 二 个 以 及 后 续 参 数 复制 至 第 一 个 参数 


// 这 里 我 们 处 理 了 IE bug: 在 多 数 IE 版 本 中 


// 如 果 o 的 属性 拥有 一 个 不 可 枚 举 的 同名 属性 ， 则 for/in 循 环 


// 不 会 枚 举 对 象 o 的 可 枚 举 属性 ， 也 就 是 说 ， 将 不 会 正确 地 处 理 诸如 toString 的 属性 


一 


// 除 非 我 们 显 式 检测 它 


var extend=(function(){// 将 这 个 函数 的 返 


可 值 赋值 给 extend 

// 在 修复 它 之 前 ， 首 先 检查 是 否 存 在 bug 
for(var p in{toString:null}){// 如 果 代 码 执 行 到 这 里 ， 那 么 for/in 循 环 会 正确 工作 
// 一 个 简单 版 本 的 extend( ) 函数 


return function extend(o){ 


for(var i=1;i<arguments.length;i++){ 
var source=arguments[i]; 


for(var prop in 


source)o[prop]=source[prop]; 


return o; 


}; 
} 
// 如 果 代 码 执行 到 这 里 ， 说 明 for/in 循 环 不 会 枚 举 测试 对 象 的 toString 属 性 
// 因 此 返回 男 一 个 版 本 的 extend( ) 画 数 ， 


这 个 画 数 显 式 测试 
//0bject .prototype 中 的 不 可 枚 举 属性 


return function patched extend(o){ 


for(var i=1;i<arguments.length;i++){ 


var source=arguments[i];// 复 和 


出 所 有 的 可 枚 举 属 


全 
bn 
[这 
HT 


for(var prop in source)o[prop]=source[prop];// 现 在 检查 特殊 


for(var j=0;j<protoprops.length;j++){ 


prop=protoprops[j]; 


if(source.hasOownProperty(prop))o[prop]=source[prop]; 


} 


} 


return o; 


} ;// 这 个 列表 列 出 了 需要 检查 的 特殊 属性 


EA 


var protoprops= 
["toSstring", "valueOof","constructor", "hasOwnProperty","isPrototypeof","propertyIsEnum 


erable", "toLocalestring"]; 


}()); 


8.6” 闭 包 


和 其 他 大 多 数 现代 编程 语言 一 样 ，JavaScript 也 采用 词法 作用 域 

(lexical scoping) ， 也 就 是 说 ， 画 数 的 执行 依赖 于 变量 作用 域 ， 这 个 
作用 域 是 在 钞 数 定义 时 决定 的 ， 而 不 是 函 数 调 用 时 决定 的 。 为 了 实现 
这 种 词法 作用 域 ，JavaScript 函 数 对 象 的 内 部 状态 不 仅 包含 函数 的 代码 
逻辑 ， 还 必须 引用 当前 的 作用 域 链 (在 继续 阅读 后 续 的 章 科 之前， 应 
当 复习 一 下 3.10 字 和 3.10.3 市 中 讲 到 的 变量 作用 域 和 作用 域 链 的 概 
念 ) 。 函 数 对 象 可 以 通过 作用 域 链 相互 关联 起 来 ， 函 数 体 内 部 的 变量 
部 和 函数 作用 域内 ， 这 种 特性 在 计算 机 科学 文献 中 称 为 “ 团 
包 ” [10].。 


从 技术 的 角度 讲 ， 所 有 的 JavaScript 函 数 都 是 财 包 : 它们 都 是 对 象 ， 它 
们 都 关联 到 作用 域 链 。 定 义 大 多 数 函 数 时 的 作用 域 链 在 调用 函数 时 依 
然 有 效 ， 但 这 并 不 影响 闭 包 。 当 调用 函数 时 闭 包 所 指向 的 作用 域 链 和 
定义 函数 时 的 作用 域 链 不 是 同一 个 作用 域 链 时 ， 事 情 残 变 得 非常 微 

妙 。 当 一 个 函数 靠 套 了 另外 一 个 函数 ， 外 部 函数 将 般 套 的 函数 对 象 作 


为 返回 值 返回 的 时 候 往往 会 发 生 这 种 事情 。 有 很 多 强大 的 编程 技术 都 
利用 到 了 这 类 藤 套 的 轴 数 财 包 ， 以 至 于 这 种 编程 模式 在 JavaScript 中 非 
利 凋 见 。 当 你 第 一 次 碰 到 闭 包 时 可 能 会 觉得 非常 让 人 费解 ， 一 旦 你 理 
忠 能 非常 目 如 地 使 用 它 了 ， 了 解 这 一 点 至 关 重 


理解 闭 包 站 和 完 要 了 解 帜 套 函 数 的 词法 作用 域 规则 。 看 一 下 这 段 代 码 
(这 段 代 码 和 你 刚 在 3.10 节 中 看 到 的 代码 非常 类 似 ) : 


Var scope="global scope";// 


function checkscope(){ 


var scope="local scope";// 局 部 变量 


function f()f{return scope;}// 在 作用 域 中 返回 这 个 值 


return f(); 


} 


checkscope()//=>"]local scope" 


checkscope() 范 数 声 明了 一 个 局 部 变量 ， 并 定义 了 一 个 函数 f()， 函 数 f() 
返回 了 这 个 变量 的 值 ， 最 后 将 函数 {0 的 执行 结果 返回 。 你 应 当 非 常 清 
楚 为 什么 调用 checkscopeO 会 返回 "local scope"。 现 在 我 们 对 这 上 段 代码 
做 一 点 改动 。 你 知道 这 段 代 码 返回 什么 吗 ? 


Var scope="global] scope";// 全 


function checkscope(){ 


var scope="local scope";// 局 部 变量 


function f(){return scope;}// 在 作用 域 中 返回 这 个 值 


return f; 


} 


checkscope( )()// 返 回 值 是 什么 ? 


在 这 段 代 码 中 ， 我 们 将 函数 内 的 一 对 圆 括号 移动 到 了 checkscope0O 之 
后 。checkscope() 现 在 仅仅 返回 函数 内 骸 套 的 一 个 函数 对 象 ， 而 不 是 直 
接 返 回 结 果 。 在 定义 范 数 的 作用 域外 面 ， 调 用 这 个 赂 套 的 函数 (包含 
最 后 一 行 代 码 的 最 后 一 对 圆 括号 ) 会 发 生 什 么 事情 呢 ? 


回想 一 下 词法 作用 域 的 基本 规则 :， JavaScript 函数 的 执行 用 到 了 作用 域 
链 ， 这 个 作用 域 链 是 函数 定义 的 时 候 创 建 的 。 般 套 的 函数 f0 定 义 在 这 
个 作用 域 链 里 ， 其 中 的 变量 scope 一 定 是 局 部 变量 ， 不 管 在 何 时 何 地 执 
行 画 数 f()， 这 种 绑 定 在 执行 {0 时 依然 有 效 。 因 此 最 后 一 行 代码 返 

回 "local scope"， 而 不 是 "global scope"。 简 言 之 ， 闭 包 的 这 个 特性 强大 
到 让 人 吃惊 : 它们 可 以 捕捉 到 局 部 变量 (和 参数 ) ， 并 一 直 保 存 下 
来 ， 看 起 来 像 这 些 变量 绑 定 到 了 在 其 中 定义 它们 的 外 部 函数 。 


实现 闭 包 


如 有 果 你 理解 了 词法 作用 域 的 规则 ， 你 束 能 很 容易 地 理解 哮 包 ， 函数 定 
义 时 的 作用 域 链 到 函数 执行 时 依然 有 效 。 然 而 很 多 程序 员 觉 得 财 包 非 
钊 难 理解 ， 因 为 他 们 在 深入 学 习 闭 包 的 实现 细节 时 将 目 己 搞 得 晕 头 转 
问 。 他 们 觉得 在 外 部 函数 中 定义 的 局 部 变量 在 函数 返回 后 驶 不 存在 了 
十 -， 那 么 嵌 套 的 画 数 如 何 能 调用 不 存在 的 作用 域 链 呢 ? 如 果 你 想 搞 清 
楚 这 个 问题 ， 你 需要 更 深入 地 了 解 类 似 C 语 言 这 种 更 改 层 的 编程 语 
言 ， 并 了 解 基于 栈 的 CPU 架构 : 如 采 一 个 函数 的 局 部 变量 定义 在 CPU 
的 栈 中 ， 那 么 当 画 数 返 回 时 它们 的 确 束 不 存在 了 。 


但 回想 一 下 在 3.10.3 节 中 征 如 何 定义 作用 域 链 的 。 我 们 将 作用 域 链 朱 述 
为 一 个 对 象 列 表 ， 不 是 绑 定 的 栈 。 每 次 调用 JavaScript 函 数 的 时 候 ， 都 
会 为 之 创建 一 个 新 的 对 象 用 来 保存 局 部 变量 ， 把 这 个 对 象 添 加 至 作用 
域 链 中 。 当 男 数 返 回 的 时 候 ， 束 从 作用 域 链 中 将 这 个 绑 定 变量 的 对 象 
删除 。 如 采 不 存在 藤 委 的 男 数 ， 也 没有 其 他 引用 指 癌 这 个 绑 定 对 象 ， 
它 束 会 被 当做 垃圾 回收 挤 。 如 果 定义 了 骨 套 的 函数 ， 每 个 帜 套 的 函数 
都 各 目 对 应 一 个 作用 域 链 ， 并 且 这 个 作用 域 链 指 同 一 个 变量 绑 定 对 


象 。 但 如 果 这 些 舱 套 的 函数 对 象 在 外 部 函数 中 保存 下 来 ， 那 么 它们 也 
会 和 所 指向 的 变量 乡 定 对 象 一 样 当做 垃圾 回收 。 但 是 如 琳 这 个 函数 定 
义 了 骨 套 的 玉 数 ， 并 将 它 作 为 返回 值 返 回 或 者 存储 在 某 处 的 属性 里 ， 
这 时 整 会 有 一 个 外 部 引用 指向 这 个 骨 公 的 函数 。 它 束 不 会 被 当做 垃圾 
回收 ， 并 且 它 所 指向 的 变量 绑 定 对 象 也 不 会 被 当做 垃圾 回收 荆 -。 


在 8.4.1 世 中 定义 了 uniqueInteger0 函 数 ， 这 个 函数 使 用 目 身 的 一 个 属性 
来 保存 每 次 返回 的 值 ， 以 便 每 次 调用 都 能 跟踪 上 次 的 返回 值 。 但 这 种 
做 法 有 一 个 问题 ， 束 是 恶意 代码 可 能 将 计数 器 重 置 或 者 把 一 个 非 整 数 
赋值 给 它 ， 导 致 tniquentergerO 函 数 不 一 定 能 产生 <“ 唯一 ”的 “整数 ”。 而 
闭 包 可 以 捕捉 到 单个 函数 调用 的 局 部 变量 ， 并 将 这 些 局 部 变量 用 做 私 
有 状态 。 我 们 可 以 利用 闭 包 这 样 来 重 写 uniqueInteger(O 函 数 : 


var unidqueInteger=(function(){// 定 义 函 数 并 立即 调 


var counter=0;// 画 数 的 私有 状态 


return function(){return counter++,;}; 


}()); 


你 需要 仔细 阅读 这 段 代码 才能 理解 其 含义 。 粗 略 来 看 ， 第 一 行 代码 看 
起 来 像 将 函数 赋值 给 一 个 变量 uniqueInteger， 实 际 上 ， 这 上 段 代码 定义 
了 一 个 立即 调用 的 函数 (函数 的 开始 带 有 左 圆 括号 ) ， 因 此 是 这 个 函 
数 的 返回 值 赋值 给 变量 uniqueInteger。 现 在 ， 我 们 来 看 函数 体 ， 这 个 
函数 返回 另外 一 个 函数 ， 这 是 一 个 从 父 的 函数 ， 我 们 将 它 赋 值 给 变量 
uniqueInteger， 般 套 的 函数 是 可 以 访问 作用 域内 的 变量 的 ， 而 且 可 以 
访问 外 部 函数 中 定义 的 counter 变 量 。 当 外 部 函数 返回 之 后 ， 其 他 任何 
代码 都 无 法 访问 counter 变 量 ， 只 有 内 部 的 函数 才能 访问 到 它 。 


像 counter 一 样 的 私有 变量 不 是 只 能 用 在 一 个 单独 的 闭 包 内 ， 在 同一 个 
外 部 函数 内 定义 的 多 个 时 确 函 数 也 可 以 访问 它 ， 这 多 个 舱 套 函数 都 共 
享 一 个 作用 域 链 ， 看 一 下 这 段 代 码 : 


function counter(){ 


Var n=0; 


return{ 


count:function(){return n++;}, 


reset:function( ){n=0;} 


}; 


} 


var c=counter(),d=counter();// 创 建 两 个 计数 器 


c.count()//=>0 


d.count()//=>0: 它 们 互 不 干扰 


c.reset()//reset() 和 count() 方 法 共享 状态 


c.count()//=>9: 因 为 我 们 重 置 了 c 


d .count()//=>1: 而 没有 重 置 d 


counter() 范 数 返 回 了 一 个 “计数 妮 ” 对 象 ， 这 个 对 象 包 含 两 个 方法 : 
count() 返 回 下 一 个 整数 ，reset() 将 计数 姨 重 置 为 内 部 状态 。 首 先 要 理 
解 ， 这 两 个 方法 都 可 以 访问 私有 变量 n。 再 者 ， 每 次 调用 counter() 都 会 
创建 一 个 新 的 作用 域 链 和 一 个 新 的 私有 变量 。 因 此 ， 如 果 调 用 
counter() 两 次 ， 则 会 得 到 两 个 计数 器 对 象 ， 而 且 彼 此 包含 不 同 的 私有 
2 调用 其 中 一 个 计数 器 对 象 的 count0 或 reset() 不 会 影响 到 另外 一 个 
对 银 。 


从 技术 角度 看 ， 其 实 可 以 将 这 个 财 包 合并 为 属性 存 取 需 方 法 getter 和 
setter。 下 面 这 段 代 码 所 示 的 counterO 函 数 的 版 本 是 6.6 世 中 代码 的 变 
种 ， 所 不 同 的 是 ， 这 里 私有 状态 的 实现 是 利用 了 闭 包 ， 而 不 是 利用 普 
通 的 对 象 属性 来 实现 : 


function counter(n){// 画 数 参 数 n 是 一 个 私有 变量 


return{// 属 性 getter 方 法 返回 并 给 私有 计数 器 var 递 增 1 


get count()f{return n++;},// 属 性 setter 不 旬 许 n 弟 减 


set count(m){ 


if(m>=n)n=m; 


else throw Error("count can only be set to a larger value"); 


} 


}; 


} 


Var c=counter(1000); 


c.count//=>1000 


.CoOUNt//=>1001 


O 


.COUnt=2000 


O 


.COUNt//=> 2000 


OO 


.CoOUNt=2000//=>>Error! 


OO 


需要 注意 的 是 ， 这 个 版 本 的 counter() 函 数 并 未 声明 局 部 变量 ， 
使 用 参数 n 来 保存 私有 状态 ， 属 性 存 取 吉 方法 可 以 访问 n。 这 样 的 话 ， 
调用 counter0 的 函数 就 可 以 指定 私有 变量 的 初始 值 了 。 


例 8-4 是 这 种 使 用 闭 包 技术 来 共享 的 私有 状态 的 通用 做 法 。 这 个 例子 定 
义 了 addPrivateProperty0 函 数 ， 这 个 函数 定义 了 一 个 私有 变 以 及 两 
个 藤 套 的 画 数 用 来 获取 和 设置 这 个 私有 变量 的 值 。 它 将 这 5 成 依 各 询 数 
添加 为 所 指定 对 象 的 方法 : 


例 8-4: 利用 闭 包 实现 的 私有 属性 存 取 需 方法 


// 这 个 函数 给 对 象 o 增 加 了 


一 


属性 存 取 器 方法 


Th 
由 


// 方 法 名 称 为 get<name> 和 set<name>。 如 


判定 函数 
//setter 方 法 就 会 用 它 来 检测 参数 的 合法 性 


， 然 后 在 存储 它 
// 如 果 判 定 函 数 返 蕊 


false，setter 方 法 抛 出 一 个 异常 
// 


// 这 个 函数 有 一 个 非 同 寻 常 之 处 ， 就 是 getter 和 setter 画 数 
// 所 操作 的 属性 值 并 没有 


存储 在 对 象 o 中 


// 相 反 ， 这 个 值 仅仅 是 保 


存在 函数 中 的 局 部 变量 中 
//getter 和 setter 方 法 同样 是 局 部 函数 ， 因 此 可 以 访问 这 个 局 部 变量 
// 也 就 是 说 ， 对 于 两 个 存 取 器 方法 来 说 这 个 变量 是 私有 的 
// 没 有 办 法 绕 过 存 取 器 方法 来 设 


或 修改 这 个 值 


function addPrivateProperty(o,name,predicate)t{ 


var value;// 这 是 一 个 


属性 值 


//getter 方 法 简 


地 将 其 返 世 


of["get"+name]=function(){return value;};//setter 方 法 
// 否 则 就 将 其 


先 检查 值 是 否 合法 
存储 起 来 


， 阁 不 合法 就 抛 H 


o[l"set"+name]=function(v){ 


if(predicate&&!predicate(v)) 


throw Error("set"+name+":invalid value"+v); 


// 下 面 的 代码 展示 了 addPrivateProperty() 方 法 


var 0={;// 设 置 一 个 空 对 象 


// 增 加 属性 存 取 器 方法 getName( ) 和 setName() 


/AL 和 上 呆 只 允许 字 符 串 值 


addPrivateProperty(o,"Name",function(x){return typeof x=="string";}); 


o.setName("Frank'" );// 设 置 属性 值 


console.10g(0.getName( ) );// 得 到 属性 什 


0.SetName(0);// 试 图 设置 一 个 错误 类 型 的 值 


我 们 已 经 给 出 了 很 多 例子 ， 在 同一 个 作用 域 链 中 定义 两 个 团 包 ， 这 两 
个 财 包 共享 同样 的 私有 变量 或 变量 。 但 还 
是 要 特别 小 心 那 些 不 布 望 共 孚 的 变量 往往 不 经 意 间 共 孚 给 了 其 他 的 财 
包 ， 了 人 解 这 一 点 也 很 重要 。 看 一 下 下 面 这 文 段 代码 : 


// 这 个 函数 返回 一 个 总 是 返回 v 的 函数 


function constfunc(v){return function()f{return Vv;};}// 创 建 一 个 数组 用 来 存储 常数 函数 


var funcs=[]; 


for(var i=0;i<10;i++)funcs[i]=constfunc(i);// 在 第 5 个 位 置 的 元 素 所 表示 的 函数 返回 值 为 5 


funcs[5]()//=>5 


这 段 代 码 利 用 循环 创建 了 很 多 个 闭 包 ， 当 写 类 似 这 种 代码 的 时 候 往往 
会 犯 一 个 错误 : 那 束 是 试图 将 循环 代码 移入 定义 这 个 财 包 的 函数 之 
内 ， 看 一 下 这 段 代码 : 


// 返 回 一 个 函数 组 成 的 数组 ， 它 们 的 返回 值 是 9~9 


function constfuncs(){ 


var funcs=[]; 


for(var i=0;i<10;i++) 


funcs[i]=function(){return i;},; 


return funcs,; 


} 


var funcs=constfuncs(); 


funcs[5]()// 返 回 值 是 什么 ? 


上 上面 这 段 代码 创建 了 10 个 闭 包 ， 并 将 它们 存储 到 一 个 数组 中 。 这 些 闭 
包 都 是 在 同一 个 函数 调用 中 定义 的 ， 因 此 它们 可 以 共享 变量 i。 当 
constfuncs0O 返 回 时 ， 变 量 i 的 值 是 10， 所 有 的 闭 包 都 共享 这 一 个 值 ， 
此 ， 数 组 中 的 函数 的 返回 值 都 是 同一 个 值 ， 这 不 是 我 们 想 要 的 结果 。 
关联 到 闭 包 的 作用 域 链 都 是 “活动 的 ”， 记 住 这 一 点 非常 重要 。 髓 套 的 
函数 不 会 将 作用 域内 的 私有 成 员 复制 一 份 ， 也 不 会 对 所 绑 定 的 变量 生 
成 静态 快照 (static snapshot) 


书写 财 包 的 时 候 还 需 注 意 一 件 事 情 ，this 是 JavaScript 的 关键 字 ， 而 不 
古 变 量 。 正 如 之 前 讨论 的 ， 每 个 函数 调用 都 包含 一 个 this 值 ， 如 有 果 闭 包 


在 外 部 函数 里 是 无 法 访问 this 的 (上.-， 除 非 外 部 函数 将 this 转 存 为 一 个 变 
量 : 


var self=this;// 将 this 保 存 至 一 个 变量 中 ， 以 便 骨 套 的 函数 能 够 访问 它 


绑 定 arguments 的 问题 与 之 类 似 。arguments 并 不 是 一 个 关键 字 ， 但 在 调 
用 每 个 函数 时 都 会 目 动 声明 它 ， 由 于 闭 包 具有 目 己 所 绑 定 的 
arguments， 因 此 闭 包 内 无 法 直接 访问 外 部 函数 的 参数 数组 ， 除 非 外 部 
函数 将 参数 数组 保存 到 另外 一 个 变量 中 : 


var outerArguments=arguments;// 保 存 起 来 以 便 媒 套 的 函数 能 使 用 它 


在 本 章 接 下 来 讲 到 的 例 8-5 中 惑 利 用 了 这 种 编程 技巧 来 定义 财 包 ， 以 便 
在 财 包 中 可 以 访问 外 部 函数 的 this 和 arguments 值 。 


8.7 ”函数 属性 、 方 法 和 构造 函数 


我 们 看 到 在 JavaScript 程 序 中 ， 函 数 是 值 。 对 函数 执行 typeof 运 算 会 返 
回 字 符 串 "function"， 但 是 数 是 JavaScript 中 特殊 的 对 象 。 因 为 函数 也 
是 对 象 ， 它 们 也 可 以 拥有 属性 和 方法 ， 就 像 普通 的 对 象 可 以 拥有 属性 
和 方法 一 样 。 其 至 可 以 用 Function() 构 造 函 数 来 创建 新 的 男 数 对 象 。 接 
下 来 几 方 束 会 着 重 介绍 函数 属性 和 方法 以 及 Function() 构 造 函 数 。 在 第 
三 部 分 也 有 关于 这 些 内 容 的 讲解 。 


8.7.1 ” length 属性 


在 函数 体 里 ，arguments.length 表 示 传 入 函数 的 实 参 的 个 数 。 而 函数 本 
身 的 length 属 性 则 有 着 不 同 含 义 。 画 数 的 length 属 性 是 只 读 属 性 ， 它 代 
表 函 数 实 参 的 数量 ， 这 里 的 参数 指 的 是 “ 形 参 ”而 非 “ 实 参 ”， 也 就 是 在 
给 出 的 实 参 个 数 ， 通 常 也 是 在 函数 调用 时 期 望 传 入 函数 的 
实 参 个 数 。 


下 面 的 代码 定义 一 个 名 叫 check0 的 函数 ， 从 另外 一 个 函数 给 它 传 入 
arguments 数 组 ， 它 比较 arguments.length (实际 传 入 的 实 参 个 数 ) 和 


arguments.callee.length (期 望 传 入 的 实 参 个 数 ) 来 判断 所 传 入 的 实 参 个 
数 是 否 正 确 。 如 果 个 数 不 正确 ， 则 抛 出 异常 。check0O 函 数 之 后 定义 一 
个 测试 函数 f0， 用 来 展示 check0 的 用 法 : 


// 这 个 函数 使 用 arguments ,callee， 因 此 它 不 能 在 严格 模式 下 工作 


function check(args)t{ 


var actual=args.length;// 实 参 的 真实 个 数 


var expected=args.callee.length;// 期 望 的 实 参 个 数 


if(actual!==expected)// 如 果 不 同 则 抛 出 异常 


throw Error("Expected"+expected+"args;got"+actual); 


} 


function f(x,y,zZ)t{ 


check(arguments ) ; // 检 查实 参 个 数 和 期 望 的 实 参 个 数 是 否 一 臻 


return x+y+Z;// 再 执行 函数 的 后 续 逻 辑 


} 


8.7.2 ”prototype 属 性 


每 一 个 钞 数 都 包含 一 个 prototype 属 性 ， 这 个 属性 是 指 癌 一 个 对 象 的 引 
用 ， 这 个 对 象 称 做 “原型 对 象 ”(prototype object) 。 每 一 个 函数 都 包含 
不 同 的 原型 对 象 。 当 将 函数 用 做 构造 函数 的 时 候 ， 新 创建 的 对 象 会 从 
原型 对 象 上 继承 属性 。6.1.3 市 讨论 了 原型 和 prototype 属 性 ， 在 第 9 章 里 
会 有 进一步 讨论 。 


8.7.3 call0 方 法 和 apply0 方 法 


我 们 可 以 将 call0 和 apply0O 看 做 是 某 个 对 象 的 方法 ， 通 过 调用 方法 的 形 
式 来 间接 调用 ( 见 8.2.4 节 ) 函数 (比如 在 例 6-4 我 们 使 用 了 call0) 方 法 来 
调用 一 个 对 象 的 Objec tprototype.toString 方 法 ， 用 以 输出 对 象 的 类 ) 。 
cal0 和 apply0 的 第 一 个 实 参 是 要 调用 函数 的 母 对 象 ， 它 是 调用 上 下 
文 ， 在 函数 体内 通过 this 来 获得 对 它 的 引用 。 要 想 以 对 象 o 的 方法 来 调 
用 函数 f()， 可 以 这 样 使 用 call() 和 apply0: 


f.call(o); 


f.apply(o); 


A 0 (假设 对 象 o 中 预先 不 存在 名 为 m 的 属 


0.m=f;// 将 f 存 储 为 0 的 临时 方法 


0.m( );// 调 用 它 ， 不 传 入 参数 


delete 0o.m;// 将 临时 方法 删除 


在 ECMAScript 5 的 严格 模式 中 ，cal0 和 apply0 的 第 一 个 实 参 都 会 变 为 
this 的 值 ， 哪 怕 传 入 的 实 参 是 原始 值 甚至 是 null 或 undefined。 在 

ECMAScript 3 和 非 严 格 模式 中 ， 传 入 的 null 和 undefined 都 会 被 全 局 对 
0 而 其 他 原始 值 则 会 被 相应 的 包装 对 象 (wrapper object) 所 替 


对 于 call0 来 说 ， 第 一 个 调用 上 下 文 实 参 之 后 的 所 有 实 参 束 是 要 传 入 行 
调用 范 数 的 值 。 比 如 ， 以 对 象 o 的 方法 的 形式 调用 范 数 f)， 并 传 入 两 个 
参数 ， 可 以 使 用 这 样 的 代码 : 


f.call(o,1,2); 


apply(0) 方 法 和 call0 类 似 ， 但 传 入 实 参 的 形式 和 cal0 有 所 不 同 ， 它 的 实 
参 都 放 入 一 个 数组 当中 : 


f.apply(o, [1,2]); 


如 果 一 个 函数 的 实 参 可 以 是 任意 数量 ， 给 apply0 传 入 的 参数 数组 可 以 
是 任意 长 度 的 。 比 如 ， 为 了 找 出 数组 中 最 大 的 数值 元 素 ， 调 用 
Math.max0 太 法 的 时 候 避 以 给 apply0 传 入 一 个 包含 任 受 个 元 到 的 数 
组 : 


var biggest=Math.max.apply(Math,array_of_numbers); 


需要 注意 的 是 ， 传 入 apply0 的 参数 数组 可 以 是 类 数组 对 象 也 可 以 生 真 
实数 组 。 实 际 上 ， 可 以 将 当前 函数 的 arguments 数 组 直接 传 入 (为 一 个 
函数 的 ) apply0 来 调用 另 一 个 函数 ， 参 照 如 下 代码 : 


// 将 对 象 o 中 名 为 m( ) 的 方法 替换 为 另 一 个 方法 


// 可 以 在 调用 原始 的 方法 之 前 和 之 后 记录 日 志 消息 


function trace(orm){ 


var original=o[m];// 在 闭 包 中 保存 原始 方法 


o[m]=function(){// 定 义 新 的 方法 


console.log(new Date(),"Entering:",m);// 输 出 日 志 消 息 


var result=original.apply(this,arguments);// 调 用 原始 函数 


console.log(new Date(), "Exiting:",m);// 输 出 日 志 消 息 


人 


return result;// 返 回 结 有 


trace0) 团 数 接收 两 个 参数 ， 一 个 对 象 和 一 个 方法 名 ， 写 将 指定 的 方法 
替换 为 一 个 新 方法 ， 这 个 新 方法 是 " 包 囊 ?原始 方法 的 另 一 个 泛 函 数 芭 
。 这 种 动态 修改 已 有 方法 的 做 法 有 时 称 做 "monkey-patching"。 


8.7.4 bind(0) 方 法 


bindO 是 在 ECMAScript 5 中 新 增 的 方法 ， 但 在 ECMAScript 3 中 可 以 轻易 
模拟 bind0。 从 名 字 束 可 以 看 出 ， 这 个 方法 的 主要 作用 就 是 将 函数 绑 定 
至 某 个 对 象 。 当 在 函数 f() 上 调用 bind() 方 法 并 传 入 一 个 对 象 o 作 为 参 
数 ， 这 个 方法 将 返回 一 个 新 的 函数 。 〈 以 函数 调用 的 方式 ) 调用 新 的 
函数 将 会 把 原始 的 函数 f0 当 做 o 的 方法 来 调用 。 传 入 新 函数 的 任何 实 参 
都 将 传 入 原始 函数 ， 比 如 : 


function f(y)f{return this .x+y;}// 这 个 是 待 绑 定 的 函数 


var o={fx:1};// 将 要 绑 定 的 对 象 


var g=f.bind(o);// 通 过 调用 g(x) 来 调用 o.f(x) 


g(2)//=>3 


可 以 通过 如 下 代码 轻易 地 实现 这 种 绑 定 : 


// 返 回 一 个 函数 ， 通 过 调用 它 来 调用 o 中 的 方法 f( ) ， 传 递 它 所 有 的 实 参 


function bind(f,o)f{ 


if(f,bind)return f.bind(o);// 如 果 bind( ) 方 法 存在 的 话 ， 使 用 bind( ) 方 法 


else return function(){// 否 则 ， 这 样 绑 定 


return f.apply(o,arguments); 

}; 

} 

ECMAScript 5 中 的 bind(0) 方 法 不 仅仅 是 将 函数 绑 定 至 一 个 对 象 ， 它 还 附 
市 一 些 其 他 应 用 : 除了 第 一 个 实 参 之 外 ， 传 入 bind0 的 实 参 也 会 绑 定 至 


this， 这 个 附 这 的 应 用 是 一 种 常见 的 函数 式 编 程 技 术 ， 有 时 也 被 称 
为 “ 柯 里 化 ”(currying) 。 参 照 下 面 这 个 例子 中 的 bind() 方 法 的 实现 : 


var sum=function(x,y)f{return x+ty};// 返 回 两 个 实 参 的 和 值 


// 创 建 一 个 类 似 sum 的 新 函数 ， 但 this 的 值 绑 定 到 nu11 


// 并 且 第 一 个 参数 绑 定 到 1， 这 个 新 的 函数 期 望 只 传 入 一 个 实 参 


var succ=sum.bind(null,1); 


succ(2)//=>3:x 绑 定 到 1， 并 传 入 2 作为 实 参 y 


function f(y,z){return this.xty+z};// 另 外 一 个 做 累加 计算 的 函数 


var g=f.bind({x:1},2);// 绑 定 this 和 y 


g(3)//=>6:this ,x 绑 定 到 1，y 绑 定 到 2，z 绑 定 到 3 


我 们 可 以 绑 定 this 的 值 并 在 EFCMAScript 3 中 实现 这 个 附带 的 应 用 。 例 8- 
5 中 的 示例 代码 就 模拟 实现 了 标准 的 bind() 方 法 。 


注意 ， 我 们 将 这 个 方法 另存 为 Function.prototype.bind， 以 便 所 有 的 函 
数 对 象 都 继承 它 ， 这 种 技术 在 9.4 节 中 有 详细 介绍 : 


例 8-5: ECMAScript 3 版 本 的 Function.bind() 方 法 


if(!Function.prototype.bind)t{ 


Function.prototype.bind=function(o/*,args*/){// 将 this 和 arguments 的 值 保存 至 变量 中 


// 以 便 在 后 面 嵌 套 的 函数 中 可 以 使 用 它们 


var self=this,boundArgs=arguments;//bind( ) 方 法 的 返回 值 是 一 个 函数 


return function( ){// 创 建 一 个 实 参 列表 ， 将 传 入 bind( ) 的 第 二 个 及 后 续 的 实 参 都 传 入 这 个 函数 


var args=[],i; 


for(i=1;i<boundArgs.length;i++)args.push(boundArgs[i]); 


for(i=0;i<arguments.length;i++)args.push(arguments[i]);// 现 在 将 self 作 为 0 的 方法 
入 这 些 实 参 


< 


调用 ， 传 


return self.apply(o,args); 
}; 
}; 


} 


我 们 注意 到 ，bind0) 方 法 返回 的 函数 是 一 个 财 包 ， 在 这 个 财 包 的 外 部 男 
数 中 声明 了 self 和 boundArgs 变 量 ， 这 两 个 变量 在 闭 包 里 用 到 。 尽 管 定 
义 财 包 的 内 部 函数 已 经 从 外 部 函数 中 返回 ， 而 且 调 用 这 个 财 包 逻辑 的 
时 刻 要 在 外 部 函数 返回 之 后 (在 闭 包 中 照样 可 以 正确 访问 这 两 个 变 


量 ) 。 


ECMAScript 5 定义 的 bind0 方 法 也 有 一 些 特 性 是 上 述 ECMAScript 3 代码 
无 法 模拟 的 。 首 先 ， 真 正 的 bind(0) 方 法 返回 一 个 函数 对 象 ， 这 个 函数 对 
象 的 langth 属 性 是 绑 定 函数 的 形 参 个 数 减 去 绑 定 实 参 的 个 数 (length 的 
值 不 能 小 于 零 } 。 再 者 ，ECMAScript 5 的 bind0) 方 法 可 以 顺带 用 做 构造 
函数 。 如 果 bind0 返 回 的 函数 用 做 构造 本 数 ， 将 忽略 传 入 bind0) 的 t 

his， 原 始 函 数 就 会 以 构造 函数 的 形式 调用 ， 其 实 参 也 已 经 绑 定 [二 i-。 
由 bind0) 方 法 所 返回 的 函数 并 不 包含 prototype 属 性 (普通 函数 固有 的 


prototype 属 性 是 不 能 删除 的 ) ， 并 且 将 这 些 绑 定 的 函数 用 做 构造 函数 
时 所 创建 的 对 象 从 原始 的 未 绑 定 的 构造 函数 中 继承 prototype。 同样， 
ee 绑 定 构造 画 数 和 未 绑 定 构造 函数 并 无 两 


8.7.5 toString(0) 方 法 


和 所 有 的 JavaScript 对 象 一 样 ， 函 数 也 有 toString() 方 法 ，ECMAScript 规 
范 规 定 这 个 方法 返回 一 个 字符 串 ， 这 个 字符 串 秒 数 声 明 语 句 的 语法 
相关 。 实 际 上 ， 大 多 数 ( 非 全 部 ) 的 toString() 方 法 的 实现 都 返回 函数 
0 。 内 置 函 数 往往 返回 一 个 类 似 "[native code]" 的 字符 串 作 为 
| O 


8.7.6 ”Function() 构 造 琅 数 
不 管 是 通过 函数 定义 语句 还 是 芳 数 直接 量 表达 式 ， 琅 数 的 定义 都 要 使 


用 function 关 键 字 。 但 函数 还 可 以 通过 Function0 构 造 函 数 来 定义 ， 比 
如 : 


var f=new Function("x","y","return x*y;"); 


这 一 行 代码 创建 一 个 新 的 画 数 ， 这 个 画 数 和 通过 下 面 代码 定义 的 画 数 
几乎 等 价 : 


var f=function(x,y){return x*y;} 


Function0 构 造 函数 可 以 传 入 任意 数量 的 字符 串 实 参 ， 最 后 一 个 实 参 所 
表示 的 文本 束 是 函数 体 ; 它 可 以 包含 任意 的 JavaScript 语 句 ， 每 两 条 语 
句 之 间 用 分 号 分 阳 。 传 入 构造 贸 数 的 其 他 所 有 的 实 参 字符 串 是 指定 函 
数 的 形 参 名 字 的 字符 串 。 如 果 定 义 的 函数 不 包含 任何 参数 ， 只 须 给 构 
造 函 数 简 单 地 传 入 一 个 字符 串 一 一 函数 体 一 一 即 可 。 


注意 ，Function0 构 造 国 数 并 不 需要 通过 传 入 实 参 以 指定 男 数 名 。 束 像 
函数 直接 量 一 样 ，Function0 构 造 函 数 创建 一 个 匿名 函数 。 


天 于 Function(0) 构 造 久 数 有 几 点 需要 特别 注意 : 
.Function0 构 造 函 数 允 许 JavaScript 在 运行 时 动态 地 创建 并 编译 函数 。 


每 次 调用 Function() 构 千 函 数 虱 会 解析 函数 体 ， 并 创建 新 的 落 数 对 和 象 。 
如 果 是 在 一 个 循环 或 者 多 次 调用 的 函数 中 执行 这 个 构造 函数 ， 执 行 效 
率 会 受 影响 。 相 比 之 下 ， 循 环 中 的 相 套 函数 和 玉 数 定义 表达 式 则 不 会 
每 次 执行 时 都 重新 编译 。 


:最 后 一 各 ， 也 是 天 于 Function() 构 造 琅 数 非 常 重要 的 一 点 ， 束 是 它 所 创 
建 的 函数 并 不 是 使 用 词法 作用 域 ， 相 反 ， 函 数 体 代 码 的 编译 总 是 会 在 
顶层 函数 熙 -执行 ， 正 如 下 面 代码 所 示 : 


var Scope="global"， 


function constructFunction( ){ 


Var scope="local"; 


return new Function("return scope");// 无 法 捕获 局 部 作用 域 


} 


// 这 一 行 代 码 返 回 global， 因 为 通过 Function( ) 构 造 画 数 


// 所 返回 的 函数 使 用 的 不 是 局 部 作用 域 


constructFunction()();//=>"global" 


我 们 可 以 将 Function0 构 造 函 数 认 为 是 在 全 局 作用 域 中 执行 的 eval0) 
(参照 4.12.2 节 ) ，eval0 可 以 在 自己 的 私有 作用 域内 定义 新 变量 和 函 
数 ，Function0 构 造 画 数 在 实际 编程 过 程 中 很 少 会 用 到 。 


8.7.7 ”可 调用 的 对 象 


我 们 在 7.11 市 中 提 到 “类 数组 对 象 * 并 不 是 真正 的 数组 ， 但 大 部 分 场景 
下 可 以 将 其 当做 数组 来 对 得 。 对 于 函数 也 存在 类 似 的 情况 。“ 可 调用 的 


对 象 ”(callable object) 是 一 个 对 象 ， 可 以 在 函数 调用 表达 式 中 调用 这 
个 对 象 。 所 有 的 函数 都 是 可 调用 的 ， 但 并 非 所 有 的 可 调用 对 象 都 是 函 
数 。 

截至 目前 ， 可 调用 对 象 在 两 个 JavaScript 实 现 中 不 能 算 作 函数 。 首 先 ， 
IE Web 浏 览 器 (IE8 及 之 前 的 版 本 ) 实现 了 客户 端 方 法 (诸如 
Window.alert0 和 Document.getElementsByIdO0) I 并-， 使 用 了 可 调用 的 
答 主 对 象 ， 而 不 是 内 置 画 数 对 象 。I 正 中 的 这 些 方 法 在 其 他 浏览 器 中 也 
都 存在 ， 但 它们 本 质 上 不 是 Function 对 象 。IE9 将 它们 实现 为 真正 的 画 
数 ， 因 此 这 类 可 调用 的 对 象 将 越 来 越 罕见 。 


另外 一 个 常见 的 可 调用 对 象 是 RegExp 对 象 (在 众多 浏览 器 中 均 有 实 
现 ) ， 可 以 直接 调用 RegExp 对 象 ， 这 上 比 调用 它 的 exec(0) 方 法 更 快捷 一 
些 。 在 JavaScript 中 这 是 一 个 彻头彻尾 的 非 标准 特性 ， 最 开始 是 由 
Netscape 提 出 ， 后 被 其 他 浏览 器 厂商 所 复制 ， 仅 仅 是 为 了 和 Netscape 兼 
容 。 代 码 最 好 不 要 对 可 调用 的 RegExp 对 象 有 太 多 依赖 ， 这 个 特性 在 不 
久 的 将 来 可 能 会 废弃 并 删除 。 对 RegExp 执 行 typeof 运 算 的 结果 并 不 统 
一 ， 在 有 些 浏 览 絮 中 返回 "function"， 在 有 些 中 返回 "object"。 


如 果 想 检测 一 个 对 象 是 否 是 真正 的 函数 对 象 并且 具有 函数 方法 ) ， 
可 以 参照 例 6-4 中 的 代码 检测 它 的 class 属 性 ( 见 6.8.2 节 ) : 


function isFunction(x){ 


} 


注意 ， 这 里 的 isFunction0) 汞 数 和 7.10 节 的 isArray0 数 极其 类 似 。 
8.8 ”函数 去 编程 


和 Lisp、Haskell 不 同 ，JavaScript 并 非 函 数 式 编程 语言 ， 但 在 JavaScript 
中 可 以 像 操 控 对 象 一 样 操控 函数 ， 也 残 是 说 可 以 在 JavaScript 中 应 用 函 
数 式 编程 技术 。ECMAScript 5 中 的 数组 方法 〈 诸 如 map0O 和 reduce()) 
就 可 以 非常 适合 用 于 函数 式 编 程 风 格 。 接 下 来 的 几 节 将 会 着 重 介绍 


JavaScript 中 的 函数 式 编程 技术 。 对 JavaScript 芳 数 的 探讨 会 让 人 倍 感 兴 
奋 ， 你 会 体会 到 JavaScript 芳 数 非常 强大 ， 而 不 仅仅 是 学 习 一 种 编程 风 
格 而 已 HL。 


8.8.1 使 用 函数 处 理 数 组 


假设 有 一 个 数组 ， 数 组 元 素 痢 是 数字 ， 我 们 想 要 计算 这 些 元 陛 的 平均 
值 和 标准 侄 。 帮 使 用 非 贸 数 式 编程 风格 的 话 ， 代 码 会 是 这 样 : 


var data=[1,1,3,5,5];// 这 里 是 待 处 理 的 数组 


// 平 均 数 是 所 有 元 素 的 累加 和 值 除 以 元 素 个 数 


Var total=0; 


for(var i=0;i<data.length;i++)total+=data[i]; 


var mean=total/data.length;// 平 均 数 是 3 


// 计 算 标准 差 ， 首先 计算 每 个 数据 减 去 平均 数 之 后 偏差 的 平方 然后 求 和 


total=0; 


for(var i=0;i<data.length;i++){ 


var deviation=data[i]-mean; 


total+=deviation*deviation,; 


} 


var stddev=Math.sqrt(total/(data.length-1));// 标 准 差 的 值 是 2 


可 以 使 用 数组 方法 map0 和 reduce0 来 实现 同样 的 计算 ， 这 种 实现 极其 
简洁 《参照 7.9 节 来 查看 这 些 方法 ) : 


// 首 先 定义 两 个 简单 的 画 数 


var sum=function(x,y){return x+y;}; 


var square=function(x)f{return x*Xx;};// 然 后 将 这 些 画 数 和 数组 方法 配合 使 用 计算 4 


平均 数 和 标准 差 


天上 


var data=[1,1,3,5,5]; 


var mean=data.reduce(sum)/data.1length; 


var deviations=data.map(function(x){return x-mean;}); 


var stddev=Math.sqrt(deviations.map(square).reduce(sum)/(data.length-1)); 


如 有 果 我 们 基于 ECMAScript 3 来 如 何 实 现 呢 ? 因 为 ECMAScript 3 中 并 不 
包含 这 些 数 组 方法 ， 如 果 不 存在 内 置 方 法 的 话 我 们 可 以 自 定 义 mapO 和 
reduce0O 函 数 : 


// 对 于 每 个 数组 元 素 调用 函数 f( ) ， 并 返回 一 个 结果 数组 


// 如 果 Array .prototype.map 定 义 了 的 话 ， 就 使 用 这 个 方法 


var map=Array.prototype.map 


?function(a,f){return a.map(f);}// 如 果 已 经 存在 map( ) 方 法 ， 就 直接 使 用 它 


:function(a,ff){// 否 则 ， 实现 一 个 


var results=[]; 


for(var i=0,1len=a.length;i<len;i++){ 


if(i in a)results[i]=f.call(null,al[il,i,a); 


return results,; 


}; // 使 用 函数 f( ) 和 可 选 的 初始 值 将 数组 a 减 至 一 个 值 


// 如 果 Array .prototype.reduce 存 在 的 话 ， 就 使 用 这 个 方法 


var reduce=Array.prototype.reduce 


?function(a,f,initial){// 如 果 reduce( ) 方 法 存在 的 话 


if(arguments.1length>2) 


return a.reduce(f,initial);// 如 果 传 入 了 一 个 初始 值 


else return a.reduce(f);// 否 则 没有 初始 值 


:function(ayf, initial){// 这 个 算 


法 ES5 规 范 


var i=0, len=a.length,accumulator;// 以 特定 的 初始 值 开始 ， 否 则 第 一 个 值 取 


if(arguments.1length>2)accumulator=initial; 


else{// 找 到 数组 中 第 一 个 已 定义 的 索引 


if(len==0)throw TypeError(); 


while(i<len){ 


if(i in a){ 


accumulator=a[i++]; 


break; 


else i++; 


If(I==]Jen)throw TypeError(); 


// 对 于 数组 中 璋 下 的 元 素 依次 调用 f( ) 


while(i<len){ 
if(i in a) 
accumulator=f.call(undefined,accumulator,al[il],i,a); 


j++ 


return accumulator; 

}; 

使 用 定义 的 mapO 和 reduce(0) 函 数 ， 计 算 平 均值 和 标准 差 的 代码 看 起 来 
像 这 样 : 

var data=[1,1,3,5,5]; 

var sum=function(x,y){return x+y;}; 

var square=function(x){return x*x;}; 

var mean=reduce(data, sum)/data.1length; 


var deviations=map(data,function(x){return x-mean;}); 


var stddev=Math.sqrt(reduce(map(deviations, square),sum)/(data.length-1)); 


8.8.2 ”高 阶 画 数 


所 谓 高 阶 函 数 (higher-order function) 束 是 操作 画 数 的 范 数 ， 它 接收 
一 个 或 多 个 函数 作为 参数 ， 并 返回 一 个 新 函数 ， 来 看 这 个 例子 : 


入 
Me 
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> 
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| 
全 


新 的 函数 ， 这 个 新 函数 将 它 的 实 参 传 入 f() 


// 并 返回 f 的 返回 值 的 逻辑 非 


function not(f){ 


全 


新 的 函数 


return function(){// 返 回 一 


var result=f.apply(this,arguments);// 调 用 f() 


return!result;// 对 结果 求 反 


}; 


var even=function(x){// 判 断 a 是 否 为 偶数 的 函数 


return x%2===0; 


}; 


var odd=not(even) ;// 一 个 新 函数 ， 所 做 的 事情 和 even( ) 相 反 


[1,1,3,5,5].every(odd);//=>true: 每 个 元 素 都 是 奇数 


上 上 面 的 not0 函 数 殊 是 一 个 高 阶 丁 数 ， 因 为 它 接收 一 个 钞 数 作为 参数 ， 

并 返回 一 个 新 辑 数 。 男 外 一 个 例子 ， 来 看 下 面 的 mapper0) 阔 数 ， 它 也 
古 接 收 一 个 钞 数 作为 参数 ， 并 返回 一 个 新 钞 数 ， 这 个 新 函数 将 一 个 数 
组 映射 到 男 一 个 使 用 这 个 函数 的 数组 上 。 这 个 函数 使 用 了 之 前 定义 的 
0 


// 所 返回 的 函数 的 参数 应 当 是 一 个 实 参数 组 ， 并 对 每 个 数组 元 素 执行 函数 f( ) 


// 并 返回 所 有 计算 结果 组 成 的 数组 


// 可 以 对 比 一 下 这 个 函数 和 上 文 提 到 的 map ( ) 函数 


function mapper(f){ 


return function(a){return map(a,f);}; 


var increment=function(x){return x+1;}; 
var incrementer=mapper(increment); 
incrementer([1,2,3])//=> [2,3,4] 


这 里 是 一 个 更 常见 的 例子 ， 它 接收 两 个 函数 f() 和 g()， 并 返回 一 个 新 的 
函数 用 以 计算 f(gO): 


// 返 回 一 个 新 的 可 以 计算 f(g(... ) ) 的 函数 


// 返 回 的 函数 h( ) 将 它 所 有 的 实 参 传 入 g( )， 然 后 将 g( ) 的 返回 值 传 入 f( ) 


// 调 用 f( ) 和 g( ) 时 的 this 值 和 调用 h( ) 时 的 this 值 是 同一 个 this 


function compose(f,g){ 


return function(){// 需 要 给 f( ) 传 入 一 个 参数 ， 所 以 使 用 f( ) 的 call( ) 方 法 


// 需 要 给 g( ) 传 入 很 多 参数 ， 所 以 使 用 g( ) 的 apply( ) 方 法 


return f.call(this,g.apply(this,arguments)); 


}; 


var square=function(x){return x*x;}; 

var sum=function(x,y){return x+y;}; 

var squareofsum=compose(square, sum); 

squareofsum(2,3)//=>25 

本 章 后 续 几 节 中 定义 了 partial0 和 memoize0) 画 数 ， 这 两 个 函数 是 非常 

重要 的 高 阶 函 数 。 

8.8.3 ”不 完全 函数 

函数 f0 〈 见 8.7.4) 的 bind( 方 法 返回 一 个 新 函数 ， 给 新 函数 传 入 特定 
的 上 下 文 和 一 组 指定 的 参数 ， 然 后 调用 画 数 f0。 我 们 说 它 把 画 数 " 绑 定 
至 ?对 象 并 传 入 一 部 分 参数 。bind() 方 法 只 是 将 实 参 放 在 (完整 实 参 列 
表 的 ) 左 侧 旺 -， 也 就 是 说 传 入 bind0 的 实 参 都 是 放 在 传 入 原始 函数 的 


实 参 列 表 开 始 的 位 置 ， 但 有 时 我 们 期 望 将 传 入 bind0 的 实 参 放 在 (完整 
实 参 列 表 的 ) 右 侧 : 


// 实 现 一 个 工具 函数 将 类 数组 对 象 或 对 象 ) 转换 为 真正 的 数组 


// 在 后 面 的 示例 代码 中 用 到 了 这 个 方法 将 arguments 对 象 转换 为 真正 的 数组 
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function array(a,n){return Array.prototype.slice.call(a,n|19);}// 这 个 函数 的 实 参 传递 至 左 
侧 


function partialLeft(f/*,...*/){ 


var args=arguments;// 保 存 外 部 的 实 参数 组 


return function(){// 并 返回 这 个 函数 


var a=array(args,1);// 开 始 处 理 外 部 的 第 1 个 args 


a=a.concat(array(arguments) );// 然 后 增加 所 有 的 内 部 实 参 


return f.apply(this,a);// 然 后 基 


}; 
} 
// 这 个 函数 的 实 参 传递 至 右 侧 


于 这 个 实 参 列表 调用 f( ) 


function partialRight(f/*,...*/){ 


var args=argument 


return function() 


var a=array(argum 


Ss;// 保 存 外 部 实 


参数 组 


{// 返 回 这 个 函数 


ents ) ; // 从 内 部 参 


a=a.concat(array(args,1));// 然 后 从 外 部 第 1 个 args 开 始 添加 


return f.apply(this,a);// 最 后 基 ] 


}; 

} 

// 这 个 函数 的 实 参 被 用 做 模板 

// 实 参 列 表 中 的 undefined 值 都 被 填充 
function partial(f/*,...*/){ 


这 个 实 参 列表 调用 f( ) 


var args=arguments;// 保 存 外 部 实 参数 组 


return function() 


让 


var a=array(args,1);// 从 外 部 args 


var i=0, j=0;// 人 遍历 args， 从 内 部 实 参 1 


总 


始 


址 充 undefined 值 


for(;i<a.length;i++) 


if(a[i]===undefined)a[i]=arguments[j++];// 现 在 将 剩 下 的 内 部 实 参 都 追加 进 


a=a.concat(array(arguments, j)) 


return f.apply(this,a); 


}; 


// 这 个 函数 带 有 三 个 实 参 


var f=function(x,y,z)t{return x*(y-z);};// 注 意 这 三 个 不 完全 调用 之 间 的 区 别 


partialLeft(f,2)(3,4)//=> -2: 绑 定 第 一 个 实 参 :2*(3-4) 


partialRight(f,2)(3,4)//=>6: 绑 定 最 后 一 个 实 参 ;:3*(4-2) 


partial(f,undefined,2)(3,4)//=> -6: 绑 定 中 间 的 实 参 :3*(2-4) 


利用 这 种 不 完全 函数 的 编程 技巧 ， 可 以 编写 一 些 有 意思 的 代码 ， 利 用 
已 有 的 函数 来 定义 新 的 函数 ， 参 照 下 面 这 个 例子 : 


var increment=partialLeft(sum,1); 

var cuberoot=partialRight (Math.pow, 1/3); 
String.prototype.first=partial(String.prototype.charAt, 0); 
String.prototype.last=partial(String.prototype. substr, -1,1); 

当 将 不 完全 调用 和 其 他 高 阶 函 数 整合 在 一 起 的 时 候 ， 事 情 惑 变 得 格外 
有 趣 了 。 比 如 ， 这 里 的 例子 定义 了 not0 函 数 ， 它 用 到 了 刚才 提 到 的 不 


完全 调用 ， 


Var 


Var 


Var 


Var 


not=partialLeft(compose,function(x){return!x;}); 


even=function(x){return x%2===0;}; 


odd=not (even); 


isNumber=not (isNaN) 


我 们 也 可 以 使 用 不 完全 调用 的 组 合 来 重新 组 织 求 平均 数 和 标准 兰 的 代 


码 ， 这 种 编码 风格 是 非常 纯粹 的 范 数 式 编 程 : 


Var 


Var 


Var 


Var 


Var 


Var 


var reciprocal=partial(Math.pow,undefined, -1);// 现 在 计 


data=[1,1,3,5,5];// 我 们 要 处 理 的 数据 


sum=function(x,y){return xty;};// 两 个 初等 画 数 


product=function(x,y){return x*y,;}; 


neg=partial(product, -1);// 定 义 其 他 函数 


square=partial(Math.pow, undefined, 2); 


sqrt=partial(Math.pow,undefined, .5); 


// 这 段 代码 看 起 来 很 像 1isp 代 码 


var mean=product(reduce(data, sum),reciprocal(data.1length)); 


Var 


stddev=sqrt(product(reduce(map(data, 


compose(square, 


partial(sum,neg(mean)))), 


平均 值 和 标准 差 ， 所 有 


的 函数 调 


都 不 下 


sum), 


reciprocal(sum(data.1length, -1)))); 


8.8.4 记忆 


在 8.4.1 节 中 定义 了 一 个 阶乘 画 数 ， 它 可 以 将 上 次 的 计算 结果 绥 存 起 
来 。 在 画 数 式 编程 当中 ， 这 种 缓存 技巧 叫做 “记忆 ” (memorization) 。 
下 面 的 代码 展示 了 一 个 高 阶 画 数 ，memorize0 接 收 一 个 画 数 作为 实 
参 ， 并 返回 带 有 记忆 能 力 的 画 数 [221。 


// 返 回 f( ) 的 带 有 记忆 功能 的 版 本 


| 


都 不 相同 时 它 才 会 工作 


// 只 有 当 f( ) 的 实 参 的 字符 串 表 


局 | 


function memorize(f){ 


var cache={};// 将 值 保存 在 闭 包 内 


return function( ){// 将 实 参 转 换 为 字符 串 形式 ， 并 将 其 用 做 缓存 的 键 


var key=arguments.1length+Array.prototype.join.call(arguments, ", "); 
if(key in cache)return cache[key]; 

else return cache[key]=f.apply(this,arguments); 

}; 

} 

memorize() 函 数 创建 一 个 新 的 对 象 ， 这 个 对 象 被 当做 缓存 (的 宿主 ) 
并 赋值 给 一 个 局 部 变量 ， 因 此 对 于 返回 的 函数 来 说 它 是 私有 的 (在 闭 


包 中 ) 。 所 返回 的 函数 将 它 的 实 参 数组 转换 成 字符 串 ， 并 将 字符 串 用 
做 缓存 对 象 的 属性 名 。 如 采 在 缓存 中 存在 这 个 值 ， 则 直接 返回 它 。 


否则 ， 吏 调用 既定 的 男 数 对 实 参 进行 计算 ， 将 计算 结果 缓存 起 来 并 返 
回 ， 下 面 的 代码 展示 了 如 何 使 用 memorize(): 


开 


// 返 回 两 个 整数 的 最 大 公约 数 


// 使 用 欧 几 里 德 算法 :http://en.wikipedia.org/wiki/Euclidean_algorithm 


function gcd(a,b){// 这 里 省 略 对 a 和 b 的 类 型 检查 


var tj;V// 临 时 变量 用 来 存储 交换 数值 


if(a<b)t=b,b=a,a=t;// 确 保 a>=b 


while(b!=0)t=b, b=a%b, a=t;// 这 是 求 最 大 公约 数 的 欧 几 里 德 算法 


return a; 


var gcdmemo=memorize(gcd); 


gcdmemo(85,187)//=>17// 注 意 ， 当 我 们 写 一 个 递归 函数 时 ， 往 往 需 要 实现 记忆 功能 


// 我 们 更 希望 调用 实现 了 记忆 功能 的 递归 函数 ， 而 不 是 原 递归 函数 


var factorial=memoize(function(n){ 


return(n<=1)?1:n*factorial(n-1); 


}); 


factorial(5)//=>120. 对 于 4~1 的 值 也 有 缓存 


[1]. 参 数 有 形 参 (parameter) 和 实 参 (argument) 的 区 别 ， 形 参 相当 于 
函数 中 定义 的 变量 ， 实 参 是 在 运行 时 的 函数 调用 时 传 入 的 参数 。 


[2]. 有 些 JavaScript 的 实现 并 未 严格 遵守 这 条 规则 ， 比 如 ，Firefox 束 允许 
在 计 语 句 中 出 现 条 件 函 数 声 明 。 


[3]_ 这 个 术语 最 初 是 由 Martin Fowler 提出 的 ， 参 见 
http://martinfowler.com/dslwip/MethodChaining.html ° 


[4] 需要 注意 的 是 ， 使 用 “运算 符 代 替 if 语 句 的 前 提 是 a 必 须 预 先 声 
明 ， 否 则 a=al|[] 会 报 引 用 错误 ， 在 这 个 例子 中 a 是 作为 形 参 传 入 的 ， 相 
0 即 已 经 声明 了 a， 所 以 这 样 用 是 没有 问题 的 。 


[5]. 当 函数 的 实 参 可 选 时 往往 传 入 一 个 无 意义 的 占 位 符 惯用 做 法 是 传 
入 nul 作 为 占 位 符 ， 当 然 也 可 以 使 用 undefined 作 为 占 位 符 


[6] 原文 用 了 三 个 单词 来 描述 “不 定 实 参 男 数 ”，variadic function、 
variable arity function 和 varargs function ，variadic 的 含义 是 实 参 ( 模 
板 ) 的 顺序 不 定 ，variable arity 的 含义 是 实 参 的 个 数 不 定 ，varargs 的 合 
义 是 实 参 的 值 不 定 ， 这 里 统一 译 成 “不 定 实 参 函 数 ”。 本 书 采 用 最 通俗 
的 术语 “不 定 实 参 ” (vararg) 。 作 者 在 这 里 选用 最 常见 的 一 种 情形 ， 

即 “ 实 参 的 值 不 定 ”"， 但 在 后 续 革 市 中 ， 这 个 单词 的 舍 义 应 当 是 包含 前 
两 种 情形 的 ， 即 包含 实 参 顺序 不 定 和 实 参 个 数 不 定 。 


[7Z]. 这 看 起 来 不 足 为 奇 ， 但 如 果 你 对 Java 很 熟悉 ， 你 会 发 现 Java 中 的 函 
数 是 程序 的 一 部 分 ， 但 无 法 和 被 程序 操作 。 


[8] 通常 我 们 认为 的 排序 都 是 按照 值 从 小 到 大 ， 实 际 上 排序 参照 的 维度 
不 同 排序 结果 也 不 尽 相同 。 


[9]. 在 客户 端 JavaScript 中 这 种 说 法 不 完全 正确 ， 比 如 ， 在 有 些 
， 中 束 可 以 使 用 let 来 声 明 语 句 块 内 的 变量 ， 详细 内 容 i 请 
11 章 。 


[10]. 这 个 术语 非 第 古老， 是 指 画 数 变 量 可 以 说 隐藏 于 作用 域 链 之 内 ， 
因此 看 起 来 是 函数 将 变量 “ 包 圳 ”了 起 来 。 


[1] 之 所 以 有 这 种 想法 是 因为 很 多 人 以 为 函数 执行 结束 后 ， 与 之 相关 
的 作用 域 链 似乎 也 不 存在 了 ， 但 在 JavaScript 中 并 非 如 此 。 


[了 21. 作 者 在 这 里 清楚 地 解释 了 闭 包 和 垃圾 回收 之 间 的 关系 ， 如 果 使 用 
不 愤 ， 闭 包 很 容易 造成 “循环 引用”， 当 DOM 对 象 和 JavaScript 对 象 之 间 
存在 循环 引用 时 需要 格外 小 心 ， 在 某 些 浏览 絮 下 会 造成 内 存 泄漏 。 


[13] 产 格 讲 ， 闭 包 内 的 逻辑 是 可 以 使 用 his 的 ， 但 这 个 this 和 当初 定义 
函数 时 的 this 不 是 同一 个 ， 即 便 是 同一 个 this，this 的 值 是 随 厦 调用 栈 的 
变化 而 变化 的 ， 而 财 包 里 的 逻辑 所 取 到 的 this 的 值 也 是 不 确定 的 ， 因 此 
外 部 函数 内 的 财 包 是 可 以 使 用 this 的 ， 但 要 非常 小 心地 使 用 才 行 ， 作 者 
0 


[14] 汉 函数 也 叫 泛 画 ， 在 这 里 特 指 一 种 变换 ， 以 函数 为 输入 ， 输 出 可 
以 是 值 也 可 以 是 另 一 个 函数 ， 泛 国 的 概念 可 以 参照 : 
http:/zh.wikipedia.org/wiki 记 轴 数 。 


[15] 作者 的 意思 是 在 运行 时 将 bind0 所 返回 的 画 数 用 做 构造 画 数 时 ， 所 
传 入 实 参 会 原封 不 动 的 传 入 原始 画 数 。 


[16] 也 就 是 全 局 作用 域 。 
[17] 作者 给 出 的 这 个 例 于 有 误 ， 应 当 是 getElementById0 。 


[18] 如 果 你 对 这 部 分 内 容 感 兴趣 ， 推 荐 你 使 用 一 下 〈 至 少 阅读 一 下 ) 
奥利弗 .斯 带 尔 (Oliver Steele) 的 函数 式 JavaScript 库 ， 请 参照 : 
http://osteele.com/sources/javascript/functional/ ° 


[19]. 作 者 在 本 闻 讨 论 的 是 一 种 函数 变换 技巧 ， 即 把 一 次 完整 的 函数 调 
用 拆 成 多 次 函数 调用 ， 每 次 传 入 的 实 参 都 是 完整 实 参 的 一 部 分 ， 每 个 
拆 分 开 的 函数 叫做 不 完全 画 数 (partial function) ， 每 次 函数 调用 叫做 
不 完全 调用 (partial application) ， 这 种 函数 变换 的 特点 是 每 次 调用 都 
返回 一 个 函数 ， 直 到 得 到 最 终 运行 结果 为 止 ， 举 一 个 简单 的 例子 ， 将 
对 函数 f(1,2,3,4,5,6) 的 调用 修改 为 等 价 的 f(1,2)(3,4)(5,6)， 后 者 包含 三 次 
调用 ， 和 每 次 调用 相关 的 函数 就 是 “不 完全 函数 ”。 


[20] 需要 注意 的 是 ， 记 忆 只 十 一 种 编程 技巧 ， 本 质 上 走 牺 牲 算 法 的 至 
间 复 杂 度 以 换取 更 优 的 时 间 复 杂 度 ， 在 客户 端 JavaScript 中 代码 的 执行 
时 间 复 杂 度 往往 成 为 瓶颈 ， 因 此 在 大 多 数 场 景 下 ， 这 种 牺牲 空间 换取 
时 间 的 做 法 以 提升 程序 执行 效率 的 做 法 是 非常 可 取 的 。 


第 9 草 ”类 和 模块 


第 6 章 详细 介绍 了 JavaScript 对 象 ， 每 个 JavaScript 对 象 都 是 一 个 属性 集 
合 ， 相 互 之 间 没 有 任何 联系 。 在 JavaScript 中 也 可 以 定义 对 象 的 类 ， 让 
每 个 对 象 都 共享 某 些 属性 ， 这 种 “共享 ”的 特性 是 非常 有 用 的 。 类 的 成 
员 或 实例 都 包含 一 些 属性 ， 用 以 存放 或 定义 它们 的 状态 ， 其 中 有 些 属 
性 定义 了 它们 的 行为 (通常 称 为 方法 ) 。 这 些 行为 通常 是 由 类 定义 
的 ， 而 且 为 所 有 实例 所 共享 。 例 如 ， 假 设 有 一 个 名 为 Complex 的 类 用 来 
表示 复数 ， 同 时 还 定义 了 一 些 复数 运算 。 一 个 Complex 实 例 应 当 包 含 复 
0 (状态 ) ， 同 样 Complex 类 还 会 定义 复数 的 加 法 和 乘法 
染 行为 ) 。 


在 JavaScript 中 ， 类 的 实现 是 基于 其 原型 继承 机 制 的 。 如 果 两 个 实例 都 
从 同一 个 原型 对 象 上 继承 了 属性 ， 我 们 说 它们 是 同一 个 类 的 实例 。 
JavaScript 原 型 和 继承 在 6.1.3 节 和 6.2.2 节 中 有 详细 讨论 ， 为 了 更 好 地 理 
解 本 章 的 内 容 ， 请 务必 首先 阅读 这 两 个 章节 。 本 章 将 会 在 9.1T 中 对 原 
型 做 进一步 讨论 。 


如 采 两 个 对 和 象 继承 自 同一 个 原型 ， 往 往 意 味 着 (但 不 是 绝对 ) 它们 是 
由 同一 个 构造 画 数 创建 并 初始 化 的 。 我 们 已 经 在 4.6 订 、6.2 节 和 8.2.3 节 
中 详细 讲解 了 构造 函数 ，9.2 节 会 有 进一步 讨论 。 


如 果 你 对 诸如 Java 和 C++ 这 种 强 类 型 站 的 面向 对 象 编 程 比较 熟悉 ， 你 会 
发 现 JavaScript 中 的 类 和 Java 以 及 C++ 中 的 类 有 很 大 不 同 。 尽 管 在 写法 上 
类 似 ， 而 且 在 JavaScript 中 也 能 “模拟 ”出 很 多 经 典 的 类 的 特性 上 小， 但 是 
最 好 要 理解 JavaScript 的 类 和 基于 原型 的 继承 机 制 ， 以 及 和 传统 的 Java 

(当然 还 有 类 似 Java 的 语言 ) 的 类 和 基于 类 的 继承 机 制 的 不 同 之 处 。 
9.3 节 展示 了 如 何在 JavaScript 中 实现 经 典 的 类 。 


JavaScript 中 类 的 一 个 重要 特性 是 “动态 可 继承 ”(dynamically 

extendable) ，9.4 节 详细 解释 这 一 特性 。 我 们 可 以 将 类 看 做 是 类 型 ，9.5 
六 讲解 检测 对 象 的 类 的 几 种 方式 ， 该 节 同 样 介绍 一 种 编程 哲学 一 一 “了 鸭 
式 状 型”(duck-typing) ， 它 弱化 了 对 象 的 类 型 ， 强 化 了 对 象 的 功能 。 


在 讨论 了 JavaScript 中 所 有 基本 的 面向 对 象 编程 特性 之 后 ， 我 们 将 关注 
点 从 抽象 的 概念 转向 一 些 实例 。9.6 节 介绍 两 种 非常 重要 的 实现 类 的 方 
法 ， 包 括 很 多 实现 面向 对 象 的 技术 ， 这 些 技术 可 以 很 大 程度 上 增强 类 


的 功能 。9.7 节 展示 (包含 很 多 示例 代码 ) 如 何 实现 类 的 继承 ， 包 括 如 
何在 JavaScript 中 实现 类 的 继承 。9.8 节 讲解 如 何 使 用 ECMAScript 5 中 的 
新 特性 来 实现 类 以 及 面向 对 象 编程 。 


定义 类 是 模块 开发 和 重用 代码 的 有 效 方式 之 一 ， 本 章 最 后 一 节 会 集中 
讨论 JavaScript 中 的 模块 。 


9.1 类 和 原型 


在 JavaScript 中 ， 类 的 所 有 实例 对 象 都 从 同一 个 原型 对 象 上 继承 属性 。 
因此 ， 原 型 对 象 是 类 的 核心 。 在 例 6-1 中 定义 了 inheritO) 本 数 ， 这 个 函数 
返回 一 个 新 创建 的 对 象 ， 后 者 继承 自 某 个 原型 对 象 。 如 果 定 义 一 个 原 
型 对 象 ， 然 后 通过 inherit(0) 范 数 创建 一 个 继承 自 它 的 对 象 ， 这 样 束 定义 
了 一 个 JavaScript 类 。 通 常 ， 类 的 实例 还 需要 进一步 的 初始 化 ， 通 常 是 
通过 定义 一 个 函数 来 创建 并 初始 化 这 个 新 对 象 ， 参 照例 9-1。 例 9-1 给 一 
个 表示 “ 值 的 范围 的 类 定义 了 原型 对 象 ， 还 定义 了 一 个 “工厂 ”* 范 数 时 
用 以 创建 并 初始 化 类 的 实例 。 


例 9-1: 一 个 简单 的 JavaScript 类 


//range .js: 实 现 一 个 能 表示 值 的 范围 的 类 


全 


// 这 个 工厂 方法 返 巨 


新 的 "范围 对 象 " 


function range(from, to){// 使 用 inherit( ) 函 数 来 创建 对 象 ， 这 个 对 象 继承 自 在 


看 定义 的 原型 对 象 


~ 
“| 


// 原 型 对 象 作为 函数 的 一 个 属性 存储 ， 并 定义 所 有 "范围 对 象 "所 共享 的 方法 (行为 ) 


var r=inherit(range.methods);// 存 储 新 的 "范围 对 象 "的 起 始 位 置 和 结束 位 置 (状态 ) 


// 这 两 个 属性 是 不 可 继承 的 ， 每 个 对 象 都 拥有 唯一 的 属性 


Kr 
J 


r.from=from; 


r .to=t0;// 返 回 这 个 新 创建 的 对 象 


return r; 


} 


// 原 型 对 象 定义 方法 ， 这 些 方法 为 每 个 范围 对 象 所 继承 


range ,methods={V// 如 果 x 在 范围 内 ， 则 返回 true; 否则 返回 false 


Sb 
ll 


// 这 个 方法 可 以 比较 数字 范围 ， 也 可 以 比较 字符 串 


期 范围 


includes:function(x){ 


return this.from<=xc&&xX<=this.to;},// 对 于 范围 内 的 每 个 整数 都 调用 一 次 f 


// 这 个 方 内 可 做 数字 范围 


foreach:function(f){ 


for(var x=Math.ceil(this.from);x<=this.to;x++)f(x); 


},// 返 回 表示 这 个 范围 的 字符 串 


tostring:function(){return"("+this.from+",..."+this.to+")";} 


};// 这 里 是 使 用 "范围 对 象 " 的 一 些 例子 


var r=range(1,3);// 创 建 一 个 范围 对 象 


r.includes(2);//=>true:2 在 这 个 范围 内 


r.foreach(console.10g);// 输 出 1 2 3 


console.1og(r);// 输 出 


一 


1...3) 


在 例 9-1 中 有 一 些 代码 是 没有 用 的 。 这 段 代码 定义 了 一 个 工厂 方法 
range()， 用 来 创建 新 的 范围 对 象 。 我 们 注意 到 ， 这 里 给 range() 汞 数 定义 
了 一 个 属性 range.methods， 用 以 快捷 地 存放 定义 类 的 原型 对 象 。 把 原型 
对 象 挂 在 函数 上 没什么 大 不 了 ， 但 也 不 是 惯用 做 法 。 再 者 ， 注 意 
range0 函 数 给 每 个 范围 对 象 都 定义 了 from 和 to 属性 ， 用 以 定义 范围 的 起 
台 位 置 和 结束 位 置 ， 这 两 个 属性 是 非 共 享 的 ， 当 然 也 是 不 可 继承 的 。 
最 后 ， 注 意 在 range.methods 中 定义 的 那些 可 共享 、 可 继承 的 方法 都 用 到 


了 from 和 to 属性 ， 而 且 使 用 了 this 关 键 字 ， 为 了 指 代 它们 ， 二 者 使 用 this 
关键 字 来 指 代 调用 这 个 方法 的 对 象 。 任 何 类 的 方法 都 可 以 通过 this 的 这 
种 基本 用 法 来 读 取 对 象 的 属性 。 


9.2 ”类 和 构造 函数 


例 9-1 展 示 了 在 JavaScript 中 定义 类 的 其 中 一 种 方法 。 但 这 种 方法 并 不 种 
用 ， 和 毕竟 它 没有 定义 构造 函数 ， 构 造 钞 数 是 用 来 初始 化 新 创建 的 对 象 
的 。8.2.3 广 已 经 讲 到 ， 使 用 关键 字 new 来 调用 构造 画 数 。 使 用 new 调 用 
构造 函数 会 目 动 创建 一 个 新 对 象 ， 因 此 构造 画 数 本 身 只 需 初始 化 这 个 
新 对 象 的 状态 即 可 。 调 用 构造 本 数 的 一 个 重要 特征 是 ， 构 造 函 数 的 

prototye 属 性 被 用 做 新 对 象 的 原型 。 这 意味 着 通过 同一 个 构造 函数 创建 
的 所 有 对 象 都 继承 自 一 个 相同 的 对 象 ， 因 此 它们 都 是 同一 个 类 的 成 

3 


例 9-2: 使 用 构造 函数 来 定义 “ 施 围 类 ” 


//range2.js: 表 示 值 的 范围 的 类 的 另 一 种 实现 


// 这 是 一 个 构造 钞 数 ， 用 以 初始 化 新 创建 的 "范围 对 象 " 


// 注 意 ， 这 里 并 没有 创建 并 返回 一 个 对 象 ， 仅 仅 是 初始 化 


function Range(from,to){// 存 储 "范围 对 象 "的 起 始 位 置 和 结束 位 置 (状态 ) 
// 这 两 个 属性 是 不 可 继承 的 ， 每 个 对 象 都 拥有 唯一 的 属性 


this.from=from; 


this.to=to,; 


} 


// 所 有 的 "范围 对 象 "都 继承 自 这 个 对 象 


// 注 意 ， 属 性 的 名 字 必 须 是 "prototype" 


Range .prototype={// 如 果 x 在 范围 内 ， 则 返回 true; 否则 返回 false 


// 这 个 方法 可 以 比较 数字 范围 ， 也 可 以 比较 字符 串 和 日 期 范围 


includes:function(x){freturn this.from<=x 人 多 X<=this.to;}，// 对 于 范围 内 的 每 个 整数 都 调用 一 次 f 


了 文人 只 可 于 数字 范围 


foreach:function(f){ 


for(var x=Math.ceil(this.from);x<=this.to;x++)f(x); 


}, // 返 回 表 示 这 个 范围 的 字符 串 


toSstring:function(){return"("+this,.from+",..."+this.to+")";} 


};// 这 里 是 使 用 "范围 对 象 " 的 一 些 例子 


var r=range(1,3);// 创 建 一 个 范围 对 象 


r.includes(2);//=>true:2 在 这 个 范围 内 


r.foreach(console.10g);// 输 出 1 2 3 


console.1log(r);// 输 出 (1...3) 


将 例 9-1 和 例 9-2 中 的 代码 做 一 个 仔细 的 对 比 ， 可 以 发 现 两 种 定义 类 的 技 
术 的 差别 。 首 移 ， 注 意 当 工厂 函数 range0 转 化 为 构造 函数 时 被 重 命名 

为 Range0。 这 里 遵循 了 一 个 常见 的 编程 约定 : 从 某 种 意义 上 讲 ， 定 义 
构造 画 数 既是 定义 类 ， 并 且 类 名 首 字 母 要 大 写 。 而 普通 的 函数 和 方法 

都 是 首 子 母 小 写 。 


再 者 ， 注 意 Range() 构 造 函 数 是 通过 new 关 键 字 调用 的 (在 示例 代码 的 
末尾 ) ， 而 range(0 工 厂 函 数 则 不 必 使 用 new。 例 9-1 通 过 调用 普通 函数 
( 见 8.2.1 节 ) 采 创 建新 对 象 ， 例 9-2 则 使 用 构造 画 数 调用 〈( 见 8.2.3 节 ) 
来 创建 新 对 象 。 由 于 Range0 构 造 画 数 是 通过 new 关 键 字 调用 的 ， 因 此 
不 必 调 用 inherit0 或 其 他 什么 逻辑 来 创建 狐 对 象 。 在 调用 构造 函数 之 前 
就 已 经 创建 了 新 对 象 ， 通 过 this 关 键 字 可 以 获取 这 个 新 对 象 。Range0) 构 


造 男 数 只 不 过 是 初始 化 this 而 已 。 构 造 画 数 甚 至 不 必 返 回 这 个 新 创 建 的 
对 象 ， 构 造 画 数 会 目 动 创建 对 象 ， 然 后 将 构造 函数 作为 这 个 对 象 的 方 
法 来 调用 一 次 ， 最 后 返回 这 个 新 对 象 。 事 实 上 ， 构 造 画 数 的 命名 规则 
( 首 字 母 大 写 ) 和 普通 钞 数 是 如 此 不 同 还 有 男 外 一 个 原因 ， 构 造 钞 数 
调用 和 普通 函数 调用 是 不 尽 相 同 的 。 构 造 画 数 就 是 用 来 “构造 新 对 

象 ” 的 ， 它 必须 通过 关键 字 new 调 用 ， 如 采 将 构造 函数 用 做 普通 函数 的 
话 ， 往 往 不 会 正常 工作 。 开 发 者 可 以 通过 命名 约定 来 (构造 画 数 首 字 
母 大 写 ， 普 通 方 法 首 字 和 母 小 写 ) 判断 是 否 应 当 在 函数 之 前 冠 以 关键 字 


mew° 


例 9-1 和 例 9-2 之 间 还 有 一 个 非常 重要 的 区 别 ， 就 是 原型 对 象 的 命名 。 在 
第 一 段 示例 代码 中 的 原型 是 range.methods。 这 种 命名 方式 很 方便 同时 具 
有 很 好 的 语义 ， 但 又 过 于 随意 。 在 第 二 段 示 例 代 码 中 的 原型 是 
Range.prototype， 这 是 一 个 强制 的 命名 。 对 Range0 构 造 男 数 的 调用 会 目 
动 使 用 Range.prototype 作 为 新 Range 对 象 的 原型 。 


最 后 ， 需 要 注意 在 例 9-1 和 例 9-2 中 两 种 类 定义 方式 的 相同 之 处 ， 两 者 的 
范围 方法 定义 和 调用 方式 是 完全 一 样 的 。 


9.2.1 构造 函数 和 类 的 标识 


上 文 提 到 ， 原 型 对 象 是 类 的 唯一 标识 : 当 且 仅 当 两 个 对 象 继 承 自 同一 
个 原型 对 象 时 ， 它 们 才 是 属于 同一 个 类 的 实例 。 而 初始 化 对 和 象 的 状态 
的 构造 钞 数 则 不 能 作为 类 的 标识 ， 两 个 构造 范 数 的 prototype 属 性 可 能 指 
pa 。 那 么 这 两 个 构造 画 数 创建 的 实例 是 属于 同一 个 类 


尽管 构造 画 数 不 像 原型 那样 基础 ， 但 构造 钞 数 是 类 的 “外 在 表现 ”。 很 
明显 的 ， 构 造 玉 数 的 名 字 通 常用 做 类 名 。 比 如 ， 我 们 说 Range() 构 造 函 
数 创 建 Range 对 象 。 然 而 ， 更 根本 地 讲 ， 当 使 用 instanceof 运 算 符 来 检测 
对 象 是 否 属于 某 个 类 时 会 用 到 构造 函数 。 假 设 这 里 有 一 个 对 和 象 r， 我 们 
想 知 道 r 是 否 是 Range 对 象 ， 我 们 这 样 写 : 


r instanceof Range// 如 果 r 继 承 自 Range .prototype， 则 返回 true 


实际 上 instanceof 运 算 符 并 不 会 检查 r 是 否 是 由 Range0 构 造 男 数 初 始 化 而 
来 ， 而 会 检查 "是否 继 承 和 目 Range.prototype。 不 过 ，instanceof 的 语法 则 
强化 了 “构造 函数 是 类 的 公有 标识 ”的 概念 。 在 本 章 的 后 面 还 会 碰 到 对 


instanceof 运 算 符 的 介绍 。 
9.2.2 ”constructor 属 性 


在 例 9-2 中 ， 将 Range.prototype 定 义 为 一 个 新 对 象 ， 这 个 对 象 包含 类 所 
需要 的 方法 。 其 实 没有 必要 新 创建 一 个 对 象 ， 用 单个 对 象 直 接 量 的 属 
性 束 可 以 方便 地 定义 原型 上 的 方法 。 任 何 JavaScript 函 数 都 可 以 用 做 构 
造 画 数 ， 并 且 调 用 构造 画 数 是 需要 用 到 一 个 prototye 属 性 的 。 因 此 ， 
个 JavaScript 范 数 (ECMAScript 5 中 的 Function.bind() 方 法 返回 的 函数 除 
外 ) 都 自动 拥有 一 个 prototype 属 性 。 这 个 属性 的 值 是 一 个 对 象 ， 这 个 对 
象 包含 唯一 一 个 不 可 枚 举 属 性 constructor。constructor 属 性 的 值 是 一 个 
函数 对 象 : 


var F=function(){]};// 这 是 一 个 函数 对 象 


var p=F.prototype;// 这 是 F 相 关联 的 原型 对 象 


var c=p.constructor;// 这 是 与 原型 相关 联 的 函数 


c===F//=>true: 对 于 任意 函数 F.prototype.constructor==F 


可 以 看 到 构造 函数 的 原型 中 存在 预先 定义 好 的 constructor 属 性 ， 这 意味 
着 对 象 通 稼 继承 的 constructor 的 指 代 它们 的 构造 国 数 。 由 于 构造 函数 是 
类 的 “公共 标识 ”， 因 此 这 个 constructor 属 性 为 对 象 提 供 了 类 。 


var 0=new F();// 创 建 类 F 的 一 个 对 象 


o0.constructor===F//=>true，constructor 属 性 指 代 这 个 类 


如 图 9-1 所 示 ， 图 9-1 展 示 了 构造 函数 和 原型 对 象 之 间 的 关系， 包括 原型 
到 构造 函数 的 反 向 引用 以 及 构造 函数 创建 的 实例 。 


实例 


newRange(1,2) 


foreach: ... 


toString; ,, 全 和 new Range(3,4) 


图 9-1 构造 画 数 及 其 原型 和 实例 


需要 注意 的 是 ， 图 9-1 用 Range() 构 造 函 数 作 为 示例 ， 但 实际 上 ， 例 9-2 
中 定义 的 Range 类 使 用 它 自身 的 一 个 新 对 象 重 写 预 定义 的 

Range.prototype 对 象 。 这 个 新 定义 的 原型 对 象 不 含有 constructor 属 性 。 
因此 Range 类 的 实例 也 不 含有 constructor 属 性。 我 们 可 以 通过 补救 措施 
来 修正 这 个 问题 ， 显 式 给 原型 添加 一 个 构造 函数 : 


Range,prototype={ 


constructor:Range, // 显 式 设置 构造 丽 数 反 向 引用 


includes:function(x){return this.from<=x&&x<=this. to;}, 
foreach:function(f){ 

for(var x=Math.ceil(this.from);x<=this.to;x++)f(x); 

}, 
tostring:function(){return"("+this.from+",..."+this.to+")";} 
}; 


男 一 种 常见 的 解决 办 法 是 使 用 预定 义 的 原型 对 象 ， 预 定义 的 原型 对 象 
包 侣 constructor 属 性 ， 然 后 依次 给 原型 对 象 汰 加 方法 : 


// 扩 展 预 定义 的 Range .prototype 对 象 ， 而 不 重 写 


// 这 样 束 自 动 创建 Range .prototype.constructor 属 性 


Range.prototype.includes=function(x){return this.from<=x&&x<=this.to,;}; 
Range.prototype.foreach=function(f){ 

for(var x=Math.ceil(this.from);x<=this.to;x++)f(x); 

}; 

Range.prototype.toSstring=function(){ 
return"("+this,.from+"..."+this,.to+")"; 


}; 


9.3 JavaScript 中 Java 式 的 类 继承 


如 采 你 有 过 Java 或 其 他 类 似 强 类 型 面向 对 象 语言 的 开发 经 历 的 话 ， 在 你 
的 脑海 中 ， 类 成 员 的 模样 可 能 会 是 这 个 样子 : 


实例 字段 

它们 是 基于 实例 的 属性 或 变量 ， 用 以 保存 独立 对 象 的 状态 。 
实例 方法 

它们 是 类 的 所 有 实例 所 共享 的 方法 ， 由 每 个 独立 的 实例 调用 。 
类 字段 


这 些 属性 或 变量 是 属于 类 的 ， 而 不 是 属于 类 的 菜 个 实例 的 。 


这 些 方法 是 属于 类 的 ， 而 不 是 属于 类 的 某 个 实例 的 。 


JavaScript 和 Java 的 一 个 不 同 之 处 在 于 ，JavaScript 中 的 函数 都 是 以 值 的 
形式 出 现时 ， 方 法 和 字段 之 间 并 没有 太 大 的 区 别 。 如 有 果 属 性 值 是 函 

数 ， 那 么 这 个 属性 就 定义 一 个 方法 ， 否 则 ， 它 只 是 一 个 普通 的 属性 
或 “字段 ”。 尽 管 存在 诸多 差异 ， 我 们 还 是 可 以 用 JavaScript 模 拟 出 Java 中 
的 这 四 种 类 成 员 类 型 。JavaScript 中 的 类 牵扯 三 种 不 同 的 对 象 (参照 图 
9-1) ， 三 种 对 象 的 属性 的 行为 和 下 面 三 种 类 成 员 非 常 相似 : 


构造 函数 对 象 


之 前 提 到 ， 构 造 画 数 (对 象 ) 为 JavaScript 的 类 定义 了 名 字 。 任 何 添 加 
到 这 个 构造 函数 对 象 中 的 属性 都 是 类 字段 和 类 方法 《如果 属 性 值 是 函 
数 的 话 就 是 类 方法 ) 。 


原型 对 象 


原型 对 象 的 属性 被 类 的 所 有 实例 所 继承 ， 如 果 原 型 对 象 的 属性 值 是 函 
数 的 话 ， 这 个 函数 束 作 为 类 的 实例 的 方法 来 调用 。 


实例 对 象 


类 的 每 个 实例 都 是 一 个 独立 的 对 象 ， 直 接 给 这 个 实例 定义 的 属性 是 不 
会 为 所 有 实例 对 象 所 共享 的 ， 定 义 在 实例 上 的 非 数 属性 ， 实 际 上 是 
实例 的 字段 


在 JavaScript 中 定义 类 的 步骤 可 以 缩减 为 一 个 分 三 步 的 算法 。 第 一 步 ， 
先 定 义 一 个 构造 函数 ， 并 设置 初始 化 新 对 象 的 实例 属性 。 第 二 步 ， 给 
构造 范 数 的 prototype 对 象 定 义 实例 的 方法 。 第 三 步 ， 给 构造 范 数 定义 类 
字段 和 类 属性 。 我 们 可 以 将 这 三 个 步骤 封 痛 进 一 个 简单 的 defineClass() 
函数 中 〈 这 里 用 到 了 例 6-2 中 的 extend0 画 数 和 例 8-3 中 的 改进 版 ) : 


// 一 个 用 以 定义 简单 类 的 函数 


function defineClass(constructor,// 用 以 设置 实例 的 属性 的 函数 


methods, // 实 例 的 方法 ， 复 制 至 原型 中 


statics)// 类 属性 ， 复 制 至 构造 钞 数 中 


If(methods )extend(constructor ,prototypevmethods ) ， 
if(statics)extend(constructor, statics); 


return constructor; 


// 这 是 Range 类 的 另 一 个 实现 
var SimpleRange= 


defineClass(function(f,t){this,.f=f;this.t=t;}, 


includes:function(x){return this.f<=x&&x<=this.t;}, 

tostring:function(){return this.f+"..."+this.t,;} 

}, 

{upto:function(t){return new SimpleRange(0,t);}}); 

例 9-3 中 定义 类 的 代码 更 长 一 些 。 这 里 定义 了 一 个 表示 复数 的 类 ， 这 段 
代码 展示 了 如 何 使 用 JavaScript 来 模拟 实现 Java 式 的 类 成 员 。 例 9-3 中 的 
代码 没有 用 到 上 面 的 defineClass(0) 函 数 ， 而 是 “手动 ”来 实现 : 

例 9-3: Complex.js: 表示 复数 的 类 


/A 


*Complex.js: 


* 这 个 文件 定义 了 Complex 类 ， 用 来 描述 复数 


* 回 忆 一 下 ， 复 数 是 实数 和 虚数 的 和 ， 虚数 i 是 -1 的 平方 根 


由 4 


yA* 


* 这 个 构造 画 数 为 它 所 创建 的 每 个 实例 定义 了 实例 字段 r 和 i 


这 两 个 字段 分 别 保存 复数 的 实 部 和 虚 部 


* 它 们 是 对 象 的 状态 


4 


function Complex(real,imaginary)t{ 


if(isNaN(real)||isNaN(imaginary))// 确 保 两 个 实 参 都 是 数字 


throw new TypeError();// 如 果 不 都 是 数字 则 抛 出 错误 


this .r=real;// 复 数 的 实 部 


this.,i=imaginary;// 复 数 的 虚 音 


人 


* 类 的 实例 方法 定义 为 原型 对 象 的 函数 值 属 性 


en 


* 这 里 定义 的 方法 可 以 被 所 有 实例 继承 ， 并 为 它们 提供 共享 的 行为 


* 需 要 注意 的 是 ，JavaScript 的 实例 方法 必须 使 用 关键 字 this 


* 来 存 取 实 例 的 字段 


*/ 


// 当 前 复数 对 象 加 上 另外 一 个 复数 ， 并 返回 一 个 新 的 计算 和 值 后 的 复数 对 象 


CompJlex.prototype.add=function(that ){ 


return new Complex(this.r+that.r,this.i+that.1); 


}; 7// 当 前 复数 乘 以 另外 一 个 复数 ， 并 返回 一 个 新 的 计算 乘积 之 后 的 复数 对 象 


Complex.prototype.mul=function(that){ 


return new Complex(this.r*that.r-this.i*that.i,this.r*that.i+this.i*that.r); 


人 以 


};// 计 算 复 数 的 模 ， 复 数 的 模 定义 为 原点 (9,0) 到 复 平面 的 距离 


可 
Ba 


Complex.prototype.mag=function(){ 


return Math.sqrt(this,.r*this.r+this.i*this.i); 


};// 复 数 的 求 负 运 算 


Complex.prototype.neg=function(){ 


return new Complex(-this.r,-this.1i); 


Ud 


};// 将 复数 对 象 转换 为 一 个 字符 


Complex.prototype.toString=function(){ 


return"{"+this.r+","+this.i+"}"; 


};// 检 测 当 前 复数 对 象 是 否 和 男 外 一 个 复数 值 相等 


Complex.prototype.equals=function(that)t{ 


return that1=nul1&&y// 必 须 有 定义 且 不 能 是 nu11 


that .constructor===Comp1lex 允 多// 并 且 必 须 是 Complex 的 实例 


this.r===that.r&&this.i===that .i;// 并 且 必 须 包 含 相同 的 值 


了 人 


* 类 字段 (比如 常量 ) 和 类 方法 直接 定义 为 构造 函数 的 属性 


注意 的 是 ， 类 的 方法 通常 不 使 


关键 字 this， 


// 它 们 的 命名 全 都 是 大 写 ， 


在 ECMAScript 5 中 ， 


以 表明 它们 是 常量 


还 能 设置 这 些 类 字段 的 


有 预定 义 了 一 些 对 复数 运算 有 帮助 的 类 字段 


Complex.ZERO=new Complex(0,0); 


Complex.ONE=new Complex(1,0); 


Complex.I=new Complex(0,1);// 这 个 


Complex 对 象 


Kr 
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性 为 只 读 ) 


// 或 者 抛 出 一 个 类 型 错误 异常 


Complex.parse=function(s)t{ 


try{// 假 设 解析 成 功 


方法 将 


实例 对 象 的 toString 方 法 返 


var m=Complex._format .exec(s);// 利 用 正则 表达 式 进 行 匹 配 


return new Complex(parseFloat(m[1]),parseFloat(m[2])); 


}catch(x){// 如 果 解 析 


败 则 抛 出 异常 


throw new TypeError("Can't parse'"+s+"'as a complex number."); 


};// 定 义 类 的 "私有 "字段 ， 


这 个 字段 在 Complex .parse( ) 中 用 到 ] 


// 下 划 线 前 级 表明 它 是 类 内 部 使 用 的 ， 而 不 


于 类 的 公 


E: 


Complex._format=/^\{([^,]+), ([^}]+)\}$/; 


有 API 的 部 分 


的 字符 串 格 式 解析 为 一 个 


从 例 9-3 中 所 定义 的 Complex 类 可 以 看 出 ， 我 们 用 到 了 构造 画 效 、 实 例 
字段 、 实 例 方 法 、 类 字段 和 类 方法 ， 看 一 下 这 段 示例 代码 : 


var c=new Comp1lex(2, 3) ;// 使 用 构造 函数 创建 新 的 对 象 


var d=new Complex(c.i,c.r);// 用 到 了 c 的 实例 属性 


c.add(d).toString();//=>"{5,5}": 使 用 了 实例 的 方法 


// 这 个 稍微 复杂 的 表达 式 用 到 了 类 方法 和 类 字段 


Complex.parse(c.toSstring()).// 将 c 转 换 为 字符 串 


add(c.neg()).// 加 上 它 的 负数 


equals (Complex .ZERO0)// 结 果 应 当 永远 是 " 


尽管 JavaScript 可 以 模拟 出 Java 式 的 类 成 员 ， 但 Java 中 有 很 多 重要 的 特性 
是 无 法 在 JavaScript 类 中 模拟 的 。 首 先 ， 对 于 Java 类 的 实例 方法 来 说 ， 
实例 字段 可 以 用 做 局 部 变量 ， 而 不 需要 使 用 关键 字 this 来 引用 它们 。 
JavaScript 是 没 办 法 模拟 这 个 特性 的 ， 但 可 以 使 用 with 语句 来 近似 地 实 
现 这 个 功能 (但 这 种 做 法 并 不 推荐 ) : 


Complex.prototype.tostring=function(){ 


with(this){ 


return"{"+r+", 中卫 二 让 


} 


}; 


在 Java 中 可 以 使 用 final 声 明 字 段 为 常量 ， 并 且 可 以 将 字段 和 方法 声明 为 
private， 用 以 表示 它们 是 私有 成 员 且 在 类 的 外 面 是 不 可 见 的 。 在 
JavaScript 中 没有 这 些 关键 字 。 例 9-3 中 使 用 了 一 些 命名 写法 上 的 约定 来 
给 出 一 些 暗 示 ， 比 如 哪些 成 员 是 不 能 修改 的 (以 大 写字 母 命名 的 命 
名 ) ， 哪 些 成 员 在 类 外 部 是 不 可 见 的 (以 下 划 线 为 前 级 的 命名 ) 。 关 
于 这 两 个 主题 的 讨论 在 本 章 后 续 还 会 页 到 : 私有 属性 可 以 使 用 闭 包 里 
的 局 部 变量 来 模拟 (参照 9.6.6 方 ) ， 常 量 属性 可 以 在 ECMAScript 5 中 
直接 实现 (参照 9.8.2 节 ) 


9.4 类 的 扩充 


JavaScript 中 基于 原型 的 继承 机 制 是 动态 的 : 对 象 从 其 原型 继承 属性 ， 
如 果 创 建 对 象 之 后 原型 的 属性 发 生 改 变 ， 也 会 影响 到 继承 这 个 原型 的 
所 有 实例 对 象 。 这 意味 着 我 们 可 以 通过 给 原型 对 象 添加 新 方法 来 扩充 
JavaScript 类 。 这 里 我 们 给 例 9-3 中 的 Complex 类 添加 方法 来 计算 复数 的 
共 斩 复 数 4 和。 


// 返 回 当 前 复数 的 共 斩 复 数 


Complex.prototype.conj=function(){return new Complex(this,.r,-this.i),;}; 


JavaScript 内 置 类 的 原型 对 象 也 是 一 样 如 此 “开放 ”， 也 就 是 说 可 以 给 数 
字 、 字 符 串 、 数 组 、 函 数 等 数据 类 型 添加 方法 。 在 例 8-5 中 我 们 曾 给 
ECMAScript 3 中 的 函数 类 添加 了 bind0 方 法 ， 这 个 方法 原来 是 没有 的 : 


if(!Function.prototype.bind){ 


Function.prototype.bind=function(o/*,args*/){//bind() 方 法 的 代码 ... 
}; 


} 


这 里 有 一 些 其 他 的 例子 : 


// 多 次 调用 这 个 函数 f， 传 入 一 个 迭代 数 


// 比 如 , 要 输出 "hello" 三 次 : 


//var nN=3,; 


//n.times(function(n){console.log(n+"hello");}); 


Number .prototype.times=function(f,context){ 


Var n=Number (this); 


for(var i=0;i<n;i++)f.call(context, i); 


};// 如 果 不 存 在 ES5 的 String .trim( ) 方 法 的 话 ， 就 定义 它 


SZ 


去 除 字符 串 开 头 和 结尾 的 空格 


// 这 个 方 # 


String.prototype.trim=String.prototype.trim||function(){ 


if(!this)return this;// 空 字符 串 不 做 处 理 


return this.replace(/^\s+|\s+$/g,"");// 使 用 正则 表达 式 进行 空格 替换 


有 ( 非 标 准 的 ) name 属 性 ， 则 直接 使 用 name 属 性 


};// 返 回 函 数 的 名 字 ， 如 果 


C 


// 否 则 ， 将 函数 转换 为 字符 捉 然后 从 中 提取 名 字 


// 如 果 是 没有 名 字 的 函数 ， 则 返回 一 个 空 字符 串 


Function.prototype.getName=function(){ 


return this.name||this,.toString().match(/function\s*([^()*]\(/)[1]; 


}; 


可 以 给 Object.prototype 添 加 方法 ， 从 而 使 所 有 的 对 象 都 可 以 调用 这 些 方 
法 。 但 这 种 做 法 并 不 推荐 ， 因 为 在 ECMAScript 5 之 前 ， 无 法 将 这 些 新 


增 的 方法 设置 为 不 可 枚 举 的 ， 如 果 给 Object.prototype 添 加 属性 ， 这 些 属 
性 是 可 以 被 fovin 循 环 遇 历 到 的 。 在 9.8.1 节 中 会 给 出 ECMAScript 5 中 的 
一 个 例子 ， 其 中 使 用 Object.defineProperty(0) 方 法 可 以 安全 地 扩充 
Object.prototype。 


然而 并 不 是 所 有 的 宿主 环境 〈 比 如 Web 浏 览 器 ) 都 可 以 使 用 
Object.defineProperty()， 这 跟 ECMAScript 的 具体 实现 有 关 。 比 如 ， 在 很 
多 Web 浏 贤 器 中 ， 可 以 给 HTMLElement.prototype 添 加 方法 ， 这 样 当 前 
文档 中 表示 HTML 标 记 的 所 有 对 象 就 可 以 继承 这 些 方法 。 但 当前 版 本 的 
正则 不 文 持 这 样 做 。 这 对 客户 端 编程 实用 技术 有 者 严重 的 限制 。 


9.5 ”类 和 类 型 


回想 一 下 第 3 章 的 内 容 ，JavaScript 定 义 了 少量 的 数据 类 型 : null 、 
undefined、 布尔 值 、 数 字 、 字 符 串 、 男 数 和 对 象 。typeof 运 算 符 〈 见 
4.13.2 节 ) 可 以 得 出 值 的 类 型 。 然 而 ， 我 们 往往 更 希望 将 类 作为 类 型 来 
对 等 ， 这 样 就 可 以 根据 对 象 所 属 的 类 来 区 分 它们 。JavaScript 语 言 核心 
中 的 内 置 对 象 (通常 是 指 客 户 问 JavaScript 的 答 主 对 象 ) 可 以 根据 它们 
的 class 属 性 ( 见 6.8.2 节 ) 来 区 分 彼此 ， 比 如 在 例 6-4 中 用 到 了 classofO) 函 
数 。 但 当 我 们 使 用 本 章 所 提 到 的 技术 来 定义 类 的 话 ， 实 例 对 象 的 class 
属性 都 是 "Object"， 这 时 classof0) 函 数 也 无 用 武之 地 。 


接 下 来 的 几 节 介绍 了 三 种 用 以 检测 任意 对 象 的 类 的 技术 : instanceof 运 
算 符 ，constructor 属 性 ， 以 及 构造 函数 的 名 字 。 但 每 种 技术 都 不 甚 完 
美 ， 本 蔬 总 结 讨 论 了 鸭 式 辩 型 ， 这 种 编程 哲学 更 加 关注 对 象 可 以 完成 
什么 工作 ( 它 包含 什么 方法 ) 而 不 是 对 象 属于 哪个 类 。 


9.5.1 _ instanceof 运 算 符 


4.9.4 节 已 经 讨论 过 了 instanceof 运 算 符 。 左 操作 数 是 待 检测 其 类 的 对 
象 ， 厂 操作 数 是 定义 类 的 构造 画 数 。 如 果 o 继 承 自 c.prototype， 则 表达 
式 o instanceof c 值 为 tue。 这 里 的 继承 可 以 不 是 直接 继承 ， 如 果 o 所 继承 
的 对 象 继 承 自 男 一 个 对 象 ， 后 一 个 对 象 继 承 自 c.prototype， 这 个 表达 式 
的 运算 结果 也 是 true 9 


正如 在 本 章 前 面 所 讲 到 的 ， 构 造 函 数 是 类 的 公共 标识 ， 但 原型 是 唯一 
的 标识 。 尽 管 imstanceof 运 算 符 的 右 操作 数 是 构造 画 效 ， 但 计算 过 程 实 
际 上 征 检测 了 对 象 的 继承 关系 ， 而 不 是 检测 创建 对 象 的 构造 画 数 。 


如 果 你 想 检 测 对 象 的 原型 链 上 是 否 存在 某 个 特定 的 原型 对 象 ， 有 没有 
不 使 用 构造 函数 作为 中 介 的 方法 呢 ? 管 案 是 肯定 的 ， 可 以 使 用 
isPrototypeOf0) 方 法 。 比 如 ， 可 以 通过 如 下 代码 来 检测 对 象 r 是 否 是 例 9- 
1 中 定义 的 范围 类 的 成 员 : 


range.methods.isPrototypeof(r);//range.method 是 原型 对 象 


instanceof 运 算 符 和 isPrototypeOf() 方 法 的 缺点 是 ， 我 们 无 法 通过 对 象 来 
获得 类 名 ， 只 能 检测 对 象 是 否 属 于 指定 的 类 名 。 在 客户 端 JavaScript 中 
还 有 一 个 比较 严重 的 不 足 ， 就 是 在 多 窗口 和 多 框架 子 页 面 的 Web 应 用 中 
兼容 性 不 佳 。 每 个 窗口 和 框 染 子 页 面 都 具有 单独 的 执行 上 下 文 ， 每 个 
上 下 文 都 包含 独 有 的 全 局 变量 和 一 组 构造 函数 。 在 两 个 不 同 框 染 页 面 
中 创建 的 两 个 数组 继承 自 两 个 相同 但 相互 独立 的 原型 对 象 ， 其 中 一 个 
框架 页 面 中 的 数组 不 是 男 一 个 框架 页 面 的 Array0 构 造 钞 数 的 实例 ， 


instanceof 运 算 结 果 是 false 。 


9.5.2 ”constructor 属 性 
另 一 种 识别 对 象 是 否 属 于 某 个 类 的 方法 是 使 用 constructor 必 性。 因为 构 


0 公共 标识 ， 所 以 最 直接 的 方法 就 是 使 用 constructor 属 性 ， 
比如 : 


function typeAndValue(x){ 


if(x==null)return"";//Null 和 undefined 没 有 构造 函数 


switch(x.constructor)t{ 


case Number:return"Number:"+x;// 处 理 原始 类 型 


case String:return"String:'"+x+""" 


case Date:return"Date:"+Xx;// 处 理 内 置 类 型 


case RegExp:return"Regexp:"+x; 


case Complex:return"Complex:"+X;// 处 理 自 定 义 类 型 


} 


} 


需要 注意 的 是 ， 在 代码 中 关键 字 case 后 的 表达 式 都 是 函数 ， 如 果 改 用 
typeof 运 算 符 或 获取 到 对 象 的 class 属 性 的 话 ， 它 们 应 当 改 为 字符 串 。 


使 用 constructor 属 性 检测 对 象 属于 某 个 类 的 技术 的 不 足 之 处 和 instanceof 
一 样 。 在 多 个 执行 上 下 文 的 场景 中 它 是 无 法 正常 工作 的 (比如 在 浏览 
器 窗口 的 多 个 框架 子 页 面 中 ) 。 在 这 种 情况 下 ， 每 个 框架 页 面 各 自 拥 
有 独立 的 构造 函数 集合 ， 一 个 框架 页 面 中 的 Array 构 造 画 数 和 另 一 个 框 
染 页 面 的 Array 构 造 玉 数 不 是 同一 个 构造 玉 数 。 


同样 ， 在 JavaScript 中 也 并 非 所 有 的 对 象 都 包含 constructor 属 性 。 在 每 个 
新 创建 的 函数 原型 上 默认 会 有 constructor 属 性 ， 但 我 们 尝 常 会 包 觉 原型 
上 的 constructor 属 性 。 比 如 本 章 前 面 的 示例 代码 中 所 定义 的 两 个 类 (在 
例 9-1 和 例 9-2 中 ) ， 它 们 的 实例 都 没有 constructor 属 性 。 


9.5.3 ”构造 函数 的 名 称 


使 用 instanceof 运 算 符 和 constructor 必 性 来 检测 对 象 所 属 的 类 有 一 个 主要 
的 问题 ， 在 多 个 执行 上 下 文中 存在 构造 函数 的 多 个 副本 的 时 候 ， 这 两 
种 方法 的 检测 结果 会 出 错 。 多 个 执行 上 下 文中 的 函数 看 起 来 是 一 模 
样 的 ， 但 它们 是 相互 独立 的 对 象 ， 因 此 彼此 也 不 相等 。 


一 种 可 能 的 解决 方案 是 使 用 构造 函数 的 名 字 而 不 是 构造 玉 数 本 号 作为 
类 标识 符 。 一 个 窗口 里 的 Array 构 造 画 数 和 另 一 个 窗口 鸭 Array 构 造 函 数 
是 不 相等 的 ， 但 是 它们 的 名 字 是 一 样 的 。 在 一 些 JavaScript 的 实现 中 为 
函数 对 象 提供 了 一 个 非 标准 的 属性 name， 用 来 表示 函数 的 名 称 。 对 于 
那些 没有 name 属 性 的 JavaScript 实 现 来 说 ， 可 以 将 函数 转换 为 字符 串 ， 
然后 从 中 提取 出 函数 名 〈 在 9.4 节 中 的 示例 代码 给 Function 类 添加 了 
getName() 方 法 ， 束 是 使 用 这 种 方式 来 得 到 函数 名 ) 。 


例 9-4 定 义 的 type0O 函 数 以 字符 串 的 形式 返回 对 象 的 类 型 。 它 用 typeof 运 
算 符 来 处 理 原始 值 和 函数 。 对 于 对 象 来 说 ， 它 要 么 返回 class 属 性 的 值 


要 么 返回 构造 


函数 的 名 字 。 typeg 疼 函数 用 到 了 例 6- 0 


9.4 廊 中 的 Function.getName() 方 法 。 
方法 的 代码 。 


例 9-4: 可 以 判断 值 的 类 型 的 type(0) 函 数 


数 和 


为 了 简单 起 见 舍 了 函数 和 


/x 
* 以 字符 串 形式 返回 0 的 类 型 : 
*- 如 果 o 是 null, 返回 "null"; 如 果 o 是 NaN, 返回 "nan" 
* -如 果 typeof 所 返回 的 值 不 是 "object"， 则 返回 这 个 值 
* (注意 ， 些 JavaScript 的 实现 将 正则 表达 式 识别 为 函数 ) 
* -如 果 o 的 类 不 是 "0bject"， 则 返回 这 个 值 
* -如 果 0 包 含 构造 函数 并 且 这 个 构造 函数 具有 名 称 , 则 返回 这 个 名 称 
否则 ， 一 律 返回 "0bject" 
xx / 
function type(o){ 
var t,c,n;//type,class,name 
// 人 处 理 nu1l1 值 的 特殊 情形 
if(o===null)return"nul1";// 另 外 一 种 特殊 情形 :NaN 和 它 自身 不 相等 
if(0o!==0)return"nan";// 如 果 typeof 的 值 不 是 "object"， 则 使 用 这 个 值 


// 这 可 以 识别 


if((t=typeof 0o)! 


// 这 种 方式 可 


出 原始 值 的 类 型 


以 识别 


出 大 多 数 的 内 


J 和 函数 


object")return t;// 返 


对 象 


口 


对 象 的 类 名 ， 除 非 值 为 "0bject" 


[ 款 


if((c=classof(0))!=="0bject")return c;// 如 果 对 象 构 造 画 数 的 名 字 存 在 的 话 ， 则 返 蕊 


if(o.constructor& ctypeof o.constructor==="function"&& 


(n=o.constructor .getName() ))return n;// 其 他 的 类 型 都 无 法 判别 ， 一 律 返回 "0bject" 


return"Object"; 


// 返 回 对 象 的 类 


function classof(o){ 


return Object.prototype.tostring.call(o).slice(8, -1); 


};// 返 回落 数 的 名 字 〈 可 能 是 空 字符 串 ) ， 不 是 函数 的 话 返 回 nu11 


Function.prototype.getName=function(){ 
if("name"in this)return this.name,; 
return this.name=this.tostring().match(/function\s*([^(]*)\(/)[1]; 


}; 


这 种 使 用 构造 函数 名 字 来 识别 对 象 的 类 的 做 法 和 使 用 constructor 属 性 一 
样 有 一 个 问题 ， 并 不 是 所 有 的 对 象 都 具有 constructor 属 性 。 此 外 ， 并 不 
是 所 有 的 函数 都 有 名 字 。 如 果 使 用 不 带 名 字 的 函数 定义 表达 式 ! 半 定义 
一 个 构造 画 数 ，getName() 方 法 则 会 返回 空 字符 串 : 


// 这 个 构造 画 数 没有 名 


性 


var Complex=function(x,y){this.r=x;this.i=y;}// 这 个 构造 函数 有 和 名字 


var Range=function Range(f,t){this.from=f;this.to=t,;} 


9.5.4 鸭 式 辩 型 


上 文 所 措 述 的 检测 对 象 的 类 的 各 种 技术 多 少 都 会 有 些 问 题 ， 至 少 在 容 
户 端 JavaScript 中 是 如 此 。 解 决 办 法 丈 是 规避 卸 这 些 问 题 : 不 要 天 注 “ 对 
象 的 类 是 什么 ”， 而 是 关注 “对 象 能 做 什么 ”。 这 种 思考 问题 的 方式 在 
Python 和 Ruby 中 非常 普 笛 ， 称 为 “ 聊 式 辩 型 ”这 个 表述 是 由 作家 James 
Whitcomb Riley 提 出 的 ) 。 


像 琢 子 一 样 走路 、 游 泳 并 且 咀 咀 叫 的 马 殉 是 鸭子 。 


对 于 JavaScript 程 序 员 来 说 ， 这 人 句 话 可 以 理解 为 “如果 一 个 对 象 可 以 像 鸭 
子 一 样 走路 、 游 六 并 且 咀 咀 叫 ， 吏 认为 这 个 对 象 是 鸭 和 于 ， 哪 介 它 并 不 
是 从 鸭子 类 的 原型 对 象 继承 而 来 的 ”。 


我 们 拿 例 9-2 中 的 Range 类 来 举例 好 了 “。 起 初 定义 这 个 类 用 以 描述 数字 

的 范围 。 但 要 注意 ，Range() 构 造 钞 数 并 没有 对 实 参 进行 类 型 检查 以 确 
保 实 参 是 数字 类 型 。 但 却 将 参数 使 用 "> ”运算 从 进行 比较 运算 ， 因 为 

这 里 假定 它们 是 可 比较 的 。 同 样 ，includes() 方 法 使 用 “<=” 运 算 符 进行 
比较 ， 但 没有 对 艺 围 的 结束 点 进行 类 似 的 假设 。 因 为 类 并 没有 强制 使 

用 特定 的 类 型 ， 它 的 inlcudes() 方 法 可 以 作用 于 任何 结束 点 ， 只 要 结束 

点 可 以 用 关系 运算 符 执 行 比较 运算 。 


Var lowercase=new Range("a","z"); 


Var thisYear=new Range(new Date(2009,0,1),new Date(2010,0,1)); 


Range 类 的 foreach() 方 法 中 也 没有 显 式 地 检测 表示 范围 的 结束 点 的 类 
型 ， 但 Math.ceil0 和 “++” 运 算 符 表明 它 只 能 对 数字 结束 点 进行 操作 。 


男 外 一 个 例子 ， 回 想 一 下 在 7.11 节 中 所 讨论 的 类 数组 对 象 。 在 很 多 场景 
下 ， 我 们 并 不 知道 一 个 对 象 古 否 真 的 是 Array 的 实例 ， 当 然 是 可 以 通过 

判断 是 否 包含 非 负 的 length 属 性 来 得 知 是 否 是 Array 的 实例 。 我 们 说 “ 包 

伟 一 个 值 是 非 负 整数 的 length” 是 数组 的 一 个 特征 一 一 “会 走路 ”*"， 任 何 具 
0 以 当做 数组 来 对 待 (在 很 多 情形 


然而 必须 要 了 解 的 是 ， 真 正 数 组 的 length 属 性 有 一 些 独 有 的 行为 : 当 添 
加 新 的 元 素 时 ， 数 组 的 长 度 会 目 动 更 新 ， 并 且 当 给 length 属 性 设置 一 个 
更 小 的 整数 时 ， 数 组 会 被 自动 截断 。 我 们 说 这 些 特征 是 “会 游泳 ”和 "“ 咀 
呀 叫 ”。 如 采 所 实现 的 代码 需要 “会 游泳 " 且 能 “ 咀 嘎 叫 ”， 则 不 能 使 用 

只 “会 走路 ”的 类 似 数组 的 对 和 象 。 


上 文 所 讲 到 的 蝎 式 辩 型 的 例子 提 到 了 进行 对 象 的 “<<” 运 算 符 的 职责 以 
及 length 属 性 的 特殊 行为 。 但 当 我 们 提 到 胸 式 辩 型 时 ， 往 往 是 说 检测 对 
象 是 否 实现 了 一 个 或 多 个 方法 。 一 个 强 类 型 的 triathlon0 函 数 所 需要 的 
参数 必须 是 TriAthlete 对 象 。 而 一 种 “了 鸭 式 辩 型 ? 式 的 做 法 是 ， 只 要 对 象 
包 侣 walk0、swim0 和 bike0O 这 三 个 方法 残 可 以 作为 参数 传人 和。 同 理 ， 可 
以 重新 设计 Range 类 ， 使 用 结束 点 对 象 的 compareTo() 和 succ() 

(successor) 方法 来 代替 “< ”和 “++” 运 算 符 。 


榴 式 辩 型 的 实现 方法 让 人 感觉 太 “ 放 任 自流 ”: 仅仅 是 假设 输入 对 象 实 
现 了 必要 的 方法 ， 根 本 没有 执行 进一步 的 检查 。 如 果 输 入 对 象 没有 遵 
循 “ 假 设 ”"， 那 么 当代 码 试图 调用 那些 不 存在 的 方法 时 天 会 报错 。 必 一 
种 实现 方法 是 对 输入 对 象 进行 检查 。 但 不 是 检查 它们 的 类 ， 而 是 用 适 
当 的 名 字 来 检查 它们 所 实现 的 方法 。 这 样 可 以 将 非法 输入 尽 可 能 早 地 
拦截 在 外 ， 并 可 给 出 这 有 更 多 提示 信息 的 报销 。 


例 9-5 中 按照 鸭 式 辩 型 的 理念 定义 了 quacks0 函 数 (函数 名 

叫 "implements" 会 更 加 合适 ， 但 implements 是 保留 字 ) 。guacks() 用 以 检 
查 一 个 对 象 (第 一 个 实 参 ) 是 否 实现 了 剩 下 的 参数 所 表示 的 方法 。 对 
于 除 第 一 个 参数 外 的 每 个 参数 ， 如 有 果 是 字符 串 的 话 则 直接 检查 是 人 否 存 
在 以 它 命名 的 方法 ; 如 果 是 对 象 的 话 则 检查 第 一 个 对 象 中 的 方法 是 否 
在 这 个 对 象 中 也 具有 同名 的 方法 ， 如 果 参 数 是 函数 ， 则 假定 它 是 构造 
函数 ， 函 数 将 检查 第 一 个 对 象 实现 的 方法 是 否 在 构造 本 数 的 原型 对 象 
中 也 具有 同名 的 方法 。 


例 9-5: 利用 肥 式 辩 型 实现 的 玉 数 


// 如 果 o 实 现 了 除 第 一 个 参数 之 外 的 参数 所 表示 的 方法 ， 则 返回 true 


function quacks(o/*,...*/){ 


for(var i=1;i<arguments.length;i++){// 遍 历 o 之 后 的 所 有 参数 


var arg=arguments[i]; 


汀 
中 
洋 
ft 


switch(typeof arg){// 如 


case'string'://string: 直 接 用 名 字 做 检查 


if(typeof o[arg]!=="function")return false; 


continue; 


case'function'://function: 检 查 函 数 的 原型 对 象 上 的 方法 


// 如 果实 参 是 函数 , 则 使 用 它 的 原型 


arg=arg.prototype;// 进 入 下 一 个 case 


case'object'://object :检查 匹配 的 方法 


for(var m in arg){// 遍 历 对 象 的 每 个 属性 


| 证 


if(typeof arg[m]!=="function")continue;// 跳 过 不 是 方法 的 属性 


if(typeof of[m]!=="function")return false,; 


// 如 果 程 序 能 执行 到 这 里 ， 说 明 o 实 现 了 所 有 的 方法 


return true 


关于 这 个 quacks() 范 数 还 有 一 些 地 方 是 需要 尤为 注意 的 。 首 先 ， 这 里 
征 通过 特定 的 名 称 来 检测 对 象 是 否 含有 一 个 或 多 个 值 为 画 数 的 属 性。 
我 们 无 法 得 知 这 些 已 经 存在 的 属性 的 细 市 信息 ， 比 如 ， 函 数 是 干什么 


用 的 ? 它们 需要 多 少 参 数 ? 参数 类 型 是 什么 ? 然而 这 是 鸭 式 辩 型 的 本 
质 所 在 ， 如 采 使 用 鸭 式 辩 型 而 不 是 强制 的 类 型 检测 的 方式 定义 API， 那 
么 创建 的 API 床 当 更 具有 灵活 性 才 可 以 ， 这 样 才能 确保 你 提供 给 用 户 的 
API 更 加 安全 可 靠 。 关 于 quacks0 函 数 还 有 另 一 问题 需要 注意 ， 束 是 它 
不 能 应 用 于 内 置 类 。 比 如 ， 不 能 通过 quacks(o,Array) 来 检测 o 是 否 实现 
了 Aray 中 所 有 同名 的 方法 。 原 因 是 内 置 类 的 方法 都 是 不 可 枚 举 的 ， 
quacks() 中 的 for/in 循 环 无 法 遍历 到 它们 (注意 ， 在 ECMAScript 5 中 有 一 
个 补救 办 法 ， 就 是 使 用 Ojbect.getOwnPropertyNames()) 。 


9.6 JavaScript 中 的 面 回 对 象 技术 


到 目前 为 止 ， 我 们 讨论 了 JavaSscript 中 类 的 基础 知识 : 原型 对 象 的 重要 
性 、 它 和 构造 画 数 之 间 的 联系 、instanceof 运 算 符 如 何 工 作 等 。 本 节 将 
目光 转向 一 些 实际 的 例子 (尽管 这 不 是 基础 知识 ) ， 包 括 如 何 利 用 
JavaScript 中 的 类 进行 编程 。 我 们 从 两 个 重要 的 例子 开始 ， 这 两 个 例子 
中 实现 的 类 非常 有 意思 ， 接 下 来 的 讨论 都 将 基于 此 作 展 开 。 


1 


集合 (set) 是 一 种 数据 结构 ， 用 以 表示 非 重 复 值 的 无 序 集合 。 集 合 的 

基础 方法 包括 添加 值 、 检 测 值 是 否 在 集合 中 ， 这 种 集合 需要 一 种 通用 

的 实现 ， 以 保证 操作 效率 。JavaScript 的 对 象 是 属性 名 以 及 与 之 对 应 的 

值 的 基本 集合 。 因 此 将 对 象 只 用 做 字符 串 的 集合 是 大 材 小 用 。 例 子 9-6 
用 JavaScript 实 现 了 一 个 更 加 通用 的 Set 类 ， 它 实现 了 从 JavaScript 值 到 唯 
一 字符 串 的 映射 ， 然 后 将 字符 串 用 做 属性 名 。 对 象 和 函数 都 不 具备 如 

此 人 简明 可 靠 的 唯一 字符 串 表 示 。 因 此 集合 类 必须 给 集合 中 的 每 一 个 对 

象 或 函数 定义 一 个 唯一 的 属性 标识 。 


例 9-6: Set.js: 值 的 任意 集合 


function Set(){// 这 是 一 个 构造 函数 


| 


this,values={];// 集 合 数据 保存 在 对 象 的 属性 里 


this .n=9;// 集 合 中 值 的 个 数 


this.add.apply(this,arguments);// 把 所 有 参数 都 添加 进 这 个 集 


n> 


// 将 每 个 参数 都 添加 至 集合 中 


Set.prototype.add=function(){ 


for(var i=0;i<arguments.length;i++){// 遍 历 每 个 


中 


var val=arguments[i];// 待 添加 到 集合 中 的 值 


Ud 


var str=Set.,_v2s(val);// 把 它 转换 为 字符 


if(1this.values.hasOwnProperty(str)){// 如 果 不 帮 


this.values[str]=val;// 将 字符 串 和 值 对 应 起 


7R 


this.n++;// 集 合 中 值 的 计数 加 一 


| 


return this;// 支 持 链 式 方法 i 


};// 从 集合 删除 元 素 ， 这 些 元 素 由 参数 指定 


Set.prototype.remove=function(){ 


for(var i=0;i<arguments.length;i++){// 浪 历 每 个 


参数 


var str=Set._v2s(arguments[i]);// 将 字符 串 和 值 对 应 起 来 


if(this.values.hasOwnProperty(str)){// 如 果 它 在 


delete this.values[str];// 删 除 它 


this.n--;// 集 合 中 值 的 计数 减 一 


浪 


全 
全 中 


return this;// 支 持 链 式 方法 i 


};// 如 果 集 合 包含 这 个 值 ， 则 返 


可 true; 否则 ， 返 回 fals 


Set.prototype.contains=function(value){ 


e 


return this.values.hasOwnProperty(Set._v2s(value)); 


和 


};// 返 回 集合 的 大 小 


Set.prototype.size=function(){ 


return this.n; 


合 中 的 所 有 元 素 


流 


};// 遍 历 


， 在 指定 的 上 下 文中 调用 f 


Set.prototype.foreach=function(f,context){ 


for(var s in this,values)// 遍 历 集 合 中 的 所 有 字符 


if(this.values.hasOwnProperty(s))// 忽 略 继承 的 忆 


f.call(context, this.values[s]);// 调 


Tn 
ey 


f， 传 入 value 


】};// 这 是 一 个 内 部 画 数 ， 


以 将 人 


Set._v2s=function(val)t{ 


switch(val)t{ 


E 意 JavaScript 值 和 唯 


case undefined:return'u';// 特 殊 的 原始 值 


case null:return'n';// 值 只 有 一 个 字母 


case true:return't';// 代 码 


Case false:return'f',; 


的 字符 


对 应 起 来 


default:switch(typeof val){ 


地 有 # 前 绥 


case'number' :return'#'+Val;/ /数字 都 


case'string' :return'"'+val;// 字 符 


都 带 有 "前 级 


default:return'@'+objectId(val);//0bjs and funcs get@ 


} 
} 
// 对 任意 对 象 来 说 ， 都 会 返回 一 个 字符 串 
// 针 对 不 同 的 对 象 ， 这 个 函数 会 返回 不 同 的 字符 串 
// 对 于 同一 个 对 象 的 多 次 调用 ， 总 是 返回 相同 的 字符 串 
// 为 了 做 到 这 一 点 ， 它 给 o 创 建 了 一 个 属性 ， 在 ES5 中 ， 这 个 属性 是 不 可 枚 举 且 是 只 读 也 
function objectId(o){ 
var prop="|**objectid**|";// 私 有 属性 ， 用 以 存放 id 


if(!0.hasownProperty(prop))// 如 果 对 象 没有 id 


o[prop]=Set._v2s.next++;// 将 下 一 个 值 赋 给 它 


return o[prop];// 返 


回 这 个 id 


}; 


Set._v2s.next=100;// 设 置 初始 id 的 值 


9.6.2 一 个 例子 : 枚 举 类 型 


枚 举 类 型 (enumerated type) 是 一 种 类 型 ， 它 是 值 的 有 限 集合 ， 如 果 值 
定义 为 这 个 类 型 则 该 值 是 可 列 出 (或 “可 枚 举 ”) 的 。 在 C 及 其 派生 语言 
中 ， 枚 举 类 型 是 通过 关键 字 enum 声 明 的 。Enum 是 ECMAScript 5 中 的 保 
留 字 (还 未 使 用 ) ， 很 有 可 能 在 将 来 JavaScript 就 会 内 置 文 持 枚 举 类 
型 。 到 那 时 ， 例 9-7 展 示 了 如 何在 JavaScript 中 定义 枚 举 类 型 的 数据 。 需 
要 注音 的 是 ， 这 里 用 到 了 例 6-1 中 的 inherit(0) 芳 数 。 


例 9-7 包 含 一 个 单独 函数 enumeration()。 Ee 1 数 ， 它 并 没有 
定义 一 个 名 叫 "enumeration" 的 类 。 相 反 ， 它 是 一 个 工厂 方法 ， 每 次 调用 
它 都 会 创建 并 返回 一 个 新 的 类 ， 比 如 : 


// 使 用 4 个 值 创 建新 的 Coin 类 : Coin,.Penny, Coin.Nickel1 等 


var Coin=enumeration({Penny:1,Nickel:5,Dime:10,Quarter:25}); 


var c=Coin.Dime;// 这 是 新 类 的 实例 


c instanceof Coin//=>true:instanceof 正 常 工作 


c.constructor==Coin//=>true :构造 函数 的 属性 正常 工作 


Coin.Quarter+3*Coin.Nickel//=>40: 将 值 转换 为 数字 


Coin.Dime==10//=>true: 更 多 转换 为 数字 的 例子 


Coin.Dime>Coin.Nickel//=> true: 关 系 运算 符 正 常 工作 


String(Coin.Dime)+":"+Coin.Dime//=> "Dime:10": 强 制 转换 为 字符 串 


个 例子 清楚 地 展示 了 JavaScript 类 的 灵活 性 ，JavaScript 的 类 要 比 
i 言 中 的 静态 类 要 更 加 灵活 。 


例 9-7: _ JavaScript 中 的 枚 举 类 型 


// 这 个 函数 创建 一 个 新 的 枚 举 类 型 ， 实 参 对 象 表示 类 的 每 个 实例 的 名 字 和 值 


| 


// 返 回 值 是 一 个 构造 画 数 ， 它 标识 这 个 新 类 


// 注 意 ， 这 个 构造 画 数 也 会 抛 出 异常 ， 不 能 使 用 它 来 创建 该 类 型 的 新 实例 


| 


// 返 回 的 构造 画 数 包含 名 / 值 对 的 映射 表 


// 包 括 由 值 组 成 的 数组 ， 以 及 一 个 foreach( ) 和 迭代 器 画 数 


| 


值 


function enumeration(namesToValues){// 这 个 虚拟 的 构造 函数 是 返 


var enumeration=function(){throw"Can't Instantiate Enumerations";};// 枚 举 值 继承 


Var proto=enumeration.prototype={ 


constructor:enumeration, // 标 识 类 型 


tostring:function()f{return this.name;},// 返 回 名 字 


valueof:function()f{return this.value;},// 返 回 值 


toJSON:function(){return this.name;}// 转 换 为 JSON 


}; 


enumeration.values=[];// 用 以 存放 枚 举 对 象 的 数组 


// 现 在 创建 新 类 型 的 实例 


for(name :in namesToValues){// 遍 历 每 个 值 


var e=inherit(proto);// 创 建 一 个 代表 它 的 对 象 


e.name=name;// 给 它 一 个 名 字 


e.value=namesToValues[name];// 给 它 一 个 值 


el 
王 


enumeration[name]=e;// 将 它 设 置 为 构造 函数 的 属性 


0 


enumeration.values .push(e);// 将 它 存储 到 值 数组 


这 个 对 象 


// 一 个 类 方法 ， 用 来 对 类 的 实例 进行 迭代 


enumeration.foreach=function(f,c){ 


for(var i=0;i<this.values.length;i++)f.call(c, this.values[i]); 


】}; 7// 返 回 标识 这 个 新 类 型 的 构造 画 数 


return enumeration; 


如 果 用 这 个 枚 举 类 型 来 实现 一 个 "hello world" 小 程序 的 话 ， 就 可 以 使 用 
枚 举 类 型 来 表示 一 副 扑 克 牌 。 例 9-8 中 使 用 enumeration(0) 函 数 实现 了 这 
个 表示 一 副 扑克 有 牌 的 类 [9-。 


例 9-8: 使 用 枚 举 类 型 来 表示 一 副 扑 殉 牌 


// 定 义 一 个 表示 " 玩 牌 "的 类 


function Card(suit,rank){ 


this.suit=suit;// 每 张 牌 都 有 花色 


this.rank=rank;// 以 及 点 数 


// 使 用 枚 举 类 型 定义 花色 和 点 数 


Card.Suit=enumeration({Clubs:1,Diamonds:2,Hearts:3,Spades:4}); 


Card.Rank=enumeration( {Two:2,Three:3,Four:4,Five:5,Six:6, 


Seven:7,Eight:8,Nine:9,Ten:10, 


Jack:11, Queen:12,King:13,Ace:14});// 定 义 用 以 描述 牌 面 的 文本 


Card.prototype.toSstring=function(){ 


return this.rank.toString()+"of"+this. suit.toString(); 


};// 比 较 扑 殉 牌 中 两 张 牌 的 大 小 


Card.prototype.compareTo=function(that){ 


if(this.rank<that.rank)return-1; 


if(this.rank>that.rank)return 1; 


return 0; 


}; 7/ 以 扑 殉 牌 的 玩法 规则 对 牌 进行 排序 的 函数 


Card.orderByRank=function(a,b){return a.compareTo(b);};// 以 桥牌 的 玩法 规则 对 扑 牌 进行 排序 的 函 
数 


Card.orderBySuit=function(a,b)t{ 


if(a.suit<b,.suit)return-1; 


if(a.suit>b.suit)return 1; 


if(a.rank<b.rank)return-1; 


if(a.rank>b.rank)return 1; 


return 0; 


};// 定 义 用 以 表示 一 副 标 准 扑克 牌 的 类 


function Deck(){ 


var cards=this.,cards=[];// 一 副 牌 就 是 由 牌 组 成 的 数组 


card.Suit.foreach(function(s){// 初 始 化 这 个 数组 


Card.Rank.foreach(function(r){ 


cards.push(new Card(s,r)); 


}); 


}); 


// 洗 牌 的 方法 : 


重新 涌 


E 牌 


反思 


先 好 的 牌 


Deck.prototype.shuffle=function(){// 遍 历数 组 中 的 每 个 元 素 ， 随 机 找 H 


遍历 的 元 素 ) 交换 


var deck=this.cards, Len=deck.length 


for(var i=len-1;i>0;i--){ 


var r=Math.floor(Math.random( )*(i+1)),temp;// 随 机 数 


temp=deck[i],deck[i]=deck[r],deck[r]=temp;// 交 换 


return this,; 


};// 发 牌 的 方法 : 返 


I 


牌 的 数组 


Deck.prototype.deal=function(n){ 


if(this.cards.length<n)throw"Out of cards",; 


return this,.cards.splice(this.cards.1length-n,n); 


HI 
a 


};// 创 建 


新 扑克 牌 ， 洗 牌 


六 


发 牌 


var deck=(new Deck()).shuffle(); 


var hand=deck.deal(13).sort(Card.orderBySuit); 


tH 牌 


最 小 的 元 素 ， 


9.6.3 ”标准 转换 方法 


3.8.3 ”和 6.10 节 讨论 了 对 象 类 型 转换 所 用 到 的 重要 方法 ， 有 一 些 方法 是 
在 需要 做 类 型 转换 时 由 JavaScript 解 释 器 目 动 调用 的 。 不 需要 为 定义 的 
每 个 类 都 实现 这 些 方法 ， 但 这 些 方法 的 确 非常 重要 ， 如 有 末 没 有 为 目 定 
也 应 当 是 有 意 为 之 ， 而 不 应 当 因为 瑰 忽而 漏 掉 
CE 


最 重要 的 方法 首 当 toString()。 这 个 方法 的 作用 是 返回 一 个 可 以 表示 这 
个 对 象 的 字符 串 。 在 希望 使 用 字符 串 的 地 方 用 到 对 象 的话 (比如 将 对 
象 用 做 属性 名 或 使 用 “+” 运 算 符 来 进行 字符 串 连 接 运 算 ) ，JavaScript 会 
目 动 调用 这 个 方法 。 如 果 没 有 实现 这 个 方法 ， 类 会 默认 从 
Object.prototype 中 继承 toString() 方 法 ， 这 个 方法 的 运算 结果 是 "[object 
ObjectJ"， 这 个 字符 串 用 处 不 大 。toString0 方 法 应 当 返 回 一 个 可 读 的 字 
符 串 ， 这 样 最 终 用 户 才 能 将 这 个 输出 值 利用 起 来 ， 然 而 有 时 候 并 不 一 
定 非 要 如 此 ， 不 管 怎 样 ， 可 以 返回 可 读 字 符 串 的 toString(0) 方 法 也 会 让 
程序 调试 变 得 更 加 轻松 。 例 9-2 和 例 9-3 中 的 Range 类 和 Complex 类 都 定 
义 了 toString0 方 法 ， 例 9-7 中 的 枚 举 类 型 也 定义 了 toString()。 下 面 我 们 
会 给 例 9-6 中 的 Set 类 也 定义 toString0 方 法 。 


toLocaleString() 和 和 toString0) 极 为 类 似 ，toLocaleStri ng0 是 以 本 地 敏感 性 
(locale-sensitive) 的 方式 来 将 对 象 转换 为 字符 串 。 默 认 情 况 下 ， 对 象 
所 继承 的 toLocaleString(0 方 法 只 是 简单 地 调用 toString0) 方 法 。 有 一 些 内 
置 类 型 包含 有 用 的 toLocaleString0 方 法 用 以 实际 上 返回 本 地 化 相关 的 字 
从 串 。 如 有 果 需 要 为 对 象 到 字符 串 的 转换 定义 toString0 方 法 ， 那 么 同样 
需要 定义 toLocaleString() 方 法 用 以 处 理 本 地 化 的 对 象 到 字符 串 的 转换 。 

下 面 的 Set 类 的 定义 中 会 有 相关 代码 。 


第 三 个 方法 是 valueOf()， 它 用 来 将 对 象 转换 为 原始 值 。 比 如 ， 当 数学 
运算 符 (除了 “1” 运算 符 ) 和 关系 运算 符 作 用 于 数字 文本 表示 的 对 象 
时 ， 会 自动 调用 valueOf0 方 法 。 大 多 数 对 象 都 没有 合适 的 原始 值 来 表 
示 它 们 ， 也 没有 定义 这 个 方法 。 但 在 例 9-7 中 的 枚 举 类 型 的 实现 则 说 明 
valueOf() 方 法 是 非常 重要 的。 


第 四 个 方法 是 toJSONO， 这 个 方法 是 由 JSON.stringifyO 目 动 调用 的 。 
JSON 格 式 用 于 序列 化 良好 的 数据 结构 ， 而 且 可 以 处 理 JavaScript 原 始 
值 、 数 组 和 纯 对 象 。 它 和 类 无 关 ， 当 对 一 个 对 象 执行 序列 化 操作 时 ， 


它 会 忽略 对 象 的 原型 和 构造 画 数 。 比 如 将 Range 对 象 或 Complex 对 象 作 
为 参数 传 入 JSON.stringify()， 将 会 返回 诸如 {"form":1,"to":3} 或 
fi:-1} 这 种 字符 串 。 如 果 将 这 些 字符 串 传 入 JSON.parse0， 则 会 得 
到 一 个 和 Range 对 象 和 Complex 对 象 具有 相同 属性 的 纯 对 象 ， 但 这 个 对 
象 不 会 包含 从 Range 和 Complex 继 承 来 的 方法 。 


这 种 序列 化 操作 非常 适用 于 诸如 Range 和 Complex 这 种 类 ， 但 对 于 其 他 
一 些 类 则 必须 自 定义 toJSON0O 方 法 来 定制 个 性 化 的 序列 化 格式 。 如 果 一 
个 对 象 有 toJSON0) 方 法 ，JSON.stringify0 并 不 会 对 传 入 的 对 象 做 序列 化 
操作 ， 而 会 调用 toJSONO 来 执行 序列 化 操作 (序列 化 的 值 可 能 是 原始 值 
也 可 能 是 对 象 ;。 比 如 ，Date 对 象 的 toJSON0O 方 法 可 以 返回 一 个 表示 日 
期 的 字符 串 。 例 9-7 中 的 枚 举 类 型 也 是 如 此 : 它们 的 toJSON0O 方 法 和 
toString() 方 法 完全 一 样 。 如 果 要 模拟 一 个 集合 ， 最 接近 JSON 的 表示 方 
法 就 是 数组 ， 因 此 在 下 面 的 例子 中 将 定义 toJSON0O 方 法 用 以 将 集合 对 象 
转换 为 值 数 组 。 


例 9-6 中 的 Set 类 并 没有 定义 上 壕 方法 中 的 任何 一 个 。JavaScript 中 没有 哪 
个 原始 值 可 以 表示 和 集合， 因此 也 没 必要 定义 valueOf() 方 法 ， 但 该 类 应 
当 包 售 toString()、toLocaleString() 和 toJSON0O 方 法 。 可 以 用 如 下 代码 来 
实现 。 注 意 extend0 函 数 ( 例 6-2) 的 用 法 ， 这 里 使 用 extend0) 来 向 
Set.prototype 来 添加 方法 : 


// 将 这 些 方 法 添加 至 Set 类 的 原型 对 象 中 


extend(Set .prototype, {// 将 集合 转换 为 字符 上 串 


tostring:function(){ 


var s="{", 
i=0; 
this.foreach(function(v){s+=((i++>0)?",":"")+v;}); 


return s+t+"}"; 


},// 类 似 tostring, 但 是 对 于 所 有 的 值 都 将 调用 toLocaleString() 


toLocaleString':function( ){ 


Var s="{",i=0; 


this.foreach(function(v)t 


if(i++>0)s+=","; 


if(v==null)s+=v;//null 和 undefined 


else s+=V.toLocaleString();// 其 他 情况 


}); 


return s+t+"}"; 


},// 将 集合 转换 为 值 数 组 


toArray:function(){ 


Var a=[]; 


this.foreach(function(v){a.push(v);}); 


return a; 


} 


});// 对 于 要 从 JSON 转 换 为 字符 串 的 集合 都 被 当做 数组 来 对 竺 


Set.prototype.toJSON=Set .prototype.toArray; 


9g8.4 比较 方法 


JavaScript 的 相等 运算 符 比 较 对 象 时 ， 比 较 的 是 引用 而 不 是 值 。 也 就 是 
说 ， 给 定 两 个 对 象 引 用 ， 如 采 要 看 它们 是 否 指 同 同一 个 对 象 ， 不 是 检 
查 这 两 个 对 象 是 否 具 有 相同 的 属性 名 和 相同 的 属性 值 ， 而 是 直接 比较 
这 两 个 单独 的 对 象 是 否 相等 ， 或 者 比较 它们 的 顺序 〈 就 像 *<< ”和 “> ” 运 


算 符 进行 的 比较 一 样 ) 。 如 果 定 义 一 个 类 ， 并 且 硕 望 比 较 类 的 实例 ， 
应 该 定义 合适 的 方法 来 执行 比较 操作 。 


Java 编 程 语言 有 很 多 用 于 对 象 比较 的 方法 ， 将 Java 中 的 这 些 方法 借用 到 
JavaScript 中 是 一 个 不 错 的 主意 。 为 了 能 让 自 定义 类 的 实例 具备 比较 的 
功能 ， 定 义 一 个 名 叫 equals0 实 例 方 法 。 这 个 方法 只 能 接收 一 个 实 参 ， 
如 果 这 个 实 参 和 调用 此 方法 的 对 象 相等 的 话 则 返回 true。 当 然 ， 这 里 所 
说 的 “相等 ”的 合 义 是 根据 类 的 上 下 文 来 决定 的 。 对 于 人 简单 的 类 ， 可 以 
通过 人 简单 地 比较 它们 的 constructor 属 性 来 确保 两 个 对 象 是 相同 类 型 ， 然 
后 比较 两 个 对 象 的 实例 属性 以 保证 它们 的 值 相等 。 例 9-3 中 的 Complex 
我 们 可 以 轻易 地 为 Range 类 也 实现 类 似 
凌 : 


和 E 写 它 的 constructor 属 性 ， 


现在 将 它 添加 进去 


SE 


//Range 类 


Range .prototype.constructor=Range;// 一 个 Range 对 象 和 其 他 不 是 Range 的 对 象 均 不 相等 


// 当 且 仅 当 两 个 范围 的 端点 相等 ， 它 们 才 相 等 


Range.prototype.equals=function(that)t 


if(that==null)return false;// 处 理 null 和 undefined 


if(that.constructor!==Range)return false;// 处 理 非 Range 对 象 


// 当 且 仅 当 两 个 端点 相等 ， 才 返回 true 


return this.from==that.from&&this.to==that.to; 


} 


给 Set 类 赴 义 equals() 方 法 和 微 有 些 复 杂 。 不 能 面 单 地 比较 两 个 集合 的 
values 属 性 ， 还 要 进行 更 深层 次 的 比较 : 


Set .prototype.equals=function(that){// 一 些 次 要 情况 的 快捷 处 理 


if(this===that)return true;// 如 果 that 对 象 不 是 一 个 集合 ， 它 和 this 不 相等 


可 
| 
Vy 
1 人 


// 我 们 用 到 了 :instanceof， 使 得 这 个 方法 可 以 用 于 Set 的 任 


// 如 果 希 望 采 用 鸭 式 辩 型 的 方法 ， 可 以 降低 检查 的 严格 程度 


强 检查 的 严格 程度 


Es 


// 或 者 可 以 通过 this .constructor==that.constructor 来 旋 


// 注 意 ，null 和 undefined 两 个 值 是 无 法 用 于 ijnstanceof 运 算 的 


if(!(that instanceof Set))return false;// 如 果 两 个 集合 的 大 小 不 一 样 ， 则 它们 不 相等 


if(this.size()!=that.size())return false;// 现 在 检查 两 个 集合 中 的 元 素 是 否 完全 一 样 


// 如 果 两 个 集合 不 相等 ， 则 通过 抛 出 异常 来 终止 foreach 循 环 


try{ 


this.foreach(function(v){if(!'that.contains(v))throw false,;}); 


return true;// 所 有 的 元 素 都 匹配 :两 个 集合 相等 


}catch(x)t{ 


if(x===false)return false;// 如 果 集 合 中 有 元 素 在 男 外 一 个 集合 中 不 存在 
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throw X;// 村 


}; 


按照 我 们 需要 的 方式 比较 对 象 是 否 相 等 淀 常 是 很 有 用 的 。 对 于 菏 些 类 

来 说 ， 往 往 需 要 比较 一 个 实例 “大 于 ”或 者 “小 于 ” 男 外 一 个 示例 。 比 如 ， 

你 可 能 会 基于 Range 对 象 的 下 边界 来 定义 实例 的 大 小 关系 。 枚 举 类 型 可 
以 根据 名 字 的 字母 表 顺 序 来 定义 实例 的 大 小 ， 也 可 以 根据 它 包 含 的 数 

值 假设 它 包含 的 都 是 数字 ) 来 定义 大 小 。 另 一 方面 ，Set 对 象 其 实 是 
无 法 排序 的 。 


如 果 将 对 象 用 于 JavaScript 的 关系 比较 运算 符 ， 比 如 “< ”和 “<=”， 
JavaScript 会 首先 调用 对 和 象 的 valueOf() 方 法 ， 如 果 这 个 方法 返回 一 个 原 
台 值 ， 则 直接 比较 原始 值 。 例 9-7 中 由 enumeration() 方 法 所 返回 的 枚 举 
类 型 包含 valueOf0 方 法 ， 因 此 可 以 使 用 关系 运算 符 对 它们 做 有 意义 的 
比较 。 但 大 多 数 类 并 没有 valueOfO 方 法 ， 为 了 按照 显 式 定义 的 规则 来 
比较 这 些 类 型 的 对 象 ， 可 以 定义 一 个 名 叫 compareTo0 的 方法 (同样 ， 
这 里 遵照 Java 中 的 命名 约定 ) 。 


compareTo() 方 法 应 当 只 能 接收 一 个 参数 ， 这 个 方法 将 这 个 参数 和 调用 
它 的 对 象 进行 比较 。 如 采 this 对 象 小 于 参数 对 象 ，compareTo() 应 当 返 回 
比 0 小 的 值 。 如 果 this 对 象 大 于 参数 对 象 ， 应 当 返 回 比 0 大 的 值 。 如 果 两 
个 对 象 相 等 ， 应 当 返 回 0。 这 些 关 于 返回 值 的 约定 非常 重要 ， 这 样 我 们 
可 以 用 下 面 的 表达 式 蔡 换 掉 关系 比较 和 相等 性 运算 符 : 


待 蔡 换 蔡 换 为 

ab a.CompareTo(b)“<0 

a<=b a.compareTo(b)<=0 
a>b a.compareTo(b)>0 

a>=b a.compareTo(b)>=0 
a==b a.compareTo(b)==0 
al=b a.compareTo(b)!=0 


例 9-8 中 的 Card 类 定义 了 该 类 的 compareTo() 方 法 ， 可 以 给 Range 类 添加 
一 个 类 似 的 方法 ， 用 以 比较 它们 的 下 边界 : 
Range.prototype.compareTo=function(that){ 

return this.from-that.from; 


}; 


需要 注意 的 是 ， 这 个 方法 中 的 减法 操作 根据 两 个 Range 对 象 的 关系 正确 
地 返回 了 小 于 0、 等 于 0 和 大 于 0 的 值 。 例 9-8 中 的 Card.Rank 枚 举 值 包含 
valueOf() 方 法 ， 其 实 也 可 以 给 Card 类 实现 类 似 的 compareTo0 方 法 。 


上 文 所 提 到 的 equals0) 方 法 对 其 参数 执行 了 类 型 检查 ， 如 果 参 数 类 型 不 
合法 则 返回 false。compareTo() 方 法 并 没有 返回 一 个 表示 “这 两 个 值 不 能 
比较 ”的 值 ， 由 于 compareTo() 没 有 对 参数 做 任何 类 型 检查 ， 因 此 如 果 给 
compareTo() 方 法 传 入 错误 类 型 的 参数 ， 人 往往 会 抛 出 异 名 。 


注意 ， 如 果 两 个 范围 对 象 的 下 边界 相等 ， 为 Range 类 定义 的 compareTo() 
方法 会 返回 0。 这 意味 着 就 compareTo0 而 言 ， 任 何 两 个 起 始点 相同 呈 
的 Range 对 象 都 相等 。 这 个 相等 概念 的 定义 和 equals0) 方 法 定义 的 相等 概 
念 是 相 背 的 ，equals0 要 求 两 个 端点 均 相 等 才 算 相等 。 这 种 相等 概念 上 
的 甜 异 性 会 造成 很 多 bug， 最 好 将 Range 类 的 equals0 和 compareTo0) 方 法 
中 人 处理 相等 的 逻辑 保持 一 八 。 这 里 是 Range 类 修正 后 的 compareTo0) 方 
法 ， 它 的 比较 逻辑 和 equals0) 保 持 一 怪 ， 但 当 传 入 不 可 比较 的 值 时 仍然 
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// 根 据 下 边界 来 对 Range 对 象 排 序 ， 如 果 下 边界 相等 则 比较 上 边界 


// 如 果 传 入 非 Range 值 ， 则 抛 出 异常 


// 当 且 仅 当 this.equals(that) 时 ， 才 返回 0 


Range.prototype.compareTo=function(that)t{ 


if(!(that instanceof Range)) 


throw new Error("Can't compare a Range with"+that); 


var diff=this,.from-that.from;// 比 较 下 边界 


if(diff==0)diff=this.to-that.to;// 如 果 相 等 ， 比 较 上 边界 


return diff， 


}; 


给 类 定义 了 compareTo() 方 法 ， 这 样 就 可 以 对 类 的 实例 组 成 的 数组 进行 
排序 了 。Array.sort(0 方 法 可 以 接收 一 个 可 选 的 参数 ， 这 个 参数 是 一 个 
函数 ， 用 来 比较 两 个 值 的 大 小 ， 这 个 函数 返回 值 的 约定 和 compareTo() 
方法 保持 一 致 。 假 定 有 了 上 文 提 到 的 compareTo0) 方 法 ， 束 可 以 很 方便 
地 对 Range 对 象 组 成 的 数组 进行 排序 了 : 


ranges.sort(function(a,b){return a.compareTo(b);}); 


排序 运算 非常 重要 ， 如 果 已 经 为 类 定义 了 实例 方法 compareTo()， 还 应 
当 参 照 这 个 方法 定义 一 个 可 传 入 两 个 参数 的 比较 函数 。 使 用 
compareTo() 方 法 可 以 非常 轻松 地 定义 这 个 函数 ， 比 如 : 


Range.byLowerBound=function(a,b){return a.compareTo(b);}; 

使 用 这 个 方法 可 以 让 数组 排序 的 操作 变 得 非常 简单 : 
ranges.sort(Range.byLowerBound); 

有 些 类 可 以 有 很 多 方法 进行 排序 。 比 如 Card 类 ， 可 以 定义 两 个 方法 分 
别 按照 花色 排序 和 按照 点 数 排序 。 

985 方 佬 信用 

JavaScript 中 的 方法 没有 什么 特别 : 无 非 是 一 些 简单 的 函数 ， 赋 值 给 了 
对 象 的 属性 ， 可 以 通过 对 象 来 调用 它 。 一 个 函数 可 以 赋值 给 两 个 属 
性 ， 然 后 作为 两 个 方法 来 调用 它 。 比 如 ， 我 们 在 Set 类 中 就 这 样 做 了 ， 
将 toArray() 方 法 创建 了 一 个 副本 ， 并 让 它 可 以 和 toJSON() 方 法 一 样 完成 
同样 的 功能 。 

多 个 类 中 的 方法 可 以 共用 一 个 蛙 独 的 范 数 。 比 如 ，Array 类 通 稼 定义 了 


一 些 内 置 方法 ， 如 果 定 义 了 一 个 类 ， 它 的 实例 是 类 数组 的 对 和 象 ， 则 可 
以 从 Array.prototype 中 将 函数 复制 至 所 定义 的 类 的 原型 对 象 中 。 如 采 以 


经 典 的 面向 对 象 语言 的 视角 来 看 JavaScript 的 话 ， 把 一 个 类 的 方法 用 到 
其 他 的 类 中 的 做 法 也 称 做 “多 重 继承 ” (multiple inheritance) 。 然 而 ， 
JavaScript 并 不 是 经 典 的 面向 对 象 语 言 ， 我 更 倾向 于 将 这 种 方法 重用 更 
正式 地 称 为 “方法 借用 ” (borrowing) 。 


不 仅 Array 的 方法 可 以 借用 ， 还 可 以 自 定义 泛 型 方法 (generic 
method) 。 例 9-9 定 义 了 沁 型 方法 toString() 和 equals()， 可 以 被 Range 、 
Complexz 和 Card 这 些 简 单 的 类 使 用 。 如 果 Range 类 没有 定义 equals() 方 
法 ， 可 以 这 样 借用 泛 型 方法 equals(0): 


Range.prototype.equals=generic,.equals,; 


注意 ，generic.equals() 只 会 执行 浅 比较 ， 因 此 这 个 方法 并 不 适用 于 其 实 
例 太 复杂 的 类 ， 它 们 的 实例 属性 通过 其 equals0 方 法 指 代 对 象 。 同 样 需 
要 注意 ， 这 个 方法 包含 一 些 特殊 情况 的 程序 逻辑 ， 以 处 理 新 增 至 Set 对 
象 中 的 属性 ( 见 例 9-6) 。 


例 9-9: 方法 借用 的 泛 型 实现 


证 


var generic={// 返 回 一 个 字符 串 ， 这 个 字符 囊 包含 构造 画 数 的 名 字 《如 果 构 造 函 数 包 含 名 字 ) 


// 以 及 所 有 非 继承 来 的 、 非 函数 属性 的 名 字 和 值 


toString:function(){ 


var s='[ ' ;// 如 果 这 个 对 象 包含 构造 画 数 ， 且 构造 酚 数 包含 名 字 


// 这 个 名 字 会 作为 返回 字符 串 的 一 部 分 


// 需 要 注意 的 是 ， 函 数 的 名 字 属 性 是 非 标 准 的 ， 并 不 是 在 所 有 的 环境 中 都 可 


if(this.constructor&&this.constructor.name) 


Se 


s+=this.constructor.name+":";// 枚 举 所 有 的 非 继 承 的 、 非 函数 属性 


var n=0; 


for(var name in this){ 


if(!this.hasownProperty(name))continue;// 跳 过 继承 来 的 


属性 
var value=this[name]; 
if(typeof value==="function")continue;// 跳 过 方法 
if(n++)s+=",",; 
s+=name+'='+value; 
} 
return s+']'; 
}, // 通 过 比较 this 和 that 的 构造 画 数 和 实例 属性 来 判断 它们 是 否 相等 
// 这 种 方法 只 适合 于 那些 实例 属性 是 原始 值 的 情况 ， 原 始 值 可 以 通过 "===" 来 比较 
// 这 里 还 处 理 一 种 特殊 情况 ， 就 是 忽略 由 Set 类 添加 的 特殊 属性 
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equals:function(that){ 
if(that==null)return false,; 


if(this.constructor!==that.constructor)return false,; 


for(var name in this)t{ 


if(name==="|**objectid**|")continue;// 跳 过 特殊 


属性 


a 


if(!this.hasOownpProperty(name))continue;// 跳 过 4 


涯 承 来 的 属性 
if(this[name]!==that[name])return false;// 比 较 是 否 相 等 


return true;// 如 果 所 有 属性 都 匹配 ， 


个 对 象 相等 


9.6.6 ”私有 状态 


在 经 典 的 面向 对 象 编程 中 ， 经 党 需要 将 对 象 的 某 个 状态 封装 或 隐藏 在 
对 象 内 ， 只 有 通过 对 象 的 方法 才能 访问 这 些 状态 ， 对 外 只 暴露 一 些 重 
要 的 状态 变量 可 以 直接 读 写 。 为 了 实现 这 个 目的 ， 类 似 Java 的 编程 语言 
允许 声明 类 的 “私有 ?实例 字段 ， 这 些 私有 实例 字段 只 能 被 类 的 实例 方 
法 访问 ， 且 在 类 的 外 部 是 不 可 见 的 。 


我 们 可 以 通过 将 变量 (或 参数 ) 闭 包 在 一 个 构造 函数 内 来 模拟 实现 私 
有 实例 字段 ， 调 用 构造 函数 会 创建 一 个 实例 。 为 了 做 到 这 一 点 ， 需 要 
在 构造 范 数 内 部 定义 一 个 函数 〈 因 此 这 个 函数 可 以 访问 构造 函数 内 部 
的 参数 和 变量 ) ， 并 将 这 个 函数 赋值 给 新 创建 对 象 的 属性 。 例 9-10 展 示 
了 对 Range 类 的 另 一 种 封装 ， 新 版 的 类 的 实例 包含 from(0 和 to0) 方 法 用 以 
返回 范围 的 端点 ， 而 不 是 用 from 和 to 属性 来 获取 端点 。 这 里 的 from0 和 t 
0() 方 法 是 定义 在 每 个 Range 对 象 上 的 ， 而 不 是 从 原型 中 继承 来 的 。 其 他 
的 Range 方 法 还 是 和 之 前 一 样 定 义 在 原型 中 ， 但 获取 端点 的 方式 从 之 前 
直接 从 属性 读 取 变 成 了 通过 from() 和 to() 方 法 来 读 取 。 


例 9-10: 对 Range 类 的 读 取 端 点 方法 的 简单 封 婆 


[还 


function Range(from, to){// 不 要 将 端点 保存 为 对 象 的 属性 ， 相 反 


// 定 义 存 取 器 函数 来 返回 端点 的 值 


// 这 些 值 都 保存 在 闭 包 中 


this.from=function( ){return from;}; 


this.to=function(){return to;}; 


} 


// 原 型 上 的 方法 无 法 直接 操作 端点 


// 它 们 必须 调用 存 取 器 方法 


Range .prototype=f{ 

constructor:Range, 

includes:function(x){return this.from()<=x&&x<=this.to();}, 

foreach: function(f){ 

for(var x=Math.ceil(this.from()),max=this.to();x<=max;x++)f(x); 

}, 

tostring:function(){return"("+this.from()+"..."+this.to()+")";} 

}; 

这 个 新 的 Range 类 定义 了 用 以 读 取 范 围 端点 的 方法 ， 但 没有 定义 设置 端 
扩 的 方法 或 属性 。 这 让 类 的 实例 看 起 来 是 不 可 修改 的 ， 如 果 使 用 正确 
的 话 ， 一 旦 创建 Range 对 象 ， 端 点 数据 就 不 可 修改 了 。 除 非 使 用 


ECMAScript 5 (参照 9.3 节 ) 中 的 某 些 特性 ， 但 from 和 to 属性 依然 是 可 
写 的 ， 并 且 Range 对 象 实际 上 并 不 是 真正 不 可 修改 的 : 


var r=new Range(1,5);// 一 个 不 可 修改 的 范围 


r.from=function(){return 0;};// 通 过 方法 替换 来 修改 它 


但 需要 注意 的 是 ， 这 种 封装 技术 造成 了 更 多 系统 开销 。 使 用 财 包 来 雪 
装 类 的 状态 的 类 一 定 会 比 不 使 用 封装 的 状态 变量 的 等 价 类 运行 速度 更 
慢 ， 并 占用 更 多 内 存 。 


9.6.7 构造 函数 的 重 载 和 工厂 方法 


有 时 候 ， 我 们 希望 对 象 的 初始 化 有 多 种 方式 。 比 如 ， 我 们 想 通过 半径 
和 角度 〈 极 坐标 ) 来 初始 化 一 个 Complex 对 象 ， 而 不 是 通过 实 部 和 虚 部 


来 初始 化 ， 或 者 通过 元 素 组 成 的 数组 来 初始 化 一 个 Set 对 象 ， 而 不 是 通 
过 传 入 构造 画 数 的 参数 来 初始 化 它 。 


有 一 个 方法 可 以 实现 ， 通 过 重 载 (overload) 这 个 构造 函数 让 它 根据 传 


入 参数 的 不 同 来 执行 不 同 的 初始 化 方法 。 下 面 这 段 代 码 就 是 重 载 Set() 
构造 画 数 的 例子 : 


function Set(){ 


殖 
寺 
吝 
全 
洲 

n> 


this .values={};// 用 这 个 对 象 的 属性 来 保 丰 


this.n=0;// 集 合 中 值 的 个 数 


// 如 果 传 入 一 个 类 数组 的 对 象 ， 将 这 个 元 素 添加 至 集合 中 


// 否 则 ， 将 所 有 的 参数 都 添加 至 集合 中 


if(arguments.1length==1&&isArrayLike(arguments[0])) 


this.add.apply(this,arguments[0]); 


else if(arguments.length>0) 


this.add.apply(this,arguments); 


} 


这 段 代 码 所 定义 的 Set0 构 造 国 数 可 以 显 式 将 一 组 元 素 作为 参数 列表 传 

入 ， 也 可 以 传 入 元 和 聚 组 成 鸭 数组 。 但 是 这 个 构造 国 数 有 多 义 性 ， 如 果 

集合 的 某 个 成 员 是 一 个 数组 就 无 法 通过 这 个 构造 钞 数 来 创建 这 个 集合 

点 ， 需 要 首先 创建 一 个 空 集合 ， 然 后 显 式 调用 add0) 
站 /3 


在 使 用 极 侍 标 来 初始 化 复数 的 例子 中 ， 实 际 上 并 没有 看 到 有 函数 重 
载 。 代 表 复 数 两 个 维度 的 数字 都 古 浮 点 数 ， 除 非 给 构造 瑟 数 传 入 第 二 
个 参数 ， 人 否则 构造 画 数 无 法 识别 到 撒 传 入 的 是 极 坐 标 参数 还 是 直角 坐 
标 参数 。 相 反 ， 可 以 写 一 个 工 上 方法 一 一 一 个 类 的 方法 用 以 返回 类 的 


一 个 实例 。 下 面 的 例子 即 是 使 用 工矿 方法 来 返回 一 个 使 用 极 坐 标 初 始 
化 的 Complex 对 和 象 


Complex.polar=function(r, theta)t{ 
return new Complex(r*Math.cos(theta),r*Math.sin(theta)); 


}; 


下 面 这 个 工厂 方法 用 来 通过 数组 初始 化 Set 对 象 : 


Set .fromArray=function(a){ 


s=new Set();// 创 建 一 个 空 集合 


s.add.apply(s,a);// 将 数组 a 的 成 员 作 为 参数 传 入 add( ) 方 法 


return s;// 返 回 这 个 新 集合 


}; 


可 以 给 工厂 方法 定义 任意 的 名 字 ， 不 同名 字 的 工厂 方法 用 以 执行 不 同 
的 初始 化 。 但 由 于 构造 钞 数 是 类 的 公有 标识 ， 因 此 每 个 类 只 能 有 一 个 
构造 男 数 。 但 这 并 不 是 一 个 “必须 遵守 ?的 规则 。 在 JavaScript 中 是 可 以 
定义 多 个 构造 函数 继承 目 一 个 原型 对 象 的 ， 如 果 这 样 做 的 话 ， 由 这 些 
构造 函数 的 任意 一 个 所 创建 的 对 象 都 属于 同一 类 型 。 并 不 推荐 这 种 技 
人 


/VSet 类 的 一 个 辅助 构造 函数 


function SetFromArray(a){// 通 过 以 函数 的 形式 调用 Set( ) 来 初始 化 这 个 新 对 象 


// 将 a 的 元 素 作为 参数 传 入 [8 


Set.apply(this, a); 


} 


// 设 置 原型 ， 以 便 SetFromArray 能 创建 Set 的 实例 


SetFromArray.prototype=Set .prototype; 
Var s=new SetFromArray([1,2,3]); 


S instanceof Set//=>true 


97 于 类 


在 面向 对 象 编程 中 ， 类 B 可 以 继承 自 另 外 一 个 类 A。 我 们 将 A 称 为 父 类 
(superclass) ， 将 B 称 为 子 类 (subclass) 。B 的 实例 从 A 继承 了 所 有 的 
实例 方法 。 类 B 可 以 定义 自己 的 实例 方法 ， 有 些 方法 可 以 重 载 类 A 中 的 
同名 方法 ， 如 果 B 的 方法 重 载 了 A 中 的 方法 ，B 中 的 重 载 方法 可 能 会 调 
用 A 中 的 重 载 方法 ， 这 种 做 法 称 为 “方法 链 ” (method chaining) 。 同 
样 ， 子 类 的 构造 函数 BO 有 时 需要 调用 父 类 的 构造 范 数 AO， 这 种 做 法 称 
为 “构造 男 数 链 ” (constructor chaining) 。 子 类 还 可 以 有 子 类 ， 当 涉及 
类 的 层次 结构 时 ， 往 往 需 要 定义 抽象 类 (abstract class) 。 抽 象 类 中 定 
0 
更 的 。 


在 JavaScript 中 创建 子 类 的 关键 之 处 在 于 ， 采 用 合适 的 方法 对 原型 对 象 
进行 初始 化 。 如 果 类 B 继 承 目 类 A，B.prototype 必 须 是 A.prototype 的 后 
喘 。B 的 实例 继承 目 B.prototype， 后 者 同样 也 继承 上 自 A.prototype。 本 广 
将 会 对 刚才 提 到 的 子 类 相关 的 术语 做 一 一 讲解 ， 还 会 介绍 类 继承 的 替 


代 方 案 :“ 组 合 ” (composition) 。 


我 们 从 例 9-6 中 的 Set 类 开始 讲解 ， 本 市 将 会 讨论 如 何 定 义 了 于 类， 如 何 实 
现 构 造 画 数 链 并 重 载 方法 ， 如 何 使 用 组 合 来 代 礁 继承 ， 以 及 最 后 如 何 
通过 抽象 类 从 实现 中 提炼 出 接口 。 本 市 以 一 个 扩展 的 例子 结束 ， 这 个 
例子 定义 了 Set 类 的 层次 结构 。 注 意 ， 本 世 开 始 的 几 个 例子 着 重 讲述 了 
0 。 其 中 菏 些 搁 术 有 着 重要 的 缺陷 ， 后 续 儿 六 会 讲 
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971 是 义 于 类 


JavaScript 的 对 象 可 以 从 类 的 原型 对 象 中 继承 属性 (通常 继承 的 是 方 
法 ) 。 如 果 O 是 类 B 的 实例 ，B 是 A 的 子 类 ， 那 么 0 也 一 定 从 A 中 继承 了 
属性 。 为 此 ， 首 先 要 确保 B 的 原型 对 象 继承 自 A 的 原型 对 象 。 通 过 
inheritO) 函 数 ( 例 6-1) ， 可 以 这 样 来 实现 : 


B.prototype=inherit(A.prototype) ;// 子 类 派生 自 父 


js 


B.prototype.constructor=B;// 重 载 继 承 来 的 constructor 属 性 


[还 


这 两 行 代码 是 在 JavaScript 中 创建 子 类 的 关键 。 如 果 不 这 样 做 ， 原 型 对 
象 仅仅 是 一 个 普通 对 象 ， 它 只 继承 自 Object.prototype， 这 意味 着 你 的 类 
和 所 有 的 类 一 样 是 Object 的 子 类 。 如 有 果 将 这 两 行 代 码 添 加 至 
defineClass() 范 数 中 (参照 9.3 市 ) ， 可 以 将 它 变 成 例 9-11 中 的 
defineSubclass(O) 玉 数 和 Function.prototype.extend0 〇 方法: 


例 9-11: 定义 子 类 


// 用 一 个 人 


单 的 画 数 创建 简单 的 子 类 


或 


function defineSubclass(superclass,// 父 类 的 构造 丽 数 


constructor, // 新 的 子 类 的 构造 函数 


methods, // 实 例 方法 :复制 至 原型 中 


可 
人 


至 构造 画 数 中 


statics)// 类 属性 : 复 币 


{ 


// 建 立 子 类 的 原型 对 象 


constructor.prototype=inherit(superclass.prototype); 


constructor.prototype.constructor=constructor;// 像 对 常规 类 一 样 复制 方法 和 类 属性 


if(methods)extend(constructor.prototype,methods); 


if(statics)extend(constructor, statics);// 返 回 这 个 类 


return constructor; 


// 也 可 以 通过 父 类 构造 画 数 的 方法 来 做 到 这 


Function.prototype.extend=function(constructor,methods, statics){ 


return defineSubclass(this,constructor,methods, statics); 


}; 


例 9-12 展 示 了 不 使 用 defineSubclass0 函 数 如 何 “ 手 动 ” 实 现 子 类 。 这 里 定 
Ev 2 ° SingletonSet 征 一 个 符 殊 的 集合 合 它 是 内 


的 ， 而 且 含 有 单独 的 常量 成 员 。 
例 9-12: SingletonSet: 一 个 简单 的 子 类 


// 构 造 画 数 


function SingletonSset (member){ 


个 唯一 的 成 员 


人 


this ,member=member,;// 记 住 集合 中 


// 创 建 一 个 原型 对 象 ， 这 个 原型 对 象 继承 自 Set 的 原型 


乙 


SingletonSet.prototype=inherit(Set.prototype);// 给 原型 添加 


// 如 果 有 同名 的 属性 就 覆盖 Set .prototype 中 的 同名 属性 


od 


再 


extend(SingletonSet.prototype, {// 设 置 合 适 的 constructor 


二 


了 下 


constructor:SingletonSet,// 这 个 集合 是 只 读 的 : 调用 add( ) 和 remove( ) 都 会 报错 


add:function(){throw"read-only set";}, 


remove:function(){throw"read-only set";},//SingletonSet 的 实例 中 永远 只 有 一 个 元 素 


size:function(){freturn 1;},// 这 个 方法 只 调用 一 次 ， 传 入 这 个 集合 的 唯一 成 员 


foreach:function(f,context){f.call(context, this.member);},//contains( ) 方 法 非常 简单 :只 须 


检查 传 入 的 值 是 否 匹配 这 个 集合 唯一 的 成 员 即 可 


contains:function(x){return x===this.member,;} 


}); 


这 里 的 SingletonSet 类 是 一 个 比较 简单 的 实现 ， 它 包含 5 个 简单 的 方法 定 
义 。 它 实现 了 5 个 核心 的 Set 方 法 ,但 从 它 的 父 类 中 继承 了 toString()、 
toArray() 和 equals() 方 法 。 定 义 子 类 束 是 为 了 继承 这 些 方法 。 比 如 ，Set 
类 的 equals0 方 法 (在 9.4 节 中 定义 ) 用 来 对 Set 实 例 进行 比较 ， 只 要 Set 
的 实例 包含 size() 和 foreach() 方 法 ， 束 可 以 通过 equalsO0 比 较 。 因 为 
SingletonSet 是 Set 的 子 类 ， 所 以 它 目 动 继 承 了 equals() 的 实现 ， 不 用 再 实 
现 一 次 。 当 然 ， 如 果 想 要 最 简单 的 实现 方式 ， 那 么 给 SingletonSet 类 定 
义 它 自 己 的 equals0 版 本 会 更 高 效 一 些 : 


SingletonSet .prototype,eduals=function(that ){ 


return that instanceof Set&&that.size()==1i&&that.contains(this.member); 


}; 


需要 注意 的 是 ，SingletonSet 不 是 将 Set 中 的 方法 列表 静态 地 借用 过 来 ， 
而 是 动态 地 从 Set 类 继承 方法 。 如 果 给 Set.prototype 添 加 新 的 方法 ，Set 
和 SingletonSet 的 所 有 实例 就 会 立即 拥有 这 个 方法 (假定 SingletonSet 没 
有 定义 与 之 同名 的 方法 ) 。 


9.7.2 ”构造 画 数 和 方法 链 


最 后 一 信 的 SingletonSet 类 定义 了 全 新 的 集合 实现 ， 而 且 将 它 继承 目 其 
父 类 的 核心 方法 全 部 替换 。 然 而 定义 子 类 时 ， 我 们 往往 希望 对 父 类 的 
行为 进行 修改 或 扩充 ， 而 不 是 完全 车 换 挥 它们。 为 了 做 到 这 一 点 ， 构 
造 画 数 和 子 类 的 方法 需要 调用 或 链接 到 父 类 构造 画 数 和 父 类 方法 。 


例 9-13 对 此 做 了 展示 。 它 定义 了 Set 的 子 类 NonNullSet， 它 不 允许 null 和 
undefined 作 为 它 的 成 员 。 为 了 使 用 这 种 方式 对 成 员 做 限制 ，NonNullSet 
需要 在 其 add0) 方 法 中 对 nul 和 undefined 值 做 检测 。 但 它 需 要 完全 重新 实 
现 一 个 add0 方 法 ， 因 此 它 调用 了 父 类 中 的 这 个 方法 。 注 意 ， 
NonNullSet() 构 造 画 数 同 样 不 需要 重新 实现 ， 它 只 须 将 它 的 参数 传 入 父 
类 构造 函数 (作为 函数 来 调用 它 ， 而 不 是 通过 构造 函数 来 调用 ) ， 通 
过 父 类 的 构造 画 数 来 初始 化 新 创建 的 对 象 。 


例 9-13: 在 于 类 中 调用 父 类 的 构 千 函数 和 方法 
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*NonNullSet 是 Set 的 子 类 ， 它 的 成 员 不 能 是 nul1l 和 undefined 


*/ 


function NonNullSet(){// 仅 链接 到 父 类 


// 作 为 普通 画 数 调用 父 类 的 构造 画 数 来 初始 化 通过 该 构造 画 数 调用 创建 的 对 象 


Set.apply(this,arguments ) ， 


上 


// 将 NonNullSet 设 置 为 Set 的 子 类 


NonNullSet .prototype=inherit(Set.prototype); 


b= 


NonNullSset .prototype.constructor=NonNullSet;// 为 了 将 null 和 undefined 排 除 在 外 ， 只 多 
方法 


重 写 add( ) 


NonNullSset .prototype.add=function( ){// 检 查 参数 是 不 是 null 或 undefined 


for(var i=0;i<arguments.length;i++) 


if(arguments[i]==null) 


throw new Error("Can't add null or undefined to a NonNullSet");// 调 用 父 类 的 add( ) 方 法 以 执 
行 实际 插入 操作 


return Set.prototype.add.apply(this,arguments); 


}; 


让 我 们 将 这 个 非 null 集 合 的 概念 推 而 广 之 ， 称 为 “过 滤 后 的 集合 ?， 这 个 
集合 中 的 成 员 必须 首先 传 入 一 个 过 滤 函 数 再 执行 添加 操作 。 为 此 ， 定 
义 一 个 类 工厂 函数 〈 类 似 例 9-7 中 的 enumeration0) 函 数 ) ， 传 入 一 个 过 
滤 函 数 ， 返 回 一 个 新 的 Set 子 类 。 实 际 上 ， 可 以 对 此 做 进一步 的 通用 化 
的 处 理 ， 定 义 一 个 可 以 接收 两 个 参数 的 类 工厂 : 子 类 和 用 于 add0) 方 法 
的 过 小 函数 。 这 个 工厂 方法 称 为 filteredsetSubclass()， 并 通过 这 样 的 代 
码 来 使 用 它 : 


// 定 义 一 个 只 能 保存 字符 串 的 "集合 "类 


集合 类 的 成 员 不 能 是 nuLl1、undefined 或 函数 


var MySet=filteredSetSubclass(NonNullSet,function(x){return typeof x!=="function";}); 


例 9-14 是 这 个 类 工厂 函数 的 实现 代码 。 注 意 ， 这 个 例子 中 的 方法 链 和 构 
造 函 数 链 和 NonNullset 中 的 实现 是 一 样 的 。 


例 9-14: 类 工厂 和 方法 链 


光头 


* 这 个 函数 返回 具体 Set 类 的 子 类 


bE 
册 
XN 


类 的 add( ) 方 法 用 以 对 添加 的 元 素 做 特殊 的 过 滤 
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function filteredSetSubclass(Superclass,filter){ 


var constructor=function(){// 子 类 构造 函数 


superclass.apply(this,arguments ) ;// 调 用 父 类 构造 函数 


}; 


Var proto=constructor.prototype=inherit(superclass.prototype); 


proto.constructor=constructor; 


proto.add=function( ){// 在 添加 任何 成 员 之 前 首先 使 用 过 滤器 将 所 有 参数 进行 过 滤 


for(var i=0;i<arguments.length;i++){ 


var v=arguments[i]; 


if(!filter(v))throw("value"+v+"rejected by filter"); 


// 调 用 父 类 的 add( ) 方 法 


superclass.prototype.add.apply(this,arguments ) ， 


}; 


return constructor; 


例 9-14 中 一 个 比较 有 趣 的 事情 是 ， 用 一 个 函数 将 创建 子 类 的 代码 包装 起 
来 ， 这 样 就 可 以 在 构造 函数 和 方法 链 中 使 用 父 类 的 参数 ， 而 不 是 通过 
写 死 茶 个 父 类 的 名 字 来 使 用 它 的 参数 。 也 了 吏 是 说 如 采 想 修改 父 类 ， 只 


须 修 改 一 处 代码 即 可 ， 而 不 必 对 每 个 用 到 父 类 类 名 的 地 方 都 做 修改 。 
已 经 有 充足 的 理由 证 明 这 种 技术 的 可 行 性 ， 即 使 在 不 是 定义 类 工厂 的 
场景 中 ， 这 种 拉 术 也 是 值得 提倡 使 用 的 。 比 如 ， 可 以 这 样 使 用 包装 函 
数 和 例 9-11 的 Function.prototype.extend() 方 法 来 重 写 NonNullSet: 


var NonNullSet=(function(){// 定 义 并 立即 调用 这 个 函数 


var superclass=Set;// 仅 指定 父 类 


return superclass.extend( 


function(){superclass.apply(this,arguments);},// 构 造 画 数 


{// 方 法 


add:function( ){// 检 查 参 数 是 否 是 nu11 或 undefined 


for(var i=0;i<arguments.length;i++) 


if(arguments[i]==null) 


throw new Error("can't add null or undefined");// 调 用 父 类 的 add( ) 方 法 以 执行 实际 插入 操作 


return superclass.prototype.add.apply(this,arguments); 

} 

}); 

}()); 

最 后 ， 值 得 强调 的 是 ， 类 似 这 种 创建 类 工厂 的 能 力 是 JavaScript 语 言 动 
态 特 性 的 一 个 体现 ， 类 工厂 是 一 种 非常 强大 和 有 用 的 特性 ， 这 在 Java 和 
C++ 等 语言 中 是 没有 的 。 


和 73 组 章 由 于 类 


在 前 一 了 中， 定义 的 集合 可 以 根据 特定 的 标准 对 集合 成 员 做 限制 ， 而 
且 使 用 了 子 类 的 技术 来 实现 这 种 功能 ， 所 创建 的 目 定义 子 类 使 用 了 特 
定 的 过 滤 函 数 来 对 集合 中 的 成 员 做 限制 。 父 类 和 过 滤 钞 数 的 每 个 组 合 


都 需要 创建 一 个 


新 的 类 。 


然而 还 有 为 一 种 更 好 的 方法 来 完成 这 种 需求 ， 即 面向 对 象 编程 中 一 条 
广为人知 的 设计 原则 : “组 合 优 于 继承 > 中。 这 样 ， 可 以 利用 组 合 的 原 
集合 实现 ， 它 “ 包 狼 ”了 为 外 一 个 集合 对 象 ， 在 将 受 限 
制 的 成 员 过 滤 挥 之 后 会 用 到 这 个 (包装 的 ) 集合 对 象 。 例 9-15 展 示 了 其 


理 定 义 一 个 新 的 
工作 原理 : 


例 9-15: 使 用 组 合 代 奉 继承 的 集合 的 实现 
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* 实 现 一 个 FilteredSet ， 


它 包 装 某 个 指定 的 "集合 "对 象 ， 


* 并 对 传 入 add( ) 方 法 的 值 


应 用 了 某 种 指 


定 的 过 滤器 


*" 范 围 " 类 中 其 他 所 有 的 核心 方法 延续 到 


*/ 


Var FilteredSet=Set.extend ( 


包装 后 的 实例 中 


function FilteredSet(set,filter){// 构 造 丽 数 


this.set=set,; 


this.filter=filter,; 


}, 


{// 实 例 方法 


add:function( ){// 如 


if(this.filter){ 


已 有 过 滤器 ， 


直接 使 用 它 


for(var i=0;i<arguments.length;i++){ 


var v=arguments[i]; 


if(!this.filter(v)) 


throw new Error("FilteredSet:value"+v+"rejected by filter"); 


// 调 用 set 中 的 add( ) 方 法 


this.set.add.apply(this.set,arguments); 


return this,; 


},// 璋 下 的 方法 都 保持 不 变 

remove:function( ){ 
this.set.remove.apply(this.set,arguments); 

return this,; 

}, 

contains:function(v){return this.set.contains(v);}, 
size:function(){return this.set.size();}, 
foreach:function(f,c){this,set.foreach(f,c);} 


}); 


在 这 个 例子 中 使 用 组 合 的 一 个 好 处 是 ， 只 须 创建 一 个 单独 的 FilteredSet 
子 类 有 即 可 。 可 以 利用 这 个 类 的 实例 来 训 建 任意 带 有 成 员 限 制 的 集合 实 
例 。 比 如 ， 不 用 上 文中 定义 的 NonNullSet 类 ， 可 以 这 样 做 : 


Var S=new FilteredSet(new Set(),function(x){treturn x!==null;}); 


甚至 还 可 以 对 已 经 过 滤 后 的 集合 进行 过 渡 : 


Var t=new Filteredset(s, {function(x){return!(x instanceof Set);}}; 


9.7.4 ”类 的 层次 结构 和 抽象 类 


在 上 一 世 中 给 出 了 “组 合 优 于 继承 ”的 原则 ， 但 为 了 将 这 条 原则 阐述 清 
楚 ， 创 建 了 Set 的 子 类 。 这 样 做 的 原因 是 最 终 得 到 的 类 是 Set 的 实例 也 | 

， 它 会 从 Set 继 承 有 用 的 辅助 方法 ， 比 如 toString() 和 equals()。 尺 管 这 是 
一 个 很 实际 的 原因 ， 但 不 用 创建 类 似 Set 类 这 种 具体 类 的 子 类 也 可 以 很 
好 的 用 组 合 来 实现 “范围 >。 例 9-12 中 的 SingletonSet 类 可 以 有 另外 一 种 类 
似 的 实现 ， 这 个 类 还 是 继承 目 Set， 因 此 它 可 以 继承 很 多 辅助 方法 ， 但 
它 的 实现 和 其 父 类 的 实现 完全 不 一 样 。SingletonSet 并 不 是 Set 类 的 专用 
版 本 ， 而 是 完全 不 同 的 另 一 种 Set。 在 类 层次 结构 中 SingletonSet 和 SetJ 
当 是 兄弟 的 天 系 ， 而 非 父子 天 系 。 


不 管 是 在 经 典 的 面向 对 象 编程 语言 中 还 是 在 JavaScript 中 ， 通 行 的 解决 
办 法 是 出 “从 实现 中 抽 离 出 接口 *。 假 定 定 义 了 一 个 AbstractSet 类 ， 其 
中 定义 了 一 些 辅 助 方法 比如 toString()， 但 并 没有 实现 诸如 foreach0 的 核 
心 方法 。 这 样 ， 实 现 的 Set、SingletonSet 和 FilteredSet 都 是 这 个 抽象 类 的 
子 类 ，FilteredSet 和 SingletonSet 都 不 必 再 实现 为 某 个 不 相关 的 类 的 子 类 
让 


例 9-16 在 这 个 思路 上 更 进一步 ， 定 义 了 一 个 层次 结构 的 抽象 的 集合 3 
AbstractSet 只 定义 了 一 个 抽象 方法 : contains0。 任 何 类 只 要 “声称 ”上 自己 
是 一 个 表示 范围 的 类 ， 束 必须 至 少 定义 这 个 contains() 方 法 。 然 后 ， 害 
义 AbstractSet 的 子 类 AbstractEnumerableSet。 这 个 类 增加 了 抽象 的 size0) 
和 foreach() 方 法 ， 而 且 定 义 了 一 些 有 用 的 非 抽 和 象 方法 (toString()、 
toArray()、 equals( 〇 等) ，AbstractEnumerableSet 并 没有 定义 add0 和 
remove() 方 法 ， 它 只 代表 只 读 集 合 。SingletonSet 可 以 实现 为 非 抽 象 子 
类 。 最 后 ， 定 义 了 AbstractEnumerableSet 的 于 类 AbstractWritableSet。 这 
个 final 抽 象 集合 定义 了 抽象 方法 add0 和 remove0， 并 实现 了 诸如 union0) 


和 intersection() 等 非 具 体 方法 ， 这 两 个 方法 调用 了 addO 和 remove()。 
AbstractWritableSet 是 Set 和 FilteredSet 类 相应 的 父 类 。 但 这 个 例子 中 并 没 
有 实现 它 ， 而 是 实现 了 一 个 新 的 名 叫 ArraySet 的 非 抽 象 类 。 


例 9-16 中 的 代码 很 长 ， 但 还 是 应 当 完 整地 阅读 一 忆 。 注 意 这 里 用 到 了 
Function.prototype.extend() 作 为 创建 子 类 的 快捷 方式 。 


例 9-16: 抽象 类 和 和 非 抽象 Set 类 的 层次 结构 


// 这 个 画 数 可 以 用 做 任何 抽象 方法 ， 非 常 方便 


function abstractmethod( ){tthrow new Error("abstract method");}/* 


*AbstractSet 类 定义 了 一 个 抽象 方法 : contains() 


4 


function AbstractSet(){throw new Error("Can't instantiate abstract classes");} 


AbstractSet .prototype.contains=abstractmethod;/* 


*NotSet 是 AbstractSet 的 一 个 非 抽 象 子 类 


* 所 有 不 在 其 他 集合 中 的 成 员 都 在 这 个 集合 中 


“因为 它 是 在 其 他 集合 是 不 可 写 的 条 件 下 定义 的 


* 同 时 由 于 它 的 成 员 是 无 限 个 ， 因 此 它 是 不 可 枚 举 的 


* 我 们 只 能 用 它 来 检测 元 素 成 员 的 归属 情况 


* 注 意 ， 我 们 使 用 了 Function.prototype,extend( ) 方 法 来 定义 这 个 子 类 


Var NotSet=AbstractSet ,extend ( 


function NotSet(set){this.set=set,;}, 


contains:function(x){return!this.set.contains(x);}, 


tostring:function(x){return"~"+this.set.toSstring();}, 


equals:function(that){ 


return that instanceof NotSet&&this.set.equals(that. set); 


);/* 


*AbstractEnumerableSet 是 AbstractSet 的 一 个 抽象 子 类 


* 它 定义 了 抽象 方法 size( ) 和 foreach() 


* 然 后 实现 了 非 抽 象 方法 jsEmpty()、toArray()、to[Locale]String() 和 equals() 方 法 


* 子 类 实现 了 contains()、size() 和 foreach()， 这 三 个 方法 可 以 很 轻易 地 调用 这 5 个 非 抽象 方法 


var AbstractEnumerabJleSet=AbstractSet ,extend ( 


function(){throw new Error("Can't instantiate abstract classes");}, 


size:abstractmethod, 


foreach:abstractmethod, 


isEmpty:function(){return this.size()==0;}, 


toString:function(){ 


Var s="{",i=0; 


this.foreach(function(Vv){ 


于 (I++ 之 0)S+=" 


s+=V; 


}); 


return s+"}"; 


}, 


toLocaleSstring:function(){ 


Var s="{",i=0; 


this.foreach(function(v)t 


if(i++>0)s+=","; 


if(v==nyull)s+=v;//null 和 undefined 


I 


他 的 情况 


else s+=V.toLocaleSstring();// 


}); 


return s+"}"; 


}, 


toArray:function(){ 


Var a=[]; 


this.foreach(function(v){a.push(v);}); 


return a; 


}, 


equals:function(that){ 


if(!(that instanceof AbstractEnumerableSet))return false;// 如 果 它 们 的 大 小 不 同 ， 则 它们 不 相等 


if(this.size()!=that.size())return false;// 检 查 每 一 个 元 素 是 否 也 在 that 中 


try{ 


this.foreach(function(v){if(!that.contains(v))throw false,;}); 


return true;// 所 有 的 元 素 都 匹配 :集合 相等 


}catch(x)t{ 


if(x===false)return false;// 集 合 不 相等 


throw x;// 发 时 他 的 异常 ， 重 新 抛 出 异常 


mT 
i 
I 


二 7 


*SingletonSet 是 AbstractEnumerableSet 的 非 抽 象 子 类 


*singleton 和 集合 是 只 读 的 ， 已 只 包含 个 成 员 


Sp 


var SingletonSet=AbstractEnumerableSet .extend( 


function Singletonset (member){this.member=member,;}, 


contains:function(x){return x===this.member;}, 


size:function(){return 1;}, 


foreach:function(f,ctx){f.call(ctx,this.member );} 


) 3 


*AbstractwritableSet 是 AbstractEnumerableSet 的 抽象 子 


* 它 定义 了 抽象 方法 add( ) 和 remove( ) 


* 然后 实现 了 非 抽象 方法 union( )、intersection() 和 difference() 


*/ 


var AbstractwritableSet=AbstractEnumerableSet .extend( 


function(){throw new Error("Can't instantiate abstract classes");}, 


add:abstractmethod, 


remove:abstractmethod, 


union:function(that)t{ 


Var self=this; 


that.foreach(function(v){self.add(v);}); 


return this,; 


}, 


intersection:function(that){ 


Var self=this,; 


this.foreach(function(v){if(!'that.contains(v))self.remove(v);}); 


return this,; 


}, 


difference:function(that)t{ 


Var self=this; 


that.foreach(function(v){self.remove(v);}); 


return this,; 


于 


*ArraySet 是 AbstractwritableSet 的 非 抽象 子 类 


* 它 以 数组 的 形式 表示 集 


* 对 于 它 的 contains( ) 方 法 使 


* 因 为 contains() 方 法 的 算法 


* 它 非常 


6 


ns 


合 中 的 元 素 


了 数组 的 线性 查找 


bel 


度 是 0(n) 而 不 是 0(1) 


于 相对 小 型 的 集合 ， 


注意 ， 这 


里 的 实现 用 到 了 ES5 的 数组 方法 indexof( ) 和 forEach() 


var ArraySet=AbstractwritableSet .extend( 


function ArraySet(){ 


this.values=[]; 


this.add.apply(this,arguments); 


}, 


contains:function(v){return this.values.indexof(v)!=-1;}, 


size:function(){return this.values.1length;}, 


foreach:function(f,c){this,.values.forEach(f,c);}, 


add:function(){ 


for(var i=0;i<arguments.length;i++){ 


var arg=arguments[i]; 


if(!this.contains(arg))this.values.push(arg); 


return this,; 


}, 


remove:function(){ 


for(var i=0;i<arguments.length;i++){ 


Var p=this.values.indexof(arguments[i]); 


if(p==-1)continue; 


this.values.splice(p,1); 


return this,; 


9.8 ECMAScript 5 中 的 类 


ECMAScript 5 给 属性 特性 增加 了 方法 支持 (getter、setter、 可 枚 举 性 、 
可 写 性 和 可 配置 性 ) ， 而 且 增 加 了 对 象 可 扩展 性 的 限制 。 这 些 方法 在 
6.6 节 、6.7 节 和 6.8.3 节 都 有 详细 的 讨论 ， 然 而 这 些 方法 非常 适合 用 于 类 
"0 。 下面 几 节 讲 述 了 如 何 使 用 ECMAScript 5 的 特性 来 使 类 更 加 健 


9.8.1 让 属性 不 可 枚 举 


例 9-6 中 的 Set 类 使 用 了 一 个 小 技巧 ， 将 对 象 存 储 为 “集合 ”的 成 员 : 它 给 
添加 至 这 个 “集合 ”的 任何 对 象 定义 了 “对 象 id” 属 性 。 之 后 如 果 在 for/in 循 
环 中 对 这 个 对 象 做 遍历 ， 这 个 新 添加 的 属性 ( 菇 | 也 会 遍历 到 。 
ECMAScript 5 可 以 通过 设置 属性 为 “不 可 枚 举 ” (nonenumerable) 来 让 
属性 不 会 届 历 到 。 例 9-17 展 示 了 如 何 通过 Object.defineProperty0) 来 做 到 
这 一 点 ， 同 时 也 展示 了 如 何 定 义 一 个 getter 函 数 以 及 检测 对 象 是 否 是 可 
扩展 的 (extensible) 。 


例 9-17: 定义 不 可 枚 举 的 属性 


Sr 


// 将 代码 包装 在 一 个 匿名 函数 中 ， 这 样 定义 的 变量 就 在 这 个 函数 作用 域内 


(function(){// 定 义 一 个 不 可 枚 举 的 属性 objectId， 它 可 以 被 所 有 对 象 继 承 


// 当 读 取 这 个 属性 时 调用 getter 画 数 


// 它 没有 定义 setter， 因 此 它 是 只 读 的 


// 它 是 不 可 配置 的 ， 因 此 它 是 不 能 删除 的 


Object.definePproperty(Object.prototype, "objectId",{ 


get :idGetter,// 取 值 器 


enumerable:false,// 不 可 枚 举 的 


configurable:false// 不 可 删除 的 


});// 当 读 取 objectId 的 时 候 直 接 调用 这 个 getter 函 数 


function idGetter(){//getter 玉 数 返回 该 id 


if(!(idprop in this)){// 如 果 对 象 中 不 存在 id 


if(!Object.isExtensible(this))// 可 以 增加 属性 


throw Error("Can't define id for nonextensible objects"); 


Object .defineProperty(this,idprop, {// 给 它 一 个 值 


value:nextid++, // 就 是 这 个 值 


writable:false,// 只 读 的 


enumerable:false, // 不 可 枚 举 的 


configurable:false// 不 可 删除 的 


}); 


return this[idprop];// 返 回 己 有 的 或 新 的 值 


于 私有 变量 


上 1 


};//idGetter( ) 用 到 了 这 些 变 量 ， 这 些 都 局 


var idprop="|**objectId**|";// 假 设 这 个 属性 》 


var nextid=1;// 给 它 设置 初始 值 


}() );// 立 即 执行 这 个 包装 函数 


9.8.2 ”定义 不 可 变 的 类 


除了 可 以 设置 属性 为 不 可 枚 举 的 ，ECMAScript 5 还 可 以 设置 属性 为 只 
读 的 ， 当 我 们 希望 类 的 实例 都 是 不 可 变 的 ， 这 个 特性 非常 有 帮助 。 例 9- 
18 使 用 Object.defineProperties0 和 Object.create0 定 义 不 可 变 的 Range 类 。 
它 同 样 使 用 Object.defineProperties0) 来 为 类 创建 原型 对 象 ， 并 将 (原型 
对 象 的 ) 实例 方法 设置 为 不 可 枚 举 的 ， 就 像 内 置 类 的 方法 一 样 。 不 仅 
如 此 ， 它 还 将 这 些 实例 方法 设置 为 “只 读 ” 和 “不 可 删除 ”>， 这 样 就 可 以 防 
止 对 类 做 任何 修改 (monkey-patching) I 二 i.。 最 后 ， 例 9-18 展 示 了 一 个 
有 趣 的 技巧 ， 其 中 实现 的 构造 函数 也 可 以 用 做 工厂 函数， 这 样 不 论调 
用 函数 之 前 是 否 融 有 new 关 键 字 ， 都 可 以 正确 地 创建 实例 。 


例 9-18: 创建 一 个 不 可 变 的 类 ， 它 的 属性 和 方法 都 是 只 读 的 


/7 这 个 方 ? 


function Range(from,to){// 这 些 是 对 from 和 to 只 读 属 


可 以 使 


var props={ 


new 调 用 ， 也 可 以 省 略 new， 它 可 以 用 做 构造 画 数 也 可 以 用 做 工厂 画 数 


性 的 描述 符 


WE 


from: {value:from,enumerable:true,writable:false,configurable:false}, 


to:{value:to,enumerable:true,writable:false,configurable:false} 


}; 


if(this instanceof Range )// 如 细 


Object .defineProperties(this,props);// 定 义 属性 


else// 和 否则 ， 作 为 了 


return Object.create(Range.prototype,// 创 建 


props);// 


} 


// 如 果 


同 相 


属性 由 p 


的 方法 


[ 厂 方法 来 调 


rops 指 定 


给 Range .prototype 对 象 添加 属性 


作为 构造 函数 来 调用 


Ea 


高 


这 个 新 Range 对 象 ， 


Toe 


{TT 


// 那 么 我 们 需要 给 这 些 属性 设置 它们 的 特性 


// 因 为 我 们 无 法 识别 出 它们 的 可 枚 举 性 、 可 写 性 或 可 配置 性 ， 这 些 属性 特性 默认 都 是 false 


Object.defineproperties(Range.prototype,t{ 

includes:{ 

value:function(x){return this.from<=x&&x<=this.to;} 
}, 

foreach:{ 

value:function(f){ 


for(var x=Math.ceil(this.from);x<=this.to;x++)f(x); 


}, 
toSstring:{ 


value:function(){return"("+this.from+"..."+this.to+")";} 


}); 


例 9-18 用 到 了 Object.defineProperties() 和 Object.create() 来 定义 不 可 变 的 
和 不 可 枚 举 的 属性 。 这 两 个 方法 非常 强大 ， 但 属性 描述 符 对 象 让 代码 
的 可 读 性 变 得 更 差 。 另 一 种 改进 的 做 法 是 将 修改 这 个 已 定义 属性 的 特 
性 的 操作 定义 为 一 个 工具 函数 ， 例 9-19 展 示 了 两 个 这 样 的 工具 函数 : 


例 9-19: 属性 摘 述 符 工 具 函 数 


// 将 o 的 指定 名 字 (或 所 有 ) 的 属性 设置 为 不 可 写 的 和 不 可 配 


Ti 


日 


function freezeProps(o){ 


var props=(arguments. Length==1)V/ 


[未 人 月 


?0bject .getOwnPropertyNames(0)// 使 


所 有 的 属性 


:Array.prototype.splice.call(arguments,1);V// 否 则 传 入 了 指骨 


名 字 的 
props.forEach(function(n){// 将 它们 都 设 


为 只 读 的 和 不 可 变 的 
// 忽 略 不 可 配置 的 


al 
讼 


if(!0Object.getoOwnPropertyDescriptor(o,n).configurable)return; 


Object.defineproperty(o,n, {writable:false,configurable:false}); 
}); 


return 0;// 所 以 我 们 可 以 继续 使 


[ 


// 将 o 的 指定 名 字 (或 所 


i 


有 ) 的 属 ! 


生 设 二 


到 
这 


为 不 可 枚 举 的 和 可 配 


的 
function hideProps(o){ 


var props=(arguments.length==1)//4 


[ 果 只 有 一 个 参数 
?0bject.getownPropertyNames(o)// 使 用 所 有 的 属性 
:Array.prototype.splice.call(arguments,1);// 否 则 传 入 了 指定 名 字 的 属性 
props.forEach(function(n){// 将 它们 设置 为 不 可 枚 举 的 
// 忽 略 不 可 配置 的 属性 


If(!object.getownPropertyDescriptor(o,n),.configurable)return'， 


Object.defineproperty(o,n, {enumerable:false}); 


| 


}); 


return o; 


Object.defineProperty0 和 Object.definePropertiesO 可 以 用 来 创建 新 属性 ， 
也 可 以 修改 已 有 属性 的 特性 。 当 用 它们 创建 新 属性 时 ， 默 认 的 属性 特 
性 的 值 都 是 false。 但 当 用 它们 修改 已 经 存在 的 属性 时 ， 默 认 的 属性 特 
性 依然 保持 不 变 。 比 如 ， 在 上 面 的 hidePropsO 函 数 中 ， 只 指定 了 
enumerable 特 性 ， 因 为 我 们 只 想 修 改 enumerable 特 性 。 


使 用 这 些 工具 函数 ， 束 可 以 充分 利用 ECMAScript 5 的 特性 来 实现 一 个 
不 可 变 的 类 ， 而 且 不 用 动态 地 修改 这 个 类 。 例 9-20 中 不 可 变 的 Range 类 
就 用 到 了 刚才 定义 的 工具 函数 。 


例 9-20: 一 个 简单 的 不 可 变 的 类 


function Range(from,to){// 不 可 变 的 类 Range 的 构造 函数 


this.from=from; 


this.to=to,; 


上 


freezeProps(this);// 将 属 


性 设置 为 不 可 变 的 


一 六 


} 


Range .prototype=hideProps({// 使 用 不 可 枚 举 的 属性 来 定义 原型 


constructor:Range, 


includes:function(x){return this.from<=x&&x<=this.to;}, 


foreach:function(f){for(var x=Math.ceil(this.from);x<=this.to;x++)f(x);}, 


toSstring:function(){return"("+this,.from+",..."+this.to+")";} 


}); 


9.8.3 ”封装 对 象 状态 


如 9.6.6 闻 和 例 9-10 所 示 ， 构 造 画 数 中 的 变量 和 参数 可 以 用 做 它 创 建 的 对 
象 的 私有 状态 。 该 方法 在 ECMAScript 3 中 的 一 个 缺点 是 ， 访 问 这 些 私 
有 状态 的 存 取 咽 方 法 是 可 以 蔡 换 的 。 在 ECMAScript 5 中 可 以 通过 定义 
属性 getter 和 setter 方 法 将 状态 变量 更 健壮 地 封装 起 来 ， 这 两 个 方法 是 无 
法 删除 的 ， 如 例 9-21 所 示 。 


例 9-21: 将 Range 类 的 端点 严格 封装 起 来 


// 这 个 版 本 的 Range 类 是 可 变 的 ， 但 将 端点 变量 进行 了 良好 的 封装 


Vi 


// 但 端点 的 大 小 顺序 还 是 固定 的 : from<=to 


function Range(from,to){// 如 果 from 大 于 


+ 


0 


if(from>to)throw new Error("Range:from must be<=to");// 定 义 存 取 器 方法 以 维持 不 变 


function getFrom(){return from,;} 


function getTo(){return to,;,} 


function setFrom(f){// 设 置 from 的 值 时 ， 不 允许 from 大 于 to 


if(f<=to)from=f; 


else throw new Error("Range:from must be<=to"); 


function setTo(t){// 设 置 to 的 值 时 ， 不 允许 to 小 于 from 


if(t>=from)to=t; 


else throw new Error("Range:to must be>=from"); 


} 


// 将 使 用 取 值 器 的 属性 设置 为 可 枚 举 的 、 不 可 配置 的 


Object .defineProperties(this,{ 


from: {get:getFrom, set:setFrom,enumerable:true,configurable:false}, 


to: {get:getTo, set:setTo,enumerable:true,configurable:false} 


}); 


} 


// 和 前 面 的 例子 相 比 ， 原 型 对 象 没有 做 任何 修改 


I 


// 实 例 方 法 可 以 像 读 取 普 通 的 属性 一 样 读 取 from 和 to 


Range.prototype=hideProps({ 

constructor :Range, 

includes:function(x){return this.from<=x&&x<=this.to;}, 
foreach:function(f){for(var x=Math.ceil(this.from);x<=this.to;x++)f(x);}, 
toSstring:function(){return"("+this.fromt+"..."+this.to+")";} 


}); 


9.8.4 防止 类 的 扩展 


通常 认为 ， 通 过 给 原型 对 象 添 加 方法 可 以 动态 地 对 类 进行 扩展 ， 这 是 
JavaScript 本 身 的 特性 。ECMAScript 5 可 以 根据 需要 对 此 特性 加 以 限 
制 。Object.preventExtensions() 可 以 将 对 象 设置 为 不 可 扩展 的 ( 见 6.8.3 
节 ) ， 也 就 是 说 不 能 给 对 象 添 加 任何 新 属性 。Object.seal() 则 更 加 强 
大 ， 它 除了 能 阻止 用 户 给 对 象 添加 新 属性 ， 还 能 将 当前 已 有 的 属性 设 
置 为 不 可 配置 的 ， 这 样 就 不 能 删除 这 些 属性 了 (但 不 可 配置 的 属性 可 


以 是 可 写 的 ， 也 可 以 转换 为 只 读 属性 ) 。 可 以 通过 这 样 一 句 简单 的 代 
码 来 阻止 对 Object.prorotype 的 扩展 : 


Object ,seal(Object,prototype ) ， 


JavaScript 的 另外 一 个 动态 特性 是 “对 象 的 方法 可 以 随时 奉 换 ”( 或 称 
为 "monkey-patch") 


var original sort_method=Array.prototype.sort,; 

Array.prototype.sort=function( ){ 

Var Start=new Date(); 

original_ sort_method.apply(this,arguments); 

Var end=new Date(); 

console.log("Array sort took"+(end-start)+"milliseconds."); 

}; 

可 以 通过 将 实例 方法 设置 为 只 读 来 防止 这 类 修改 ， 一 种 方法 距 古 使 用 
上 面 代码 所 定义 的 freezeProps0 工 具 函 数 。 另 外 一 种 方法 是 使 用 
Object.freeze()， 它 的 功能 和 Object.seal() 完 全 一 样 ， 它 同样 会 把 所 有 属 
性 都 设置 为 只 读 的 和 不 可 配置 的 。 

理解 类 的 只 读 属性 的 特性 至 关 重 要 。 如 采 对 象 o 继 承 了 只 读 属 性 p， 那 
么 给 o.p 的 赋值 操作 将 会 失败 ， 就 不 会 给 o 创 建新 属性 。 如 有 果 你 想 重 写 一 
个 继承 来 的 只 读 属 性 ， 束 必须 使 用 Object.definePropertiy() 、 
Object.defineProperties0) 或 Object.create() 来 创建 这 个 新 属性 。 也 就 是 


说 ， 如 果 将 类 的 实例 方法 设置 为 只 读 的 ， 那 么 重 写 它 的 子 类 的 这 些 方 
法 的 难度 会 更 大 。 


这 种 锁定 原型 对 象 的 做 法 往往 没有 必要 ， 但 的 确 有 一 些 场景 是 需要 阻 
止 对 象 的 扩展 的 。 回 想 一 下 例 9-7 中 的 enumeration()， 这 是 一 个 类 工厂 
函数 。 这 个 函数 将 枚 举 类 型 的 每 个 实例 都 保存 在 构造 男 数 对 象 的 属性 
里 ， 以 及 构造 函数 的 values 数 组 中 。 这 些 属性 和 数组 是 表示 枚 举 类 型 实 
例 的 正式 实例 列表 ， 是 可 以 执行 “冻结 ” (freezing) 操作 的 ， 这 样 就 不 
能 给 它 添加 新 的 实例 ， 已 有 的 实例 也 无 法 删除 或 修改 。 可 以 给 
enumeration0) 函 数 汰 加 几 行 简单 的 代码 : 


Object .freeze(enumeration,Vvalues ) ; 


Object .freeze(enumeration) ' 


需要 注意 的 是 ， 通 过 在 枚 举 类 型 中 调用 Object.freeze()， 例 9-17 中 定义 的 

objectId 属 性 之 后 也 无 法 使 用 了 。 这 个 问题 的 解决 办 法 是 ， 在 枚 举 类 型 

。 we objectId 属 性 (调用 潜在 的 存 取 器 方法 并 设 
间 ? 属 : 9 


9.8.5 ” 子 类 和 ECMAScript 5 


例 9-22 使 用 ECMAScript 5 的 特性 实现 子 类 。 这 里 使 用 例 9-16 中 的 

AbstractWritableSet 类 来 做 进一步 说 明 ， 来 定义 这 个 类 的 子 类 StringSet 。 
下 面 这 个 例子 的 最 大 特点 是 使 用 Object.create() 创 建 原型 对 象 ， 这 个 原 
型 对 象 继 承 自 父 类 的 原型 ， 同 时 给 新 创建 的 对 象 定义 属性 。 这 种 实现 
方法 的 困难 之 处 在 于 ， 正 如 上 文 所 提 到 的 ， 它 需要 使 用 难看 的 属性 描 


述 符 。 


这 个 例子 中 另外 一 个 有 趣 之 处 在 于 ， 使 用 Object.create() 创 建 对 象 时 传 
入 了 参数 null， 这 个 创建 的 对 象 没 有 任何 继承 任何 成 员 。 这 个 对 象 用 来 
存储 集合 的 成 员 ， 同 时 ， 这 个 对 象 没有 原型 ， 这 样 我 们 就 能 对 它 直 接 
使 用 in 运 算 符 局 -， 而 不 须 使 用 hasOwnProperty() 方 法 。 


例 9-22: StringSet， 利用 ECMAScript 5 的 特性 定义 的 子 类 


function StringSet(){ 


this.set=0bject.create(null);// 创 建 一 个 不 包含 原型 的 对 象 


this.n=0; 


this.add.apply(this,arguments); 


// 注 意 ， 使 用 0bject .create( ) 可 以 继承 父 类 的 原型 


Ht 


生 的 可 写 性 、 可 枚 举 性 和 可 配置 性 


为 我 们 没 


el 
并 


// 而 且 可 以 定义 单独 调用 的 方法 ， 指定 属 


过 | 


// 因 此 这 些 属性 特 ' 


一 妆 


生 的 默认 值 都 是 false 


~ 


// 只 读 方法 让 这 个 类 难于 子 类 化 被 继承 ) 


StringSet.prototype=0bject.create(AbstractwritableSet.prototype,t 


constructor:{value:StringsSet}, 


contains:{value:function(x){return x in this.set;}}, 


size:{value:function(x){return this.n;}}, 


foreach: {value:function(f,c){0bject.keys(this.set).forEach(f,c);}}, 


add:{ 


value:function(){ 


for(var i=0;i<arguments.length;i++){ 


if(!(arguments[il]in this.set))t{ 


this.set[arguments[i]]=true; 


this.n+t+; 


} 

return this,; 

} 

}, 

remove:{ 

value:function(){ 

for(var i=0;i<arguments.length;i++){ 
if(arguments[i]in this,set){ 
delete this.set[arguments[i]]; 
this.n--,; 

} 

} 


return this,; 


}); 


9.8.6 “属性 摘 述 符 


6.7 ”下 讨 论 了 ECMAScript 5 中 的 属性 描述 符 ， 但 没有 给 出 它们 的 示例 
代码 。 本 市 给 出 一 个 例子 ， 用 来 讲述 基于 ECMAScript 5 如 何 对 属性 进 
行 各 种 操作 。 在 例 9-23 中 给 Object.prototype 添 加 了 properties() 方 法 (这 
个 方法 是 不 可 枚 举 的 ) 。 这 个 方法 的 返回 值 是 一 个 对 象 ， 用 以 表示 属 


性 的 列表 ， 并 定义 了 有 用 的 方法 用 来 输出 属性 和 属性 特性 (对 于 调试 
非常 有 用 ) ， 用 来 获得 属性 描述 符 〈 当 复制 属性 同时 复制 属性 特性 时 
非常 有 用 ) 以 及 用 来 设置 属性 的 特性 (是 上 文 定义 的 hidePropsO 和 
freezeProps() 汞 数 不 错 的 蔡 代 方案 ) 。 这 个 例子 展示 了 ECMAScript 5 的 
大 多 数 属性 相关 的 特性 ， 同 时 使 用 了 一 种 模块 编程 技术 ， 这 将 在 下 一 


节 讨 论 。 


例 9-23: ECMAScript 5 属性 操作 


/* 


* 给 0bject .prototype 定 义 properties() 方 法 ， 


* 这 个 方法 返回 一 个 表示 调用 它 的 对 象 上 的 属性 名 列表 的 对 象 


* (如 果 不 带 参数 调用 它 ， 就 表示 该 对 象 的 月 


属性 ) 


Sy 


* 返 回 的 对 象 定义 了 4 个 有 用 的 方法 : toString()、descriptors()、hide() 和 show() 
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(function namespace(){// 将 所 有 逻辑 闭 包 在 一 个 私有 函数 作用 域 中 


// 这 个 函数 成 为 所 有 对 象 的 方法 


function properties(){ 


var names;// 属 性 名 组 成 的 数组 


if(arguments.length==0)// 所 有 的 自 有 属性 


names=0bject .getOwnPropertyNames(this); 


else if(arguments.length==1&&Array.isArray(arguments[0])) 


names=arguments[9];// 名 字 组 成 的 数组 


else// 参 数列 表 本 身 就 是 名 了 


names=Array.prototype.splice.call(arguments,0);// 返 


一 


子 


return new Properties(this,names); 


// 将 它 设 置 为 0bject .prototpye 的 新 的 不 可 枚 举 的 属 怡 


// 这 是 从 私有 画 数 作用 域 导出 的 唯一 一 个 什 


bn 
| 十 
二 


一 个 


Object.definepProperty(Object.prototype, "properties",f{ 


value:properties, 


enumerable:false,writable:true,configurable:true 


}) ;// 这 个 构造 函数 是 由 上 面 的 properties( ) 郴 数 所 调 


//Properties 类 表示 一 个 对 象 的 属性 集合 


en 


function Properties(o,names)t{ 


性 所 属 的 对 象 


oT 


this.o=0;// 


ml 


this.names=names;// 属 性 的 名 字 


en 


// 将 代表 这 


Day 
[a 
忆 
Wh 
到 
这 


如 性 的 对 象 设置 为 不 可 枚 举 的 


Properties.prototype.hide=function(){ 


var o=this.o,hidden={enumerable:false}; 


this.names.forEach(function(n){ 


if(o.hasOownProperty(n)) 


Object.defineproperty(o,n,hidden); 


的 


新 的 Properties 对 象 ， 


j 以 表示 属性 


}); 


return this,; 


};// 将 这 些 属性 设置 为 只 读 的 和 不 可 配置 的 


bn 


Properties.prototype.freeze=function(){ 


var o=this.o,frozen={writable:false,configurable:false}; 


this.names.forEach(function(n){ 


If(o.hasownProperty(n) ) 


Object ,defineProperty(o,nv,frozen) 


}); 


return this,; 


};// 返 回 一 个 对 象 ， 这 个 对 象 是 名 字 到 属性 描述 符 的 映射 表 


// 使 用 它 来 复制 属性 ， 连 同 


性 特性 一 起 复制 


el 


//Object.defineProperties(dest,src.properties().descriptors()); 


Properties.prototype.descriptors=function(){ 


Var o=this.o,desc={}; 


this.names.forEach(function(n){ 


if(!0o.hasOwnProperty(n))return,; 


desc[n]=0bject.getOownPropertyDescriptor(o,n); 


}); 


return desc,; 


};// 返 回 一 个 格式 化 良好 的 属性 列表 
// 列 表 中 包含 名 字 、 值 和 属性 特性 ， 使 用 "permanent" 表 示 不 可 配置 


// 使 用 "readonly" 表 示 不 可 写 ， 使 用 "hidden" 表 示 不 可 枚 举 


// 普 通 的 可 枚 举 、 可 写 和 可 配置 属 | 


J 
TT 


不 包含 特性 列表 


Properties.prototype.toString=function(){ 


var 0=this.0;// 在 下 面 柑 套 的 函数 中 使 


var lines=this.names.map(nameToString); 


return"{\n"+lines.join(",\n")+"\n}",; 


function nameToString(n){ 


var s="",desc=0bject.getOwnPropertyDescriptor(o,n); 


if(!desc)return"nonexistent"+n+":undefined"; 


if(!desc.configurable)s+="permanent"; 


if((desc.get&&lIdesc.set)||!desc.writable)s+="readonly"; 


if(!desc.enumerable)s+="hidden"; 


if(desc.get||desc,.set)s+="accessor"+n 


else s+=n+":"+((typeof desc.value==="function")?"function":desc.value); 
return s; 
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};// 最 后 ， 将 原型 对 象 中 的 实例 方法 设置 为 不 可 枚 举 的 


Properties.prototype.properties(),hide()， 


}() ) ; /立即 执行 这 个 匿名 函数 


9.9 模块 


将 代码 组 织 到 类 中 的 一 个 重要 原因 是 ， 让 代码 更 加 “模块 化 "， 可 以 在 
很 多 不 同 场景 中 实现 代码 的 重用 。 但 类 不 是 唯一 的 模块 化 代码 的 方 
式 。 一 般 来 讲 ， 模 块 是 一 个 独立 的 JavaScript 文 件 。 模 块 文件 可 以 包含 
一 个 类 定义 、 一 组 相关 的 类 、 一 个 实用 函数 库 或 者 是 一 些 待 执行 的 代 
码 。 只 要 以 模块 的 形式 编写 代码 ， 任 何 JavaScript 代 人 码 段 束 可 以 当做 一 
个 模块 号 -。JavaScript 中 并 没有 定义 用 以 支持 模块 的 语言 结构 (但 
imports 和 exports 的 确 是 JavaScript 保 留 的 关键 字 ， 因 此 JavaScript 的 未 来 
版 本 可 能 会 文 持 ) ， 这 也 意味 着 在 JavaScript 中 编写 模块 化 的 代码 更 多 
的 是 遵循 某 一 种 编码 约定 。 


很 多 JavaScript 库 和 客户 端 编程 框架 都 包 合 一 些 模块 系统 。 比 如 ，Dojo 
工具 包 和 Google 的 Closure 库 定义 了 provide0 和 require0) 函 数 ， 用 以 声明 
和 加 载 模块 。 并 且 ，CommonJS 服 务 硕 端 JavaScript 标 准 规范 (参照 
http://commonjs.org) 创建 了 一 个 模块 规范 ， 后 者 同样 使 用 require() 函 
数 。 这 种 模块 系统 通常 用 来 处 理 模块 加 载 和 依赖 性 管理 ， 这 些 内 容 已 
经 超出 本 书 的 讨论 范 围 。 如 果 使 用 这 些 框架 ， 则 必须 按照 框架 提供 的 
模块 编写 约定 来 定义 模块 。 本 广 仅 对 模块 约定 做 一 些 人 简单 的 讨论 。 


模块 化 的 目标 是 支持 大 规模 的 程序 开发 ， 处 理 分 散 源 中 代码 的 组 装 ， 

并 且 能 让 代码 正确 运行 ， 哪 怕 包 含 了 作者 所 不 期 望 出 现 的 模块 代码 ， 

也 可 以 正确 执行 代码 。 为 了 做 到 这 一 点 ， 不 同 的 模块 必须 避免 修改 全 
局 执行 上 下 文 ， 因 此 后 续 模 块 应 当 在 它们 所 期 望 运行 的 原始 (或 接近 
原始 ) 上 下 文中 执行 电 |.。 这 实际 上 意味 着 模块 应 当 尽 可 能 少 地 定义 全 
局 标识 ， 理 想 状 况 是 ， 所 有 模块 都 不 应 当 定 义 超过 一 个 (全 局 标 

识 ) 。 接 下 来 我 们 给 出 的 一 种 简单 的 方法 可 以 做 到 这 一 点 。 你 会 发 现 
在 JavaScript 中 实现 一 个 模块 代码 并 不 困难 : 在 本 书 中 很 多 示例 代码 都 
用 到 了 这 种 技术 。 


9.9.1 用 做 命名 空间 的 对 象 


在 模块 创建 过 程 中 避免 污染 全 局 变量 的 一 种 方法 是 使 用 一 个 对 象 作 为 
命名 空间 。 它 将 函数 和 值 作为 命名 空间 对 象 属性 存储 起 来 (可 以 通过 
全 局 变量 引用 ) ， 而 不 是 定义 全 局 函数 和 变量 。 拿 例 9-6 的 Set 类 来 说 ， 
它 定 义 了 一 个 全 局 构造 画 数 Set0。 然 后 给 这 个 类 定义 了 很 多 实例 方 
法 ， 但 将 这 些 实例 方法 存储 为 Set.prototype 的 属性 ， 因 此 这 些 方法 不 是 
全 局 的 。 示 例 代码 也 包含 一 个 _v2s() 工 具 函 数 ， 但 也 没有 定义 它 为 全 局 
六 数 ， 而 是 把 它 存储 为 Set 的 属性 。 


接 下 来 看 一 下 例 9-16， 这 个 例子 定义 了 很 多 抽象 类 和 非 抽 象 类 。 每 个 类 
都 只 包含 一 个 全 局 标识 ， 但 整个 模块 (这 个 JavaScript 文 件 ) 定义 了 很 
少 的 全 局 变量 。 基 于 这 种 “保持 干 津 的 全 局 命名 空间 ”的 观点 ， 一 种 更 
好 的 做 法 是 将 “集合 ”类 定义 为 一 个 单独 的 全 局 对 象 : 


Var sets={},; 


这 个 sets 对 象 是 模块 的 命名 空间 ， 并 且 将 每 个 “集合 ”类 都 定义 为 这 个 对 
象 的 属性 : 


sets.SingletonSet=sets.AbstractEnumerableSet .extend(...); 
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Var s=new sets.Singletonset(1); 


模块 的 作者 并 不 知道 他 的 模块 会 和 哪些 其 他 模块 一 起 工作 ， 因 此 尤为 
注意 这 种 命名 空间 的 用 法 带 来 的 命名 冲突 。 然 而 ， 使 用 这 个 模块 的 开 
发 者 是 知道 它 用 了 哪些 模块 、 用 到 了 哪些 名 字 的 。 程 序 员 并 不 一 定 要 
严格 遵守 命名 空间 的 写法 ， 只 需 将 彰 用 的 值 “ 导 入 ?到 全 局 命名 空间 
中 。 程 序 员 如 采 要 经 常 使 用 sets 命 名 空间 中 的 Set 类 ， 可 以 这 样 将 它 导 
入 : 


var Set=sets.Set;// 将 Set 导 入 到 全 局 命名 空间 中 


var s=new Set(1,2,3);// 这 样 每 次 使 用 它 就 不 必 加 set 前 级 了 


有 时 模块 作者 会 使 用 更 深层 散 套 的 命名 空间 。 如 果 sets 模 块 是 男 外 一 组 
更 大 的 模块 集合 的 话 ， 它 的 命名 空间 可 能 会 是 collections.sets， 模 块 代 
码 的 开始 会 这 样 写 : 


var collections;// 声 明 ( 或 重新 声明 ) 这 个 全 局 变量 


if(!1collections )// 如 果 它 原本 不 存在 


collections={};// 创 建 一 个 顶层 的 命名 空间 对 象 


collections.sets={}// 将 sets 命 名 空间 创建 在 它 的 内 部 


// 在 collections.sets 内 定义 set 类 


collections.sets.AbstractSet=function(){...} 


最 顶层 的 命名 空间 往往 用 来 标识 创建 模块 的 作者 或 组 织 ， 并 避免 命名 
空间 的 命名 冲突 。 比 如 ，Google 的 Closure 库 在 它 的 命名 空间 
goog.structs 中 定义 了 Set 类 。 每 个 开发 者 都 反 转 互联 网 域名 的 组 成 部 
分 ， 这 样 创建 的 命名 空间 前 缀 是 全 局 唯一 的 ， 一 般 不 会 被 其 他 模块 作 
者 采用 。 比 如 我 的 网 站 是 davidflanagan.com， 我 可 以 通过 这 个 命名 空间 
来 发 布 我 的 sets 模 块 : com.davidflanagan.clooectinos.sets。 


使 用 很 长 的 命名 空间 来 导入 模块 的 方式 非常 重要 ， 然 而 程序 员 往往 将 


a ed 而 不 是 导入 (命名 空间 中 的 某 个 ) 单独 


Var sets=com.davidflanagan.collections. sets,; 


按照 约定 ， 模 块 的 文件 名 应 当 和 命名 空间 匹配 。sets 模 块 应 当 保 存在 文 
件 sets.js 中 。 如 果 这 个 模块 使 用 命名 空间 collections.sets， 那 么 这 个 文件 
应 当 保 存在 目录 collections/ 下 (这 个 目录 还 应 当 包 含 男 一 个 文件 
maps.js) 。 并 且 使 用 命名 空间 com.davidflanagan.collections.sets 的 模块 
应 当 在 文件 com/davidflanagan/collections/sets.js 中 。 


9.9.2 ”作为 私有 命名 空间 的 函数 


模块 对 外 导出 一 些 公用 API， 这 些 API 是 提供 给 其 他 程序 员 使 用 的 ， 它 
包括 画 数 、 类 、 属 性 和 方法 。 但 模块 的 实现 往往 需要 一 些 额外 的 辅助 
函数 和 方法 ， 这 些 函 数 和 方法 并 不 需要 在 模块 外 部 可 见 。 比 如 ， 例 9-6 
中 的 Set._v2s0 画 数 ， 模 块 作者 不 布衣 Set 类 的 用 户 在 某 时 刻 调用 这 个 芳 
数 ， 因 此 这 个 方法 最 好 在 类 的 外 部 是 不 可 访问 的 。 


可 以 通过 将 模块 (本 例 中 的 Set 类 ) 定义 在 某 个 函数 的 内 部 来 实现 。 正 
如 8.5 证 所 揪 述 的 一 样 ， 在 一 个 钞 数 中 定义 的 变量 和 函数 部 属于 函数 的 
局 部 成 员 ， 在 函数 的 外 部 是 不 可 见 的 。 实 际 上 ， 可 以 将 这 个 函数 作用 

域 用 做 模块 的 私有 命名 空间 《有 时 称 为 “模块 函数 ") 。 例 9-24 展 示 了 如 
何 使 用 “模块 函数 ”来 实现 Set 类 : 


例 9-24: 模块 印 数 中 的 Set 类 


// 声 明 全 局 变量 Set， 使 个 函数 的 返回 值 给 它 赋值 


// 函 数 结束 时 紧 跟 的 一 对 圆 括号 说 明 这 个 函数 定义 后 立即 执行 


// 它 的 返回 值 将 赋值 给 Set ， 而 不 是 将 这 个 函数 赋值 给 Set 


// 注 意 它 是 一 个 函数 表达 式 ， 不 是 一 条 语句 ， 因 此 函数 "invocation" 并 没有 创建 全 


ll 


var Set=(function invocation(){ 


function Set(){// 这 个 构造 函数 是 局 部 变量 


娄 
着 
BE 
全 
汶 

n> 


this.values={};// 这 个 对 象 的 属性 用 


this .n=0;// 集 合 中 值 的 个 数 


tT 


this.add.apply(this,arguments);// 将 所 有 的 参数 都 添加 至 集合 中 


// 给 Set .prototype 定 义 实例 方法 


// 这 里 省 略 了 详细 代码 


Set.prototype,.contains=function(value){// 注 意 我 们 调用 了 v2s( ) ， 而 不 是 调用 带 有 笨重 的 前 组 的 
set._v2s() 


return this.values.hasOwnpProperty(v2s(value)); 


}; 


Set.prototype.size=function(){return this.n;}; 


Set.prototype.add=function(){/*...*/}; 


Set.prototype.remove=function(){/*...*/}; 


Set .prototype.foreach=function(f,context){/*...*/};// 这 里 是 上 面 的 方法 用 到 的 一 些 辅 助 画 数 和 变 


时 


// 它 们 不 属于 模块 的 共有 API， 但 它们 都 隐藏 在 这 个 函数 作用 域内 


// 因 此 我 们 不 必 将 它们 定义 为 Set 的 属性 或 使 用 下 划 线 作为 其 前 组 


function v2s(val){/*...*/} 


function objectIid(o){/*...*/} 


var nextId=1;// 这 个 模块 的 共有 API 是 Set( ) 构 造 画 数 


// 我 们 需要 把 这 个 函数 从 私有 命名 空间 中 导 蝇 


ER 
> 
dh 


// 以 便 在 外 部 也 可 以 使 用 它 ， 在 这 种 情况 下 ， 我 们 通过 返回 这 个 构造 画 数 来 时 日 


Ets 
[车 


// 它 变 成 第 一 行 代码 所 指 的 表达 式 的 值 


return Set 


】}() ) ;// 定 义 函 数 后 立即 执行 


这 里 使 用 了 立即 执行 的 匿名 函数 ， 这 在 JavaScript 中 是 种 惯用 
。 如果 想 让 代码 在 一 个 私有 命名 空间 中 运行 ， 只 须 给 这 上 段 代 码 加 上 
Ye oD 开始 的 左 圆 括号 确保 这 是 一 个 函数 表 
达 式 ， 而 不 是 函数 定义 语句 ， 因 此 可 以 给 该 二 绥 添加 一 个 国 数 名 来 让 
代码 变 得 更 加 清晰 。 在 例 9-24 中 使 用 了 名 字 "invocation"， 用 以 强调 这 个 
函数 应 当 在 定义 之 后 立即 执行 。 名 字 "namespace" 也 可 以 用 来 强调 这 个 
函数 被 用 做 命名 空间 。 


一 旦 将 模块 代码 封装 进 一 个 函数 ， 束 需要 一 些 方法 导出 其 公用 API， 以 
便 在 模块 函数 的 外 部 调用 它们 。 在 例 9-24 中 ， 借 块 阔 数 返回 构 才 画 数 ， 
这 个 构造 钞 数 随后 赋值 给 一 个 全 局 变量 。 将 值 返 回 已 经 清楚 地 表明 API 

已 经 导出 在 贸 数 作用 域 之 外 。 如 果 模 决 API 包 含 多 个 单元 则 它 可 以 返 
回 命名 空间 对 象 。 对 于 sets 模 块 来 说 ， 可 以 将 代码 写成 这 样 : 


// 创 建 一 个 全 局 变量 用 来 存放 集合 相关 的 模块 


var collections; 


if(!collections)collections={};// 定 义 sets 模 块 


小 


collections.sets=(function namespace(){// 在 这 里 定义 多 种 "集合 "类 ， 使 用 局 部 变量 和 画 数 


//.. 这 里 省 略 很 多 代码 …. 


// 通 过 返回 命名 空间 对 象 将 API 导 出 


return{// 导 出 的 属性 名 : 局 部 变量 名 字 


AbstractSet :AbstractSet， 


NotSet :NotSet， 


AbstractEnumerableSet:AbstractEnumerableSset, 


SingletonSet :SingletonSet， 
AbstractwritableSet:AbstractwritableSset, 
ArraySet:ArraySet 

}; 

}()); 


男 外 一 种 类 似 的 技术 是 将 模块 画 数 当做 构造 钞 数 ， 通 过 new 来 调用 ， 通 
过 将 它们 ' 忆 :赋值 给 this 来 将 其 导出 1}: 


Var collections; 


if(!collections)collections={}; 


collections.sets=(new function namespace(){//.…. 这 里 省 略 很 多 代码 ..… 


// 将 API 导 出 至 this 对 象 


this.AbstractSet=AbstractSet 


this.NotSet=NotSet;//...... 


// 注 意 ， 这 里 没有 返回 值 


作为 一 种 替代 方案 ， 如 果 已 经 定义 了 全 局 命名 空间 对 象 ， 这 个 模块 画 
数 可 以 直接 设置 那个 对 象 的 属性 ， 不 用 返回 任何 内 容 : 


Var collections; 


if(!collections)collections={}; 


collections.sets={}; 


(function namespace(){//…. 这 里 省 略 很 多 代码 …. 


// 将 共用 API 导 出 到 上 面 创建 的 命名 空间 对 象 上 


Collections.sets.AbstractSet=AbstractSet 


collections.sets.NotSet=NotSet;//..... 


// 导 出 的 操作 已 经 执行 了 ， 这 里 不 需要 再 写 return 语 句 了 


}()); 


有 些 框架 实现 了 模块 加 载 功能 ， 其 中 包括 其 他 一 些 导出 模块 API 的 方 

法 。 比 如 ， 使 用 provides0 函 数 来 注册 其 API， 提 供 exports 对 象 莹 - 用 以 
存储 模块 API。 由 于 JavaScript 目 前 还 不 具备 模块 管理 的 能 力 ， 因 此 应 当 
根据 所 使 用 的 框架 和 工具 包 来 选择 合适 的 模块 创建 和 导出 API 的 方式 。 


[1 强 / 弱 类 型 是 指 类 型 检查 的 严格 程度 ， 为 所 有 变量 指定 数据 类 型 称 
为 " 强 类 型 *。 


[2]. 比 如 传统 类 的 封装 、 继 承 和 多 态 。 

[3] 参照 : http:/zh.wikipedia.org/zh/ 工 厂 方法 。 

[4]. 两 个 实 部 相等 ， 虚 部 互 为 相反 数 的 复数 互 为 共 加 复 数 。 
[5] 参照 4.3 节 。 


[6] 这 个 例子 的 作者 是 Joshua Bloch， 最 初 是 基于 Java 写 的 ， 可 以 在 这 里 
查看 到 : http://jcp.org/aboutJava/communityprocess/jsr/tiger/enum.html ° 


[7] 这 里 所 说 的 起 始点 相同 束 是 下 边界 相同 。 


[8].apply0 的 第 二 个 参数 是 一 个 数组 ， 数 组 成 员 束 是 参数 列表 。 


[9] 可 参照 Frich Gamma et al 所 车 《Design Patterns》 和 Joshua Bloch 所 著 
《Effective Java》。 


[10] 作者 这 里 的 表述 稍 有 含混 ， 作 者 的 意思 应 该 是 “Set 子 类 的 实例 也 是 
Set 的 实例 >"， 而 不 是 “ 子 类 是 Set 的 实例 ”。 


[1] 这 里 指 的 十 实现 类 的 不 同 的 定制 版 本 的 解决 办 法 ， 更 直接 地 讲 束 是 
实现 多 态 的 方法 。 


[12]. 这 里 指 的 是 “对 象 id” 属 性 。 


[13].Monkey-patching 是 指 修改 现 有 对 象 的 原型 ， 在 JavaScript 中 ， 修 改 
对 象 的 原型 就 相当 于 修改 了 实例 化 它 的 类 。 


[14]. 使 用 in 运算 符 可 以 对 对 象 成 员 进 行 届 历 ， 包 括 对 原型 对 象 中 的 非 内 
置 成 员 进 行 裔 历 。 


[15]. 作 者 这 里 的 表述 是 围绕 “模块 是 一 个 可 重用 的 代码 片段 ”这 一 观念 
的 ， 不 论 息 从 代码 语法 结构 上 解 耦 ， 还 是 将 代码 拆 分 至 不 同 的 文件 
中 ， 只 要 用 某 种 方法 将 代码 "分 离 ”， 束 认为 是 一 个 模块 ， 因 此 作者 说 
任何 代码 都 可 以 处 理 为 一 个 模块 。 


[16] 这 里 的 “原始 上 下 文 ?是 指 调用 模块 时 所 在 的 上 下 文 ， 可 能 处 在 一 个 
很 深 的 闭 包 当 中 ， 但 这 个 模块 的 逻辑 不 应 该 影响 到 其 他 的 上 下 文 特别 
征 全 局 上 下 文 。 

[17]. 这 里 作者 所 说 的 “它们 ” 古 指 构造 函数 创建 的 新 实例 。 


[18]. 使 用 构造 画 数 和 模块 函数 来 实现 私有 成 员 的 原理 是 一 模 一 样 的 ， 
只 是 调用 的 方式 不 一 样 。 


[19] 可 以 参照 CommonJS 规 范 http:/commonjs.org 。 


第 10 章 ”正则 表达 式 的 模式 匹配 


正则 表达 式 (regular expression) 是 一 个 描述 字符 模式 的 对 象 。 
JavaScript 的 RegExp 类 表示 正则 表达 式 ，String 和 RegExp 都 定义 了 方 

法 ， 后 者 使 用 正则 表达 式 进 行 强 大 的 模式 匹配 和 文本 检索 与 奉 换 功 
能 。JavaScript 的 正则 表达 陈 语 法 是 Perl15 的 正则 表达 式 语法 的 大 型 子 
集 ， 所 以 对 于 有 Pen 编程 经 验 的 程序 员 来 说 ， 学 习 JavaScript 中 的 正则 表 


达 式 纠 是 小 菜 一 碟 。 


本 章 首 先 介绍 用 以 描述 “文本 模式 ”的 正则 表达 式 语 法 。 随 后 讲解 了 使 
用 正则 表达 式 的 String 和 RegExp 方 法 。 


10.1 正则 表达 式 的 定义 


JavaScript 中 的 正则 表达 式 用 RegExp 对 象 表示 ， 可 以 使 用 RegExpO 构 造 

函数 来 创建 RegExp 对 象 ， 不 过 RegExp 对 象 更 多 的 是 通过 一 种 特殊 的 直 

接 量 语法 来 创建 。 就 像 通过 引号 包 庄 字符 的 方式 来 定义 字符 串 直 接 量 

正则 表达 式 直接 量 定义 为 包含 在 一 对 斜 枉 (/) 之 间 的 字符 ， 例 
0D: 


var pattern=/s$/; 


运行 这 段 代码 创建 一 个 新 的 RegExp 对 象 ， 并 将 它 赋 值 给 变量 pattern 。 
这 个 特殊 的 RegExp 对 象 用 来 匹配 所 有 以 字母 "s" 结 尾 的 字符 串 。 用 构造 
函数 RegExp(0 也 可 以 定义 个 与 之 等 价 的 正则 表达 式 ， 代 码 如 下 : 


var pattern=new RegExp("s$"); 


RegExp 直 接 量 和 对 和 象 的 创建 


就 像 字 符 串 和 数字 一 样 ， 程 序 中 每 个 取 值 相同 的 原始 类 型 直接 量 均 表 
示 相 同 的 值 ， 这 是 显而易见 的 。 程 序 运行 时 每 次 遇 到 对 象 直接 量 ( 初 


台 化 表达 式 ) 诸如 {和 吕 的 时 候 都 会 创建 新 对 象 。 比 如 ， 如 果 在 循环 体 
中 写 var a=[]， 则 每 次 志 历 都 会 创建 一 个 新 的 空 数 组 。 


正则 表达 式 直接 量 则 与 此 不 同 ，ECMAScript 3 规范 规定 ， 一 个 正则 表 
达 式 直接 量 会 在 执行 到 它 时 转换 为 一 个 RegExp 对 象 ， 同 一 段 代 码 所 表 
示 正 则 表达 式 直 接 量 的 每 次 运算 都 返回 同一 个 对 象 。ECMAScript 5 规 
范 则 做 了 相反 的 规定 ， 同 一 段 代码 所 表示 的 正则 表达 式 直 接 量 的 每 次 
运算 都 返回 新 对 象 。IE 一 直 都 是 按照 ECMAScript 5 规范 实现 的 ， 多 数 
最 新 版 本 的 浏览 器 也 开始 遵循 ECMAScript 5， 尽 管 目 前 该 标准 并 未 全 
面 广泛 推行 名-。 


正则 表达 式 的 模式 规则 是 由 一 个 字符 序列 组 成 的 。 包 括 所 有 字母 和 数 
字 在 内 ， 大 多 数 的 字符 都 是 按照 直接 量 仅 描 述 待 匹配 的 字符 的 。 如 此 
说 来 ， 正则 表达 式 /java/ 可 以 匹配 任何 包含 "java" 子 串 的 字符 串 。 除 此 之 
外 ， 正 则 表达 式 中 还 有 其 他 具有 特殊 语义 的 字符 ， 这 些 字 符 并 不 按照 
字面 含义 进行 匹配 。 比 如 ， 正 则 表达 式 /s$/ 包 含 两 个 字符 ， 第 一 个 字 

符 "s" 按 照 字 面 售 义 匹配 ， 第 二 个 字符 $ 是 一 个 具有 特殊 语义 的 元 字符 ， 
a 
9 字符 串 。 


接 下 来 的 几 下 会 进一步 讲解 JavaScript 正 则 表达 式 中 使 用 的 各 种 字符 和 


元 子 付 


10.11 直接 量 字 符 


正如 上 文 提 到 的 ， 正 则 表达 式 中 的 所 有 字母 和 数字 都 生 按 照 字 面 售 义 
进行 匹配 的 。JavaScript 正 则 表达 式 语 法 也 文 持 非 字母 的 字符 匹配 ， 这 
些 字符 需要 通过 反 斜 线 (\) 作为 前 级 进行 转 义 。 比 如 ， 转 义 字符 Wn 用 
以 匹配 换行 符 。 表 10-1 中 列 出 了 这 些 转 义 字符 。 


表 10-1， 正则 表达 式 中 的 直接 量 字符 


字符 匹配 

字母 和 数字 字符 。 自身 

\0 NUL 字符 (wu0000) 

vt 制 表 符 (\u0009) 

换行 答 (\u000A) 

Vy 冬 直 制 表 符 【000B) 

换 页 符 (\w000C) 

Y 回 车 符 (\w000D) 

Wn 由 十 六 进 制 数 nn 指 定 的 拉丁 字符 ， 例 如 ，\x0A 等 价 于 \n 
WO 由 十 六 进 制 数 xxxx 指 定 的 Unicode 字 符 ， 例 如 Nu0009 等 价 于 Mt 
\X 控制 字符 AX， 例如 AcJ 等 价 于 换行 符 \n 


在 正则 表达 式 中 ， 许 多 标点 从 号 具有 特殊 合 义 ， 它 们 是 : 
A$.*+9=1: 1 VO 


在 接 下 来 的 几 节 里 ， 我 们 将 学 习 这 些 符号 的 含义 。 某 些 符号 只 有 在 正 
则 表达 式 的 某 些 上 下 文中 才 具 有 某 种 特殊 舍 义 ， 在 其 他 上 下 文中 则 被 
当成 直接 量 处 理 。 然 而 ， 如 采 想 在 正则 表达 式 中 使 用 这 些 字 符 的 直接 
量 进 行 匹 配 ， 则 必须 使 用 前 缀 \， 这 有 坪 一 条 通行 规则 。 其 他 标点 符号 

ee 
匹 o 


如 采 不 记得 哪些 标点 符号 需要 反 斜 线 转 义 ， 可 以 在 每 个 标点 符号 前 都 
加 上 反 斜 线 。 另 外 需要 注意 ， 许 多 字母 和 数字 在 有 反 斜 线 做 前 缀 时 也 
有 特殊 合 义 ， 所 以 对 于 想 按照 直接 量 进行 匹配 的 字母 和 数字 ， 尽 量 不 
要 用 反 斜 线 对 其 转 义 。 当 然 ， 要 想 在 正则 表达 式 中 按照 直接 量 匹配 反 
和 斜 线 本 映 ， 则 必须 使 用 反 冬 线 将 其 园 义 。 比 如 ， 正 则 表达 式 “AV”*” 用 以 
匹配 任何 包含 瓜 斜 线 的 字符 串 。 


10.1.2 ”字符 类 


将 直接 量 字 符 单 独 放 进 方 括号 内 就 组 成 了 字符 类 (character class) 。 一 
个 字符 类 可 以 匹配 它 所 包含 的 任意 字符 。 因 此 ， 正 则 表达 式 /[abc]/ 就 和 
字母 "a"、"b"、"c" 中 的 任意 一 个 都 匹配 。 另 外 ， 可 以 通过 “A” 符 号 来 定 
义 否 定 字符 类 ， 它 匹配 所 有 不 包含 在 方 括号 内 的 字符 。 定 义 否 定 字 符 
类 时 ， 将 一 个 “符号 作为 左 方 括 号 内 的 第 一 个 字符 。 正 则 表达 

式 /[^abc]/ 匹 配 的 是 "a"、"b"、"c" 之 外 的 所 有 字符 。 字 符 类 可 以 使 用 连 
字符 来 表示 字符 范围 。 要 匹配 拉丁 字母 表 中 的 小 写字 母 ， 可 以 使 用 /[a- 
Zz]/， 要 匹配 拉丁 字母 表 中 任何 字母 和 数字 ， 则 使 用 /[a-zA-Z0-9]/。 


由 于 某 些 字符 类 非 常常 用 ， 因 此 在 JavaScript 的 正则 表达 式 语法 中 ， 使 
用 了 这 些 特殊 字符 的 转 义 字符 来 表示 它们 。 例 如 ，\s 匹 配 的 是 空格 符 、 
制 表 符 和 其 他 Unicode 空 白 符 ，\S 匹 配 的 是 非 Unicode 空 白 符 的 字符 。 表 
10-2 列 出 了 这 些 字符 ， 并 且 总 结 了 字符 类 的 语法 (注意 ， 有 些 字符 类 转 
义 字 符 只 能 匹配 ASCII 字 符 ， 还 没有 扩展 到 可 以 处 理 Unicode 字 符 ， 但 
可 以 通过 十 六 进 制 表示 方法 来 显 式 定义 Unicode 字 符 类 ， 例 

如 ，/[\u0400-\u04FF]/ 用 以 匹配 所 有 的 Cyrillic 字 符 B31) 


表 10-2; 正则 表达 式 的 字符 类 

字符 匹配 

[,,,] 方 括号 内 的 任意 字符 

[^,,.] 不 在 方 括号 内 的 任意 字符 

除 换行 符 和 其 他 Unicode 行 终止 符 之 外 的 任意 字符 
\w ”任何 ASCII 字 符 组 成 的 单词 ， 等 价 于 [a-zA-70-9] 
\W 任何 不 是 ASCII 字 符 组 成 的 单词 ， 等 价 于 [^a-zA-70-9] 
\5 任何 Unicode 空 日 符 

\5 任何 非 Unicode 空 白 符 的 字符 ， 注 意 \Ww 和 \5 不 同 
\d ”任何 ASCII 数 字 ， 等 价 于 [0-9] 

\D -除了 ASCII 数 字 之 外 的 任何 字符 ， 等 价 于 [^0-9] 
[\b] ”起 格 直接 量 (特例 ) 


注意 ， 在 方 括号 之 内 也 可 以 写 这 些 特殊 转 义 字符 。 比 如 ， 由 于 \s 匹 配 所 
有 的 空白 字符 ，\d 匹 配 的 是 所 有 数字 ， 因 此 /fs\d]/ 就 匹配 任意 空白 符 或 
者 数字 。 注 意 ， 这 里 有 一 个 特例 。 下 面 我 们 将 会 看 到 转 义 符 b 具 有 的 特 
殊 含义 ， 当 用 在 字符 类 中 时 ， 它 表示 的 是 退 格 符 ， 所 以 要 在 正则 表达 
0 只 需要 使 用 具有 一 个 元 素 的 字符 

类 /[\b]/。 


10.1.3 ”重复 


用 刚刚 学 过 的 正则 表达 式 的 语法 ， 可 以 把 两 位 数 描述 成 Md/， 四 位 数 
描述 成 Ad\d\d\d/。 但 到 目前 为 止 ， 还 没有 一 种 方法 可 以 用 来 描述 任意 多 
位 的 数字 ， 或 者 描述 由 三 个 字母 和 一 个 数字 构成 的 字符 串 。 这 些 正则 
0 重复 出 
册 次 数 ”。 


我 们 在 正则 模式 之 后 跟随 用 以 指定 字符 重复 的 标记 。 由 于 某 些 重复 种 
类 非常 常用 ， 因 此 就 有 一 些 专门 用 于 表示 这 种 情况 的 特殊 字符 。 例 
如 , “+” 用 以 匹配 前 一 个 模式 的 一 个 或 多 个 副本 。 表 10-3 总 结 了 这 些 表 
示 重 复 的 正则 语法 。 

表 10-3， 正则 表达 式 的 重复 字符 语法 

字符 含义 

{n,m 匹配 前 一 项 至 少 n 次 ， 但 不 能 超过 m 次 

{n,】 匹配 前 一 项 np 次 或 者 更 多 次 

{ 从 匹配 前 一 项 "次 

? 匹配 前 一 项 0 次 或 者 1 次 ， 也 就 是 说 前 一 项 是 可 选 的 ， 等 价 于 {0,1} 

+ 匹配 前 一 项 1 次 或 多 次 ， 等 价 于 {1,} 

* 匹配 前 一 项 0 次 或 多 次 ， 守 价 于 {0,} 


/\d{f2, 4}/// 匹 配 2~4 个 数字 


/A\w{3}\d?/// 精 确 匹 配 三 个 单词 和 一 个 可 选 的 数字 


八 stjava\s+/// 匹 配 前 后 带 有 一 个 或 多 个 空格 的 字符 串 "java" 


/A[^(]*/// 匹 配 一 个 或 多 个 非 左 括号 的 字符 


在 使 用 “*” 和 “?” 时 要 注意 ， 由 于 这 些 字符 可 能 匹配 0 个 字符 ， 因 此 它们 
允许 什么 部 不 匹配 。 例 如 ， 正 则 表达 式 /a*/ 实 际 上 与 子 符 串 "bbbb" 匹 
配 ， 因 为 这 个 字符 串 合 有 0 个 a。 


非 贫 梦 的 重复 


表 10-3 中 列 出 的 匹配 重复 字符 是 尽 可 能 多 地 匹配 ， 而 且 人 允许 后 续 的 正则 
表达 式 继续 匹配 。 因 此 ， 我 们 称 之 为 “ 贪 禁 的 ”匹配 。 我 们 同样 可 以 使 
We a 。 只 须 在 竺 匹配 的 字符 后 跟随 一 个 问号 
即 可 : “#?2 或 <{15}?2”。 比 如 ， 正 则 表达 式 /a+/ 可 以 匹配 一 
个 或 多 个 连 纪 让 的 字母 。 当 使 用 "aaa" 作 为 匹配 字符 串 上 时， 正则 表达 式 会 
匹配 它 的 三 个 字符 。 但 是 /a+?/ 也 可 以 匹配 一 个 或 多 个 连续 字母 a， 但 它 
。 我 们 同样 将 "aaa" 作 为 匹配 字符 串 ， 但 后 一 个 模式 
只 能 = 


使 用 非 贫 梦 的 匹配 模式 所 得 到 的 结 采 可 能 和 期 望 并 不 一 致 。 考 虑 以 下 
正则 表达 式 /atb/， 它 可 以 匹配 一 个 或 多 个 a， 以 及 一 个 b。 当 使 

用 "aaab" 作 为 匹配 字符 串 时 ， 它 会 匹配 整个 字符 串 。 现 在 再 试 一 下 非 贫 
梦 匹 配 的 版 本 /at+?b/， 它 匹配 尽 可 能 少 的 a 和 一 个 b。 当 用 它 来 匹 

配 "aaab" 时 ， 你 期 鹿 它 能 匹配 一 个 a 和 最 后 一 个 b。 但 实际 上 ， 这 个 模式 
却 匹配 了 整个 字符 串 ， 和 该 模式 的 信 梦 匹配 一 模 一 样 。 这 是 因为 正则 
表达 式 的 模式 匹配 总 是 会 寻找 字符 串 中 第 一 个 可 能 匹配 的 位 置 。 由 于 
ee 因此 在 这 里 不 考虑 它 的 子 串 


10.1.4 选择 、 分 组 和 引用 


正则 表达 式 的 语法 还 包括 指定 选择 项 、 子 表达 式 分 组 和 引用 前 一 子 表 
达 式 的 特殊 字符 。 字 人 符 中 "用 于 分 隅 供 选 择 的 字符 。 例 如 ，/ablcdleg 可 以 
匹配 字符 串 "ab"， 也 可 以 匹配 字符 串 "cd"， 还 可 以 匹配 字符 

串 "ef" 。 Adf3jl[az]{4}/ 匹 配 的 是 三 位 数字 或 者 四 个 小 写 字母 。 


注意 ， 选 择 项 的 尝试 匹配 次 序 是 从 左 到 右 ， 直 到 发 现 了 匹配 项 。 如 果 
左边 的 选择 项 匹配 ， 就 忽略 右边 的 匹配 项 ， 即 使 它 产 生 更 好 的 匹配 。 
因此 ， 当 正 则 表达 式 /alab/ 匹 配 字符 串 "ab" 时 ， 它 只 能 匹配 第 一 个 字 
符 。 


正则 表达 式 中 的 圆 括 号 有 多 种 作用 。 一 个 作 用 古 把 中 独 的 项 组 合成 于 
表达 式 ， 以 便 可 以 像 处 理 一 个 独立 的 单元 那样 用 “|”、 “+2? 或 

着 “2 等 来 对 里 元 由 的 项 进行 处 理 。 例如 ， havdsatpb2/ 可 以 匹配 字符 
串 "java"， 其 后 可 以 有 "script" 也 可 以 没有 。/(ablcd)+lef/ 可 以 匹配 字符 
串 "ef"， 也 可 以 匹配 字符 串 "ab" 或 "cd" 的 一 次 或 多 次 重复 。 


在 正则 表达 式 中 ， 圆 括号 的 男 一 个 作用 是 在 完整 的 模式 中 定义 子 模 
式 。 当 一 个 正则 表达 式 成 功 地 和 目标 字符 串 相 匹配 时 ， 可 以 从 目标 串 
中 抽出 和 圆 括 号 中 的 子 模式 相 匹 配 的 部 分 (我 们 将 在 本 章 随 后 的 部 分 
中 看 到 如 何 取得 这 些 匹配 的 子 串 ) 。 例 如 ， 假 定 我 们 正在 检索 的 模式 
是 一 个 或 多 个 小 写字 母后 面 跟随 了 一 位 或 多 位 数字 ， 则 可 以 使 用 模 
式 /[a-z]+\d+/。 但 假定 我 们 真正 关心 的 是 每 个 匹配 尾部 的 数字 ， 那 么 如 
果 将 模式 的 数字 部 分 放 在 括号 中 (/[a-z]+(d+)/)， 就 可 以 从 检索 到 的 匹配 
中 抽取 数字 了 ， 之 后 我 们 会 有 详尽 的 解释 。 


带 圆 括号 的 表达 式 的 男 一 个 用 途 是 允许 在 同一 正则 表达 式 的 后 部 引用 
前 面 的 于 表达 式 。 这 是 通过 在 字符 “后 加 一 位 或 多 位 数 子 来 实现 的 。 
这 个 数字 指 EE 
引用 的 是 第 一 个 带 圆 括号 的 子 表达 式 ，\3 引 用 的 是 第 三 个 市 圆 括 号 的 子 
表达 式 。 注 意 ， 因为 子 才 达 式 可 以 宽 塞 另 一 个 子 表达 式 ， 所 以 它 的 位 
置 古 参与 计数 的 左 括 号 的 位 置 。 例 如 ， 在 下 面 的 正则 表达 式 中 ， 岂 舍 
的 子 表 达 式 ([Ss]jcript) 可 以 用 \2 来 指 代 : 


/([Jjlava([Sslcript)?)\sis\s(fun\w*)/ 


对 正则 表达 式 中 前 一 个 子 表 达 式 的 引用 ， 并 不 是 指 对 子 表达 式 模式 的 
引用 ， 而 指 的 是 与 那个 模式 相 匹配 的 文本 的 引用 。 这 样 ， 引 用 可 以 用 
请 全 即 一 个 字符 串 各 个 单独 部 分 包含 的 是 完全 相同 的 字 

。 例 如， 下 面 的 正则 表达 式 匹 配 的 束 是 位 于 单 引 号 或 双 引 号 之 内 的 0 
个 或 多 个 字符 。 但 是 ， 它 并 不 要 求 左 侧 和 右 则 的 引号 相配 ( 即 ” 加 入 
的 两 个 引号 都 是 单 引 号 或 都 是 双 引 号 ) : 


/A['"][^'"]*['"]/ 


如 朱 要 匹配 左 侧 和 右 侧 的 引号 ， 可 以 使 用 如 下 的 引用 : 


/A(['"])[^'"]*\1/ 


匹配 的 是 第 一 个 市 圆 括号 的 子 表 达 式 所 匹配 的 模式 。 在 这 个 例子 中 ， 
存在 这 样 一 条 约束 ， 那 就是 左 侧 的 引号 必须 和 右 侧 的 引号 相 匹 配 。 正 
则 表达 式 .不 允许 用 双 3 引 号 括 起 的 内 容 中 有 单 引 号 ， 有 反之 亦 然 。 不 能 在 
字符 类 中 使 用 这 种 引用 ， 所 以 下 面 的 写法 是 非法 的 : 


A([L'"])I^N1*\1/ 


在 本 章 随 后 儿 闻 中 ， 我 们 会 看 到 一 种 对 带 圆 括号 的 子 表达 式 的 引用 ， 
这 和 是 正则 表达 式 的 检索 和 替换 操作 的 强大 特性 之 一 。 


同样 ， 在 正则 表达 式 中 不 用 创建 带 数 字 编 码 的 引用 ， 也 可 以 对 子 表达 
式 进 行 分 组 。 它 不 是 以 “和 和 9 中 "进行 分 组 ， 而 是 以 “(?:” 和 9 中" 来 进行 分 
组 ， 比 如 ， 考 虑 下 面 这 个 模式 : 


/([Jjlava(?:[Ss]cript)?)\sis\s(fun\w*)/ 


这 里 ， 子 表达 式 (?:[Ss]cripb 仅 仅 用 于 分 组 ， 因 此 复制 符号 "?" 可 以 应 用 
到 各 个 分 组 。 这 种 改进 的 圆 括号 并 不 生成 引用 ， 所 以 在 这 个 正则 表达 
式 中 ,，\2 引 用 了 与 (fom\W*) 匹 配 的 文本 。 


表 10-4 对 正则 表达 式 的 选择 、 分 组 和 引用 运算 符 做 了 总 结 。 


表 10-4; 正则 表达 式 的 选择 、 分 组 和 引用 字符 

字符 含义 

| 选择， 匹配 的 是 该 符号 左边 的 子 表达 式 或 右边 的 子 表达 式 

(,,,) 组 合 ， 将 几 个 项 组 合 为 一 个 单元 ， 这 个 单元 可 通过 * 、 “+ 、 2? 和 了 
二 加 以 修饰 ， 而 且 可 以 记 住 和 这 个 组 合 相 匹配 的 字符 串 以 供 此 后 的 引用 使 用 

(3;,,,) 只 组 合 ， 把 项 组 合 到 一 个 单元 ， 但 不 记忆 与 该 组 相 匹配 的 字符 


\n ”和 第 n 个 分 组 第 一 次 匹配 的 字符 相 匹 配 ， 组 是 圆 括号 中 的 子 表达 式 (也 有 可 能 是 风 
套 的 ) ， 组 索引 是 从 左 到 右 的 左 括号 数 ，“(2:” 形 式 的 分 组 不 编码 


10.1.5 ”指定 匹配 位 置 


正如 前 面 所 介绍 的 ， 正 则 表达 式 中 的 多 个 元 素 才 能 够 匹配 字符 串 的 一 
个 字符 。 例 如 ，\s 匹 配 的 只 是 一 个 空白 符 。 还 有 一 些 正 则 表达 式 的 元 素 
匹配 的 是 字符 之 间 的 位 置 ， 而 不 是 实际 的 字符 。 例 如 ，\b 匹 配 一 个 单词 
的 边界 ， 即 位 于 Ww (ASCII 单 词 ) 字符 和 \W ( 非 ASCII 单 词 ) 之 间 的 边 
界 ， 或 位 于 一 个 ASCII 单 词 与 字符 串 的 开始 或 结尾 之 间 的 边界 [和 旨 。 像 \b 
这 样 的 元 素 不 匹配 某 个 可 见 的 字符 ， 它 们 指定 匹配 发 生 的 合法 位 置 。 
有 时 我 们 称 这 些 元 素 为 正则 表达 式 的 锚 ， 因 为 它们 将 模式 定位 在 搜索 
字符 串 的 特定 位 置 上 。 最 常用 的 销 元 素 是 ^， 它 用 来 匹配 字符 串 的 开 
始 ， 锚 元 素 $ 用 以 匹配 字符 串 的 结束 。 


例如 ， 要 匹配 单词 "JavaScript"， 可 以 使 用 正则 表达 式 /^JavaScript$/。 如 
果 想 匹配 "Java" 这 个 单词 本 身 (不 像 在 "JavaScript" 中 作为 单词 的 前 
缀 ) ， 可 以 价 用 正则 表达 式 As\Javas/， 可 以 匹配 前 后 都 有 空格 的 单 
词 ' Javan 。 但 是 这 样 做 有 两 个 问题 ， 第 一 ， 如 果 "Java" 2 
开始 或 者 结尾 ， 束 匹 配 不 成 功 ， 除 非 开 始 和 结尾 处 各 有 一 个 空格 。 

二 个 问题 是 ， 当 找到 了 与 之 匹配 的 字符 串 时 ， 它 反 加 的 匹配 字符 囊 的 
前 端 和 后 端 都 有 空 x3 格 ， 这 并 不 是 我 们 想 要 的 。 因 此 我 们 使 用 单词 的 边 
界 \b 来 代替 真正 的 空格 符 \s 进 行 匹 配 (或 定位 ) 。 这 样 正则 表达 式 就 写 
成 了 AbjJavab/。 元 系 \B 将 把 匹配 的 锁 点 定位 在 不 是 单词 的 边界 之 处 。 


此 ， 正 则 表达 式 AB[Ss]cript 与 JavaScript" 和 "postscript" 匹 配 ， 但 不 
与 "Script" 和 "Scripting" 匹 配 。 


任意 正则 表达 式 都 可 以 作为 锁 点 条 件 。 如 果 在 符号 “(?=”* 和 “)* 之 间 加 入 
一 个 表达 式 ， 它 了 驶 是 一 个 先行 断言 ， 用 以 说 明 圆 括号 内 的 表达 式 必 须 
正确 匹配 中， 但 并 不 是 真正 意义 上 的 匹配 。 比 如 ， 要 匹配 一 种 常用 的 
程序 设计 语言 的 名 字 ， 但 只 在 其 后 有 冒号 时 才 匹 配 ， 可 以 使 

用 /四 ]ava([Ss]cripb?(?=\)/。 这 个 正则 表达 式 可 以 匹配 "JavaScript:The 
Definitive Guide" 中 的 "JavaScript"， 但 是 不 能 匹配 "Java in a Nutshell" 中 
的 "Java"， 因 为 它 后 面 没 有 冒号 。 


融 有 “(?52 的 断言 是 负 回 移行 断言 ， 用 以 指定 接 下 来 的 字符 都 不 必 匹 

配 。 例 如 ，/Mava(?!Scripb([A-ZJ\w*)/ 可 以 匹配 "Java" 后 跟随 一 个 大 写字 
母 和 任意 多 个 ASCII 单 词 ， 但 Java 后 面 不 能 跟随 "Script"。 它 可 以 匹 

配 "JavaBeans"， 但 不 能 匹配 "Javanese"; 它 可 以 匹配 "JavaScript"， 但 不 
能 匹配 "JavaScripter" 。 


表 10-5 忌 结 了 正则 表达 式 中 的 销 。 


表 10-5; 正则 表达 式 中 的 销 字符 


字符 含义 
人 匹配 字符 串 的 开头 ， 在 多 行 检索 中 ， 匹 配 一 行 的 开头 
$ 匹配 字符 串 的 结尾 ， 在 多 行 检索 中 ， 匹 配 一 行 的 结尾 


\b ”匹配 一 个 单词 的 边界 ， 侧 言 之 ， 就 是 位 于 字符 \w 和 \W 之 间 的 位 置 ， 或 位 于 字符 \w 
和 字符 串 的 开头 或 者 结尾 之 间 的 位 置 (但 需要 注意 ，[\b] 匹 配 的 是 退 格 符 ) 

\B 匹配 非 单词 边界 的 位 置 

(?=p) 和 零 宽 正 问 先 行 断言 ， 要 求 接 下 来 的 字符 都 与 5 匹配 ， 但 不 能 包括 匹配 p 的 那些 字符 

(?lp) 零 宽 负 问 先行 断言 ， 要 求 接 下 来 的 字符 不 与 p 匹 配 


10.1.6 ”修饰 符 


正则 表达 式 中 的 语法 还 有 最 后 一 个 知识 点 ， 即 正则 表达 式 的 修饰 符 ， 
用 以 说 明 高 级 匹配 模式 的 规则 。 和 之 前 讨论 的 正则 表达 式 语法 不 同 ， 
修饰 符 是 放 在 “/” 符 号 之 外 的 ， 也 就 是 说 ， 它 们 不 是 出 现在 两 条 斜 线 之 
间 ， 而 是 第 二 条 和 斜 线 之 后 。JavaScript 支 持 三 个 修饰 任 ， 修 饰 人 符 "i" 用 以 
说 明 模 式 匹 配 是 不 区 分 大 小 写 的 。 修 饰 符 "g" 说 明 模 式 匹 配 应 该 是 全 局 
的 ， 也 就 是 说 ， 应 该 找 出 被 检索 字符 串 中 所 有 的 匹配 。 修 饰 符 "m" 用 以 
在 多 行 模式 中 执行 匹配 ， 在 这 种 模式 下 ， 如 果 符 检索 的 字符 串 包 含 多 
行 ， 那 么 和 ^ 和 $ 销 字符 除了 匹配 整个 字符 串 的 开始 和 结尾 之 外 ， 还 能 匹 
配 每 行 的 开始 和 结尾 。 比 如 正则 表达 式 /java$/im 可 以 匹配 "java" 也 可 以 
匹配 "JavaNnis fun"。 


这 些 修 饰 符 可 以 任意 组 合 ， 比 如 ， 要 想 不 区 分 大 小 写 匹 配 字 符 串 中 的 
第 一 个 单词 "java”("Java" 或 "JAVA" 等 ) ， 可 以 使 用 不 区 分 大 小 写 的 修 
饰 符 来 定义 正则 表达 式 和 bjava\b/i。 要 想 匹 配 字 符 串 中 所 有 的 单词 ， 则 
需要 添加 修饰 符 g: Nbjava\b/gi。 


表 10-6 对 正则 表达 式 的 修 吧 符 做 了 总 结 ， 注 意 ， 在 本 章 的 后 续 内 容 中 还 
会 介绍 在 String 和 RegExp 的 方法 中 使 用 修饰 符 g 的 示例 。 


表 10-6， 正则 表达 式 惧 饰 符 

字符 含义 

i 执行 不 区 分 大 小 写 的 匹配 

g 执行 一 个 全 局 匹配 ， 向 言 之 ， 即 找到 所 有 的 匹 瑟 ， 而 不 是 在 找到 第 一 个 之 后 就 停止 
Wm 多 行 匹配 模式 ，^ 匹 配 一 行 的 开头 和 字符 串 的 开头 ，$ 匹 配 行 的 结束 和 字符 串 的 结束 


10.2 ”用 于 模式 匹配 的 String 方 法 


到 目前 为 止 ， 尽管 本 章 已 经 讨论 过 创建 正则 表达 式 的 语法 ， 但 还 没有 
笑 试 过 如 何在 JavaScript 代 人 码 中 使 用 这 些 正 则 表达 式 。 本 市 将 讨论 String 
对 象 的 一 些 用 以 执行 正则 表达 式 模 式 匹 配 和 检索 蔡 换 操作 的 方法 ， 后 
续 几 节 还 会 继续 讨论 如 何 使 用 JavaScript 正 则 表达 式 的 模式 匹配 ， 不 过 
将 侧重 于 RegExp 对 象 和 它 的 方法 及 属性 。 注 意 ， 下 面 的 讨论 只 是 与 正 


则 表达 式 相 关 的 方法 和 属性 的 概述 。 同 样 ， 可 以 在 本 书 第 三 部 分 中 碍 
找到 完整 的 介绍 。 


String 文 持 4 种 使 用 正则 表达 式 的 方法 。 最 简单 的 是 search0。 它 的 参数 
是 一 个 正则 表达 式 ， 返 回 第 一 个 与 之 匹配 的 子 串 的 起 始 位 置 ， 如 有 果 找 
不 到 匹配 的 子 串 ， 它 将 返回 -1。 比 如 ， 下 面 的 调用 返回 值 为 4; 


"Javascript".search(/script/i),; 


如 果 searchO 的 参数 不 是 正则 表达 式 ， 则 首先 会 通过 RegExp 构 造 函 数 将 
它 转 换 成 正则 表达 式 ，search() 方 法 不 支持 全 局 检索 ， 因 为 它 名 上 略 正则 
表达 式 参 数 中 的 修饰 伯 g 。 


replace() 方 法 用 以 执行 检索 与 替换 操作 。 其 中 第 一 个 参数 是 一 个 正则 表 
达 式 ， 第 二 个 参数 是 要 进行 蔡 换 的 字符 串 。 这 个 方法 会 对 调用 它 的 字 

符 串 进行 检索 ， 使 用 指定 的 模式 来 匹配 。 如 果 正 则 表达 式 中 设置 了 修 

饥 符 g， 那 么 源 字符 串 中 所 有 与 模式 匹配 的 子 串 都 将 蔡 换 成 第 二 个 参数 
指定 的 字符 串 ;， 如果 不 囊 修饰 符 g， 则 只 替换 所 匹配 的 第 一 个 子囊 。 如 
果 replace() 的 第 一 个 参数 是 字符 串 而 不 是 正则 表达 式 ， 则 replace() 将 直 

接 搜 索 这 个 字符 串 ， 而 不 是 像 search() 一 样 首 先 通过 RegExp() 将 它 转换 

为 正则 表达 式 。 比 如 ， 可 以 使 用 下 面 的 方法 ， 利 用 replace() 将 文本 中 的 
所 有 javascript (不 区 分 大 小 写 ) 统一 替换 为 "JavaScript": 


// 将 所 有 不 区 分 大 小 写 的 javascript 都 替换 成 大 小 写 正 确 的 JavaScript 


text.replace(/javascript/gi,"Javascript"); 


但 replace0 的 功能 远 不 止 这 些 。 回 忆 一 下 前 文 所 提 到 的 ， 正 则 表达 式 中 
使 用 圆 括号 括 起 来 的 子 表达 式 是 带 有 从 左 到 右 的 索引 编号 的 ， 而 且 正 
则 表达 式 会 记忆 与 每 个 子 表 达 式 匹配 的 文本 。 如 果 在 巷 换 字符 串 中 出 
现 了 $ 加 数 子 ， 那 么 replace() 将 用 与 指定 的 于 表达 式 相 匹 配 的 文本 来 巷 
换 这 两 个 字符 。 这 有 是 一 个 非常 有 用 的 特性 。 比 如 ， 可 以 用 它 将 一 个 字 
符 各 中 的 英文 引号 殖 换 为 中 文 半角 引号 : 


// 一 段 引 用 文本 起 始 于 引号 ， 结 束 于 引 二 


// 中 间 的 内 容 区 域 不 能 包含 引号 


var quote=/"([^"]*)"/g;V/ 用 中 文 半角 引号 替换 英文 引号 ， 同 时 要 保持 引号 之 间 的 内 容 (存储 在 $1 中 ) 没有 被 
修改 


text.replace(quote, '“$1”"'); 


replace() 方 法 还 有 一 些 其 他 重要 特性 ， 这 些 特性 将 在 本 书 第 三 部 分 关于 
String.replace() 的 主题 页 中 进行 介绍 。 最 值得 注意 的 是 ，replace() 方 法 的 
第 二 个 参数 可 以 是 函数 ， 该 函数 能 够 动态 地 计算 奉 换 字符 串 。 


match() 方 法 生 最 音 用 的 String 正 则 表达 式 方法 。 它 的 唯一 参数 束 生 一 个 
正则 表达 式 《或 通过 RegExpO 构 造 画 数 将 其 转换 为 正则 表达 式 ) ， 返 
回 的 是 一 个 由 匹配 结果 组 成 的 数组 。 如 采 该 正则 表达 陈设 置 了 修 师 符 
g， 则 该 方法 返回 的 数组 包含 子 符 串 中 的 所 有 匹配 结 琳 。 例 如 : 


"1 plus 2 equals 3".match(A\d+/g)// 返 回 ["1","2","3"] 


如 有 果 这 个 正则 表达 式 没 有 设置 修饰 件 g，match() 就 不 会 进行 全 局 检索 ， 
它 只 检索 第 一 个 匹配 。 但 即使 match0 执 行 的 不 是 全 局 检索 ， 它 也 返回 
一 个 数组 。 在 这 种 情况 下 ， 数 组 的 第 一 个 元 票 束 是 匹配 的 字符 串 ， 余 
下 的 元 素 则 是 正则 表达 式 中 用 圆 括号 括 起 来 的 子 表达 式 。 因 此 ， 如 果 
match() 返 回 一 个 数组 a， 那 么 a[0] 存 放 的 是 完整 的 匹配 ，a[1] 存 放 的 则 是 
与 第 一 个 用 圆 括 号 括 起 来 的 表达 式 相 匹配 的 子囊 ， 以 此 类 推 。 为 了 和 
方法 replace0) 保 持 一 致 ，a[m] 存 放 的 是 $n 的 内 容 。 


例如 ， 使 用 如 下 的 代码 来 解析 一 个 URL: 


Var url=/(\WWw+):\/\/([\Ww.]+)\/(\S*)/; 


Var text="Visit my blog at http://www.example.com/~david"; 


Var result=text.match(ur1l); 


if(result!=null)t{ 


var fullurl=result[0];// 包 含 "http://www.example.com/~david" 


var protocol=result[1];// 包 含 "http" 


A 


var host=result[2];// 包 含 "www.example .com" 


var path=result[3];// 包 含 "~david" 


} 


值得 注意 的 是 ， 给 字符 串 的 match0 方 法 传 入 一 个 非 全 局 的 正则 表达 
式 ， 实 际 上 和 给 这 个 正则 表达 式 的 exec() 方 法 传 入 的 字符 串 是 一 模 一 样 
的 ， 它 返回 的 数组 带 有 两 个 属性 : index 和 input， 接 下 来 对 exec(0) 方 法 的 
讨论 中 会 提 到 ; 


String 对 象 的 最 后 一 个 和 正则 表达 式 相关 的 方法 是 split0。 这 个 方法 用 以 
I 使 用 的 分 隅 符 是 split() 
J 参数 ， 例 如: 


"123,456,789" .split(",");// 返 回 ["123","456", "789"] 


split0 方 法 的 参数 也 可 以 是 一 个 正则 表达 式 ， 这 使 得 split0 方 法 异常 强 
大 。 例 如 ， 可 以 指定 分 隔 符 ， 人 允许 两 边 可 以 留 有 任意 多 的 空白 符 : 


2， 2,3,4,5" .Split(/\s*, \s*/);// 返 口 ["1", 2 WN 4 5 


0 其 他 一 些 特性 ， 本 书 第 三 部 分 有 关于 String.split0 更 详尽 
4 说明。 


10.3 RegExp 对 象 


正如 本 章 开 始 所 讲 到 的 ， 正 则 表达 式 是 通过 RegExp 对 象 来 表示 的 。 除 
了 RegExp(0 构 造 函 数 之 外 ，RegExp 对 象 还 支持 三 个 方法 和 一 些 属性 。 
接 下 来 的 两 节 会 对 RegExp 模 式 匹 配方 法 和 属性 展开 讲述 。 


RegExpO 构 造 函 数 带 有 两 个 字符 串 参 数 ， 其 中 第 二 个 参数 是 可 选 的 ， 
RegExp() 用 以 创建 新 的 RegExp 对 象 。 第 一 个 参数 包含 正则 表达 式 的 主 
体 部 分 ， 也 就 是 正则 表达 式 直 接 量 中 两 条 和 斜 线 之 间 的 文本 。 需 要 注意 
的 是 ， 不 论 是 字符 串 直 接 量 还 是 正则 表达 式 ， 都 使 用 “字符 作为 转 义 
字符 的 前 线 ， 因 此 当 给 RegExp0) 传 入 一 个 字符 串 表 壕 的 正则 表达 式 
时 ， 必 须 将 “" 蔡 换 成 兴 "”。RegExp0 的 第 二 个 参数 是 可 选 的 ， 如 果 提 供 
第 二 个 参数 ， 它 就 指定 正则 表达 式 的 修饰 符 。 不 过 只 能 传 入 修饰 符 g、 
i、m 或 者 它们 的 组 合 。 比 如 : 


// 全 局 匹配 字符 串 中 的 5 个 数字 ， 注 意 这 里 使 用 了 "\\"， 而 不 是 "\" 


var Zipcode=new RegExp("\\d{5}","g"); 


RegExp() 构 造 函 数 非 常 有 用 ， 特 别 是 在 需要 动态 创建 正则 表达 式 的 时 
候 ， 这 种 情况 往往 没 办 法 通过 写 死 在 代码 中 的 正则 表达 式 直 接 量 来 实 
现 。 例 如 ， 如 采 待 检索 的 字符 串 是 由 用 户 输入 的 ， 残 必须 使 用 
RegExp() 构 造 画 数 ， 在 程序 运行 时 创建 正则 表达 式 I9l-。 


10.3.1 ”RegExp 的 属性 


每 个 RegExp 对 象 都 包含 5 个 属性 。 属 性 source 是 一 个 只 读 的 字符 串 ， 包 
含 正 则 表达 式 的 文本 。 属 性 global 是 一 个 只 读 的 布尔 值 ， 用 以 说 明 这 个 
正则 表达 式 是 否 带 有 修饰 符 g 8 属性 ignoreCase 也 是 一 个 只 读 的 布尔 
值 ， 用 以 说 明正 则 表达 式 是 否 带 有 修饰 人 符 i。 属 性 multiline 是 一 个 只 读 
的 布尔 值 ， 用 以 说 明正 则 表达 式 是 否 市 有 修饰 符 m。 最 后 一 个 属性 
lastIndex， 它 是 一 个 可 读 / 写 的 整数 。 如 果 匹 配 模 式 融 有 g 修 饰 御 ， 这 个 
属性 存储 在 整个 字符 串 中 下 一 次 检索 的 开始 位 置 ， 这 个 属性 会 被 exec() 
和 test(0) 方 法 用 到 ， 下 面 会 讲 到 。 


10.3.2 ”RegExp 的 方法 


RegExp 对 象 定义 了 两 个 用 于 执行 模式 匹配 操作 的 方法 。 它 们 的 行为 和 
上 文 介绍 过 的 String 方 法 很 类 似 。RegExp 最 主要 的 执行 模式 匹配 的 方法 
是 exec0， 它 与 10.2 万 介绍 过 的 String 方 法 matchO0 相 似 ， 只 是 RegExp 方 
法 的 参数 是 一 个 字符 串 ， 而 String 方 法 的 参数 是 一 个 RegExp 对 象 。 
exec() 方 法 对 一 个 指定 的 字符 串 执行 一 个 正则 表达 式 ， 简 言 之 ， 怠 是 在 
一 个 字符 串 中 执行 匹配 检索 。 如 果 它 没有 找到 任何 匹配 ， 它 就 返回 
null， 但 如 果 它 找到 了 一 个 匹配 ， 它 将 返回 一 个 数组 ， 就 像 match() 方 法 
为 非 全 局 检索 返回 的 数组 一 样 。 这 个 数组 的 第 一 个 元 素 包 含 的 是 与 正 
则 表达 式 相 匹配 的 字符 串 ， 余 下 的 元 素 是 与 圆 括号 内 的 子 表达 式 相 匹 
配 的 子 串 。 属 性 index 包 含 了 发 生 匹 配 的 字符 位 置 ， 属 性 input 引 用 的 是 
正在 检索 的 字符 串 。 


和 match() 方 法 不 同 ， 不 管 正则 表达 式 是 否 具有 全 局 修饰 牺 g，exec() 都 

会 返回 一 样 的 数组 。 回 忆 一 下 ， 当 match() 的 参数 是 一 个 全 局 正则 表达 

式 时 ， 它 返回 由 匹配 结果 组 成 的 数组 。 相 比 之 下 ，e xe c0 总 是 返回 一 

个 匹配 结果 ， 并 提供 天 于 本 次 匹配 的 完整 信息 。 当 调用 exec() 的 正则 表 
达 式 对 象 具 有 修饰 符 g 时 ， 它 将 把 当前 正则 表达 式 对 象 的 lastIndex 属 性 
设置 为 坚 挨 着 匹配 子 串 的 字符 位 置 。 当 同一 个 正则 表达 式 第 二 次 调用 

exe c() 时 ， 它 将 从 lastIndex 属 性 所 指示 的 字符 处 开始 检索 。 如 采 exec() 

没有 发 现任 何人 匹配 结果 ， 它 会 将 lastIndex 重 置 为 0 (在 任何 时 候 都 可 以 
将 lastIndex 属 性 设置 为 0， 每 当 在 字符 串 中 找 最 后 一 个 匹配 项 后 ， 在 使 
用 这 个 RegExp 对 象 开 始 新 的 字符 串 查 找 之 前 ， 都 应 当 将 lastIndex 设 置 

为 0) 。 这 种 特殊 的 行为 使 我 们 可 以 在 用 正则 表达 式 匹 配 字符 串 的 过 程 
中 反复 调用 exec()， 比 如 : 


var pattern=/Java/g; 


Var text="JavaScript is more fun than Java!"; 


Var result,; 


while((result=pattern.exec(text))!=null){ 


alert("Matched'"+result[0]+""'"+ 


"at position"+result.index+ 


" ;next search begins at"+pattern.lastIindex); 


} 


丸 外 一 个 RegExp 方 法 是 test()， 它 比 exec() 更 简单 一 些 。 它 的 参数 是 一 个 
字符 串 ， 用 test0 对 某 个 字符 串 进 行 检测 ， 如 果 包 含 正则 表达 式 的 一 个 
匹配 结 来 ， 则 返回 true: 


var pattern=/java/i; 


pattern.test("JavaScript");// 返 回 true 


调用 test0 和 调用 exec0) 等 价 ， 当 exec0 的 返回 结果 不 是 null 时 ，testO 返 回 
true。 由 于 这 种 等 价 性 ， 当 一 个 全 局 正则 表达 式 调用 方法 test0 时 ， 它 的 
行为 和 exec0 相 同 ， 因 为 它 从 lastIndex 指 定 的 位 置 处 开始 检索 某 个 字符 
串 ， 如 果 它 找到 了 一 个 匹配 结果 ， 那 么 它 就 立即 设置 lastIndex 为 当前 匹 
配子 串 的 结束 位 置 。 这 样 一 来 ， 束 可 以 使 用 test() 来 人 遍历 字符 串 ， 就 像 
用 exec() 方 法 一 样 。 


与 exec() 和 testO 不 同 ，String 方 法 search()、replaceO 和 match() 并 不 会 用 到 
lastIndex 属 性 。 实 际 上 ，String 方 法 只 是 简单 地 将 lastIndex 属 性 值 重 置 为 
0。 如 果 让 一 个 带 有 修饰 从 g 的 正则 表达 式 对 多 个 字符 串 执 行 exec() 或 
test()， 要 么 在 每 个 字符 串 中 找 出 所 有 的 匹配 以 便 将 lastIndex 目 动 重 置 为 
零 ， 要 么 显 式 将 lastIndex 手 动 设置 为 0 ( 当 最 后 一 次 检索 失败 时 需要 手 
动 设置 lastIndex) 。 如 果 忘 了 手动 设置 lastIndex 的 值 ， 那 么 下 一 次 对 新 
字符 串 进行 检索 时 ， 执 行 检 索 的 起 始 位 置 可 能 束 不 是 字符 串 的 开始 位 
置 ， 而 可 能 是 任意 位 置 !4。 当 然 ， 如 果 RegExp 不 高 有 修饰 循 g， 则 不 
必 担 心 会 发 生 这 种 情况 。 同 样 要 记 住 ， 在 ECMAScript 5 中 ， 正 则 表达 
式 直 接 量 的 每 次 计算 都 会 创建 一 个 新 的 RegExp 对 象 ， 每 个 新 RegExp 对 
象 具 有 各 上 自 的 lastIndex 属 性 ， 这 势必 会 大 大 减少 “残留 "astIndex 对 程序 
造成 的 意外 影响 。 


[有 一 些 Pen 正 则 表达 式 语 法 特性 并 不 被 ECMAScript 文 持 ， 这 些 特性 
包括 : s (单行 模式 ) 和 x (扩展 语法 ) 标记 ; \a、\\e、N、 NA YN、AU、 


\E、\Q、 AZ 、 和 \G 转 义 字 符 ; “(?<=” 正 同 后 行 断 言 和 “(?<< 己 负 回 
后 行 断 言 ; “(? 妨 注释 和 扩展 “(?” 的 语法 。 


[2]. 作 者 在 这 里 揭示 了 一 种 非常 容易 忽略 的 情况 ， 比 如 ， 这 段 代 码 在 
Firefox 3.6 和 Firefox 4+ 中 的 运行 结果 不 一 致 : 


function getRE(){ 
Var re=/[a-z]/; 
re.foo="bar"; 
return re; 

} 

Var reg=getRE(), 
re2=getRE(); 


console.log(reg===re2);// 在 Firefox 3.6 中 返回 true， 在 Firefox 4+ 中 返回 
false 


reg.foo="baz"; 


console.log(re2.foo);// 在 Firefox 3.6 中 返回 "baz" ， 在 Firefox 4+ 中 返 
回 "bar" 


原因 可 以 在 ECMAScript 5 规范 第 24 页 和 第 247 页 找到 ， 也 就 是 说 在 
ECMAScript 3 规范 中 ， 用 正则 表达 式 创建 的 RegExp 对 象 会 共享 同一 个 
实例 ， 而 在 ECMAScript 5 中 则 是 两 个 独立 的 实例 。 而 最 新 的 Firefox 4、 
Chrome 和 Safari 5 都 遵循 ECMAScript 5 标准 ， 以 至 于 IE6~ 正 8 都 没有 很 
好 地 遵循 ECMAScript 3 标准 ， 不 过 在 这 个 问题 上 反而 处 理 对 了 。 很 明 
显 ECMAScript 5 的 规范 更 符合 开发 者 的 期 望 。 


[3]_Cyrilic 字符 是 一 种 斯 拉夫 语 字 ， 请 
http://en.wikipedia.org/wiki/Cyrillic_alphabet 。 


[4 除了 在 字符 类 ( 方 括号 中 ，\b 匹 配 退 格 符 。 


Sp 
轩 


[5S]. 原 书 此 处 有 误 ,， “GQ3=” 和 “)” 之 间 的 表达 式 只 用 于 指定 一 个 位 置 ， 它 是 
JJ， 这 里 提 到 的 “断言 " 通 闻 也 称 为 “ 零 宽 断 言 ”。 


8 
但 不 推荐 使 
eval()。 


[7] 这 里 所 说 的 任意 位 置 实际 上 是 由 lastIndex 的 值 决定 的 ， 如 果 lastIndex 
0 必定 会 对 新 开始 的 正则 表达 式 匹 配 检索 造成 不 确定 的 影 
[加 。 


第 11 章 。 JavaScript 的 子 集 和 扩展 


到 目前 为 止 ， 本 书 参照 FCMAScript 3 和 ECMAScript 5 中 的 标准 规范 完 
整地 讨论 了 JavaScript 这 门 官方 语言 。 从 现在 起 ， 本 章 将 开始 讨论 
JavaScript 的 子 集 和 超 集 。 其 中 子 集 的 定义 大 部 分 都 是 出 于 安全 考虑 ， 
只 有 使 用 这 门 语言 的 一 个 安全 的 子 集 编 写 脚本 ， 才 能 让 代码 执行 得 更 
安全 、 更 稳定 ， 比 如 如 何 更 安全 地 执行 一 段 由 不 可 信和 人 第 三 方 提供 的 广 
告 代 码 。11.1 节 会 对 这 个 子 集 做 简要 介绍 。 


ECMAScript 3 标准 是 1999 年 颁布 的 ， 十 年 后 ， 也 就 是 2009 年 才 更 新 到 
了 ECMAScript 5。JavaScript 的 作者 Brendan Eich 在 这 十 年 间 不 断 地 改 
进 这 门 语言 (ECMAScript 标 准 规范 是 允许 对 其 做 任何 扩充 的 ) ， 同 
时 ， 伴 随 着 Mozilla 项 目的 推进 ， 在 Firefox 1.0、1.5、2、3 和 3.5 版 本 中 
分 别 发 布 了 JavaScript 1.5、1.6、1.7、1.8 和 1.8.1 版 本 。 这 些 JavaScript 
的 扩展 版 本 中 的 很 多 独特 性 已 经 融入 到 ECMAScript 5 中 ， 还 有 很 多 特 
性 依然 是 非 标 准 的 ， 但 这 些 特 性 将 有 很 大 一 部 分 会 融入 到 ECMAScript 
的 将 来 版 本 中 。 


由 于 Firefox 是 基于 一 个 名 叫 Spidermonkey 的 JavaScript 引 擎 由， 因此 

Firefox 浏 览 右 也 可 以 文 持 这 些 扩展 特性 。 由 Mozilla 开 发 的 另 一 个 基于 
Java 的 JavaScript 引 擎 Rhino 〈《 见 12.1 和 ) 也 支持 大 部 分 扩展 特性 。 但 由 
于 这 些 语言 特性 是 非 标 准 的 ， 本 章 内 容 对 于 那些 需要 调试 浏览 器 兼容 
° 我 们 在 本 章 对 它们 作 必 要 的 讲述 是 基 


它们 的 确 很 强大 。 
:它们 有 可 能 在 未 来 成 为 标准 。 
:它们 可 用 来 写 Firefox 扩 展 插 件 。 


:它们 可 用 在 服务 器 端的 JavaScript 编 程 ， 只 要 运行 环境 是 基于 
Spidermonkey 或 者 Rhino 的 JavaScript3| 警 即 可 I。 


在 简单 介绍 JavaScript 语 言 的 子 集 之 后 ， 本 革 后 面 会 开始 介绍 语言 的 扩 


展 部 分 。 由 于 这 些 扩展 毕竟 不 是 标准 ， 因 此 这 里 只 是 一 个 指南 形式 的 
描述 ， 并 不 像 本 书 其 他 章节 那样 系统 完整 地 介绍 语言 特性 。 


11.1 JavaScript 的 子 集 

大 多 数 语 言 都 会 定义 它们 的 子 集 ， 用 以 更 安全 地 执行 不 可 信 的 第 三 方 
代码 。 这 里 有 一 个 很 有 趣 的 子 集 ， 定 义 这 个 子 集 的 原因 有 些 特殊 。 我 
们 首先 来 看 这 个 有 趣 的 子 集 ， 然 后 再 讨论 安全 的 语言 子 集 。 


11.1.1 精华 


Douglas Crockford 曾 经 写 过 一 本 很 薄 的 书 《JavaScript:The Good Parts》 

(O'Reilly 出 版 社 ， 专 门 介绍 JavaScript 中 值得 发 扬 光 大 的 精华 部 分 。 
这 个 语言 子 集 的 目标 是 简化 这 | 语 言 ， 规 避 挥 语言 中 的 怪 阁 、 缺 陷 前 
分 ， 最 终 使 编程 更 轻松 、 程 序 更 健壮 。 Douglas Crockford 是 这 样 介绍 
它 的 动机 的 : 


大 多 数 编程 语言 都 有 精华 部 分 和 鸡肋 部 分 ， 我 发 现 如 条 只 使 用 精华 间 
分 而 避免 使 用 鸡肋 部 分 ， 我 可 以 成 为 一 名 更 好 的 程序 员 。 


Crockford 提 炼 出 的 子 集 部 分 不 包含 with 和 continue 语 句 以 及 eval0) 函 

数 。 他 提倡 使 用 函数 定义 表达 式 而 不 是 函数 定义 语句 来 定义 函数 。 该 
子 集 要 求 : 循环 体 和 条 件 分 文 都 使 用 花 括 号 括 起 来 ， 它 不 允许 在 循环 
体 和 条 件 分 文中 只 包含 一 条 语句 时 省 略 花 括 号 ， 任 何 语句 只 要 不 是 以 
花 括 号 结束 都 应 当 使 用 分 号 做 结尾 。 


这 个 子 集中 并 未 包含 逗号 运算 符 、 位 运算 符 以 及 “++? 和 <--”。 也 不 包 
含 “==* 和 “l=”， 因 为 用 这 两 个 运算 符 进 行 比较 时 会 涉及 类 型 转换 ， 这 
里 更 推荐 使 用 “===” 和 “l==”。 


由 于 JavaScript 并 不 包含 块 级 作用 域 ，Crockford 为 我 们 提炼 出 的 子 集 音 
分 对 var 语 句 做 了 限制 ，var 语 句 只 能 出 现在 函数 体 的 顶部 ， 并 要 求 程 
序 员 将 函数 内 所 有 的 变量 声明 写 在 一 条 单独 的 var 语 句 中 ， 作 为 函数 体 
的 第 一 条 语句 。 在 子 集中 禁止 使 用 全 局 变量 ， 但 这 个 限制 只 是 编程 约 
定 ， 并 不 是 真正 的 语言 上 的 限制 。 


Crockford 写 过 一 个 在 线 代 码 质量 检测 工具 JSLint， 可 以 通过 
http:/Wjslint.com 访 问 这 个 工具 。 这 个 工具 提供 了 很 多 选项 用 来 增强 代码 
的 一 致 性 检查 。 除 了 能 确保 代码 使 用 了 子 集 推 荐 的 特性 之 外 ，JSLint 
工具 还 对 编码 风格 做 了 一 些 强制 约定 ， 比 如 合理 的 缩 进 等 。 


Crockford 的 那 本 书 出 版 时 ，ECMAScript 5 的 严格 模式 还 没有 出 来 ， 然 
而 Crockford 所 提取 出 的 JavaScript“ 鸡 肋 部 分 ?中 有 很 大 一 部 分 在 严格 模 
式 中 同样 做 了 限制 。 随 着 ECMAScript 5 标准 的 广泛 采用 ，JSLint 工 具 
要 求 在 选中 "The Good Parts" 选 项 时 程序 中 必须 包含 一 条 "use strict" 指 
今 o 


有 


利用 “精华 部 分 ”的 一 个 语言 子 集 可 以 设计 出 更 具 美 感 的 程序 并 提升 程 
序 员 的 开发 效率 。 这 里 将 要 讨论 的 是 一 个 更 大 的 子 集 ， 这 个 大 子 集 的 
设计 目的 是 能 在 一 个 容器 或 “ 沙 箱 ” 中 更 安全 地 运行 不 可 信 的 第 三 方 
JavaScript 代 码 。 所 有 能 破坏 这 个 沙 箱 并 影响 全 局 执行 环境 的 语言 特性 
和 API 在 这 个 安全 子 集中 都 是 禁止 的 。 每 个 子 集 部 市 有 一 个 静态 的 检 
查 右 ， 可 以 对 代码 进行 解析 检查 以 确保 代码 是 符合 子 集 规范 的 。 由 于 
这 个 检查 右 的 检验 规则 比较 严格 ， 因 此 有 一 些 沙 箱 系 统 定义 了 范围 更 
三 、 校 验 更 松散 的 子 集 ， 并 增加 了 一 个 代码 转换 的 步 又 ， 用 以 将 针对 
更 大 于 集 的 代码 检验 转换 为 针对 更 小 子 集 的 代码 检验 ， 同 时 在 对 代码 
的 静态 分 析 不 能 确保 代 码 安全 性 的 情况 下 增加 了 运行 时 的 检查 。 


为 了 让 JavaScript 代 码 静态 地 通过 安全 检查 ， 必 须 移 除 一 些 JavaScript 特 
性 : 


eval0 和 Function0 构 造 画 数 在 任何 安全 子 集 里 都 是 蔡 止 使 用 的 ， 因 为 
它们 可 以 执行 任意 代码 ， 而 且 JavaScript 无 法 对 这 些 代码 做 静态 分 析 。 


-人 茜 止 使 用 this 关 键 字 ， 因 为 函数 〈 在 非 严 格 模式 中 ) 可 以 通过 this 访 问 
全 局 对 象 。 而 沙 箱 系 统 的 一 个 重要 目的 就是 阻止 对 全 局 对 和 象 的 访问 。 


- 葵 止 使 用 with 语句 ， 因 为 with 语句 增加 了 静态 代码 检查 的 难度 。 


禁止 使 用 某 些 全 局 变量 。 在 客户 端 Javascript 中 ， 浏 览 器 窗口 对 象 可 以 
当做 全 局 对 象 ， 但 也 具有 双重 身份 全， 因此 代码 中 不 能 有 对 window 对 
象 的 引用 。 同 样 地 ， 客 户 端 document 对 象 定 义 了 可 以 用 来 操控 整个 页 
面 内 容 的 方法 。 将 对 document 的 控制 权 交 给 一 段 不 受信 任 的 代码 会 有 
很 多 隐患 。 安 全 子 集 提 供 了 两 种 不 同 的 方法 来 处 理 类 似 document 这 类 
全 局 对 象 。 第 一 种 方法 是 ， 沙 箱 完 全 蔡 掉 它们 ， 并 定义 一 组 目 定 义 

API 用 以 对 分 配给 它 的 web 页面 做 有 限制 的 访问 。 第 二 种 方法 ， 在 沙 箱 


代码 所 运行 的 “容器 ”内 定义 一 个 只 对 外 提供 安全 的 标准 DOM API 的 “外 
观 面板 ”(facade) 或 <document 代 理 对 象 ” (proxy) [4-。 


.禁止 使 用 某 些 属 性 和 方法 ， 以 免 在 沙 箱 中 的 代码 拥有 过 多 的 权限 。 这 
些 属性 和 方法 包括 arguments 对 象 的 两 个 属性 caller 和 callee (甚至 在 某 
些 子 集 中 干脆 禁止 使 用 arguments 对 象 )、 芳 数 的 call 和 apply0 方 法 ， 
以 及 constructor 和 prototype 两 个 属性 。 非 标准 的 属性 也 被 禁止 抒 了 ， 比 
如 _proto 。 一 些 子 集 将 这 些 不 安全 的 属性 和 全 局 对 象 列 进 黑 名 单 ， 
还 有 一 些 子 集 提供 了 白 名 单 ， 给 出 了 推荐 使 用 的 安全 的 属性 和 方法 。 


-静态 分 析 可 以 有 效 地 防止 带 有 点 (.) 运算 符 的 属性 存 取 表达 式 去 读 写 
特殊 属性 。 但 使 用 方 括号 [] 来 访问 属性 则 与 此 不 同 ， 因 为 我 们 无 法 对 
方 括号 内 的 字符 串 表达 式 做 静态 分 机 。 基 于 这 个 原因 ， 安 全 子 集 通 种 
禁止 使 用 方 括号 ， 除 非 方 括号 内 是 一 个 数字 或 字符 串 直 接 量 。 安 全 子 
集 将 [] 蕉 换 为 全 局 函数 ， 通 过 调用 全 局 钞 数 来 查询 和 设置 对 象 属性 ， 

这 些 函 数 会 执行 运行 时 检查 以 确保 它们 不 会 读 写 那些 禁止 访问 的 属 


有 一 些 限制 ， 比 如 禁止 使 用 eval0 站 和 with 语 句 ， 并 不 会 给 程序 员 带 来 额 
外 仙 担 ， 毕 葛 这 些 特性 本 来 束 很 少 在 JavaScript 编 程 中 用 到 。 田 外 一 些 
限制 规则 ， 比 如 使 用 方 括号 对 属性 进行 存 取 的 限制 则 对 开发 造成 诸多 

不 便 ， 这 时 就 有 代码 转换 絮 的 用 武之 地 了 。 比如， 转换 器 会 目 动 将 使 

用 方 括号 的 代码 转换 为 画 数 调用 的 代码 ， 以 便 能 够 对 它 执 行 运行 时 检 

查 。 有 了 这 种 代码 转换 ， 可 以 安全 地 使 用 this 关 键 字 。 当 然 ， 沙 箱 代码 
的 运行 时 安全 性 检查 和 执行 速度 之 间 是 一 对 矛盾 ， 这 里 的 代码 转换 只 

征 一 种 权衡 后 的 折 中 方案 。 


有 一 些 安全 子 集 已 经 实现 了 ， 对 这 个 子 集 更 详尽 地 介绍 超出 了 本 书 的 
范围 ， 这 里 我 们 只 是 简要 地 介绍 一 些 比较 重要 的 实现 : 


ADsafe 


ADsafe (http://adsafe.org) 是 第 一 个 正式 提出 的 安全 子 集 。 它 的 提出 
者 是 Douglas Crockford (他 也 定义 了 The Good Parts 子 集 ) 。ADsafe 只 
包含 静态 检查 ， 它 使 用 JSLint (http://jslint.org) 作为 检验 器 。 这 个 工 
具 葵 止 访问 大 部 分 的 全 局 变量 ， 并 定义 了 一 个 ADSAFE 变 量 ， 它 提供 
了 一 组 可 以 安全 使 用 的 API， 包 括 一 些 特殊 的 DOM 方 法 。ADsafe 并 未 


广泛 使 用 ， 但 它 作为 一 个 跨 具 影响 力 的 概念 原型 对 其 他 安全 子 集 有 着 
深远 的 影响 。 


dojox.secure 


受 ADsafe 的 启发 ，Dojo 工 具 包 (http://dojotoolkit.org) 发 布 了 一 个 名 为 
dojox.secure 的 子 集 扩 展 中 ) 。 和 ADsafe 一 样 ，dojox.secure 也 是 基于 静 
态 检查 ， 静 态 检查 受 限 于 语言 子 集 范围 内 。 但 它 和 ADsafe 又 不 尽 相 
同 ， 它 人 允许 使 用 标准 DOM API。 同 时 ， 它 包含 一 个 用 JavaScript 实 现 的 
位 查 品 "因此 我 们 可 以 用 它 对 不 可 信 的 第 三 方 代码 执行 运行 时 前 的 动 


Cajalsj- 是 Google 发 布 的 开源 安全 子 集 。Caja 定 义 了 两 个 语言 子 集 。 
Cajita (“小 沙 盒 ”) 是 一 个 与 ADsafe 和 dojox.secure 类 似 的 严格 子 集 。 
Valija (“手提 箱 * 或 “行李 箱 ”) 则 是 一 个 范围 更 广 的 语言 子 集 ， 更 接近 
于 ECMAScript 5 的 严格 模式 〈 不 包含 eval0) 。Caja 本 喘 也 是 一 个 编译 
器 的 名 字 ， 这 个 编译 需 可 以 将 一 段 网 页 内 容 (HTML、CSS 和 
JavaScript 代 码 ) 转换 为 一 个 安全 的 模块 ， 这 个 模块 可 以 放心 地 驻 留 在 
页 面 中 而 不 会 对 整个 页 面 或 页 面 上 的 其 他 模块 产生 影响 。 
Caja 是 OpenSocial API 的 一 部 分 (关于 OpenSocial API 的 更 多 内 容 请 参 
照 : http:/code.google.comyapis/opensocialy) 。 比 如 ， 在 门户 页 面 
http://my.yahoo.com 中 就 可 以 看 到 ， 所 有 的 模块 都 遵照 Caja 规 范 。 


FBJS 


FBJS 是 JavaScript 语 言 的 变种 ， 这 种 语言 被 Facebook 
(http://facebook.com) 采用 ， 用 以 在 用 户 个 人 资料 页 舱 入 不 可 信 的 第 

三 方 代 码 。FBJS 依 赖 代 码 转 换 来 保证 代码 的 安全 性 ， 转 换 絮 同样 提供 
运行 时 检查 ， 以 避免 通过 this 天 键 字 去 访问 全 局 对 象 ， 并 且 对 所 有 的 顶 
层 标 识 符 进行 重 命名 ， 给 它们 增加 了 一 个 标识 模块 的 前 约 ， 正 是 因为 
这 种 重 命名 ， 任 何 对 全 局 变量 以 及 其 他 模块 的 成 员 变 量 的 设置 或 者 查 
询 操 作 都 无 法 正常 进行 了 。 此 外 ， 任 何 对 eval0 的 调用 也 会 因为 eval 函 
数 名 局 里 新 命名 而 无 法 执行 。FBJS 模 拟 实现 了 DOM API 的 一 个 安全 子 


Microsoft Web Sandbox 


微软 的 Web Sandbox (http://websandbox.livelabs.com/) 定义 了 
JavaScript 的 一 个 更 袖 泛 的 子 集 ， 包 含 HIML 和 CSS， 它 的 代码 重 写 规 
则 非常 激进 ， 有 效 地 重新 实现 了 一 个 安全 的 JavaScript 虚 拟 机 ， 和 针对 不 
安全 的 JavaScript 顶 层 代 码 进 行 处 理 。 


11.2 ”常量 和 局 部 变量 


对 语言 子 集 的 讨论 暂 告 一 段落 ， 下 面 开始 讨论 语言 的 扩展 。 在 
JavaScript 1.5 及 后 续 版 本 中 可 以 使 用 const 天 键 字 来 定义 常量 。 常 量 可 
以 看 成 不 可 重复 赋值 的 变量 (对 常量 重新 赋值 会 失败 但 不 报错 ) ， 对 
常量 的 重复 声明 会 报错 。 


const pi=3.14;// 定 义 一 个 常量 并 赋值 


新 赋值 都 被 忽略 


tal 


pi=4;// 任 何 对 这 个 常量 的 


const pi=4;// 重 新 声明 常量 会 报错 


var pi=4;// 这 里 也 会 报错 


关键 字 const 和 关键 字 var 的 行为 非常 类 似 ， 由 于 JavaScript 中 没有 块 级 
作用 域 ， 因 此 常量 会 被 提前 至 函数 定义 的 顶部 〈 参 照 3.10.1 节 ) 。 


一 直 以 来 ，JavaScript 中 的 变量 缺少 块 级 作用 域 的 文 持 被 普遍 认为 是 
JavaScript 的 短 板 ，JavaScript 1.7 针 对 这 个 缺陷 增加 了 关键 字 ]et。 关 键 
字 const 一 直 都 是 JavaScript 的 保留 字 (没有 使 用 ) ， 因 此 现 有 的 代码 不 
必 作 任何 改动 就 可 以 增加 和 常量， 关键 字 let 并 不 是 保留 字 ，JavaScript 
1.7 及 以 后 的 版 本 才能 识别 ， 需 要 手动 加 入 版 本 号 才 可 以 。 


JavaScript 版 本 号 


本 章 所 有 提 到 JavaScript 版 本 号 的 地 方 ， 都 专 指 Mozilla 的 语言 版 本 ， 在 
Spidermonkey 和 Rhino 解 析 器 和 Firefox Web 浏 览 器 中 实现 了 这 些 语言 版 


[© 


有 一 些 语言 的 扩展 定义 了 新 的 关键 字 (比如 let) ， 为 了 让 现 有 代码 不 
破坏 原 有 结构 瓯 能 使 用 这 些 关 键 字 ， 则 需要 显 式 指 明 新 的 语言 版 本 以 
便 使 用 新 版 本 的 语言 扩展 。 如 果 你 正在 使 用 Spidermonkey 或 Rhino 作 为 
单独 的 解析 器 ， 束 可 以 通过 命令 行 选项 指定 语言 版 本 ， 或 者 通过 调用 
一 个 内 置 函数 version() 来 指定 版 本 ( 显 式 指定 的 版 本 号 是 实际 版 本 号 
乘 以 100 中 的 数值 ， 要 想 激活 JavaScript 1.7 版 本 则 需要 传 入 170 并 启用 
let 关 键 字 ) 。 在 Firefox 中 ， 则 可 以 在 script 标 签 中 指定 语言 的 扩展 版 
本 ， 束 像 这 样 : 


<script type="application/javascript;version=1.8"> 


关键 字 let 有 4 种 使 用 方式 : 

可 以 作为 变量 声明 ， 和 var 一 样 ; 

在 for 或 fovin 循 环 中 ， 作 为 var 的 奉 代 方案 ; 

:在 语句 块 中 定义 一 个 新 变量 并 显 式 指 定 它 的 作用 域 ; 
0 这 个 变量 只 在 表达 式 内 可 


使 用 let 最 简单 的 方式 就 是 批量 蔡 换 程序 中 的 var。 通过 var 声 明 的 变量 

在 函数 内 都 是 可 用 的 ， 而 通过 let 声 明 的 变量 则 只 属于 就 近 的 花 括 号 括 

起 来 的 语句 块 (当然 包括 它 所 租 套 的 语句 块 ) 。 比 如 ， 如 果 在 循环 体 

0 明 变 量 ， 那 么 这 个 变量 在 循环 体 之 外 是 不 可 用 的 ， 示 例 代 
Bh 


function oddsums(n)t{ 


let total=0,result=[];// 在 函数 内 都 是 有 定义 的 


for(let x=1;x<=n;x++){//x 只 在 循环 体内 有 定义 


let odd=2*x-1;//odd 只 在 循环 体内 有 定义 


total+=odd; 


result.push(total); 


} 


// 这 里 使 用 x 或 odd 会 导致 一 个 引用 错误 


return result; 


} 


oddsums(5);// 返 回 [1, 4,9,16,25] 


我 们 注意 到 ， 在 这 段 代码 中 let 下 替代 了 for 循 环 中 的 var。 这 时 通过 let 创 
建 的 变量 的 作用 域 仪 限 于 循环 体 、 循 环 条 件 判 断 逻 辑 和 目 增 操作 表达 
式 。 同 样 ， 可 以 这 样 在 fowin (以 及 for each， 参 照 11.4.1 节 ) 循环 中 使 
用 jlet: 


o={Xx:1,y:2}; 


for(let p in 0)console.1log(p);// 输 出 x 和 y 


for each(let v in o)console.1og(v);// 输 出 1 和 2 


console.1log(p)// 引 用 错误 : p 没 有 定义 


在 声明 语句 中 使 用 let 和 在 循环 初始 化 右 中 使 用 let， 两 者 有 着 有 趣 的 区 
别 。 对 于 前 者 来 说 ， 变 量 初始 化 表达 式 是 在 变量 的 作用 域内 计算 的 。 
但 对 于 后 者 来 说 ， 变 量 的 初始 化 表达 式 则 古 在 变量 的 作用 域 之 外 计算 
的 。 当 出 现 两 个 变量 同名 的 情况 时 需要 尤为 注意 : 


let x=1; 


for(let x=x+1;x<5;x++) 


console.1og(x);// 输 出 2 一 4 


{ 


// 开 始 一 个 新 的 语句 块 ， 创 建新 的 变量 作用 域 


let x=x+1;//x 没 有 定义 , 因此 x+1 是 NaN 


console .log(Xx);// 输 出 NaN 


} 


通过 var 声 明 的 变量 在 它们 所 声明 的 函数 内 始终 是 存在 的 ， 但 直到 代码 
执行 到 var 语 句 时 才 初 始 化 变量 。 也 就 是 说 ， 变 量 是 存在 的 〈 不 会 抛 出 
引用 错误 异常 ) ， 但 在 var 语 句 执行 之 前 它 的 值 是 undefined。 通 过 let 声 
明 变 量 的 情况 与 之 类 似 ， 如 果 在 let 语 句 之 前 使 用 这 个 变量 (与 let 语 句 
在 同一 个 块 作用 域内 ) ， 变 量 是 存在 的 ， 但 值 是 undefined 。 


需要 注意 的 是 ， 在 用 let 声 明 循环 变量 时 这 个 问题 是 不 存在 的 ， 语 法 上 
古 不 允许 在 初始 化 之 前 束 使 用 这 个 变量 的 。 还 有 一 种 方法 可 以 在 let 声 
明 语句 之 前 使 用 变量 时 避免 出 错 ， 就 是 在 一 条 单独 的 let 语 句 (和 上 文 
所 示 的 let 声 明 语 句 不 同 ) 的 代码 块 中 既 包 含 一 组 变量 的 声明 也 包含 这 
些 变量 的 初始 化 表达 式 。 语 句 里 的 变量 和 初始 化 表达 式 都 放 在 一 对 圆 
括号 内 ， 随 后 跟随 一 对 人 花 括号 括 起 来 的 语句 块 : 


let x=1,y=2; 


里 的 写法 


BE 


let (x=x+1, y=x+2){// 注 意 


console.1og(x+y) ;// 输 出 5 


}; 


console.1log(x+ty);// 输 出 3 


let 语 句 中 的 变量 初始 化 表达 式 并 不 是 这 个 语句 块 的 一 部 分 ， 并 且 且 在 
作用 域外 部 解析 的 ， 理 解 这 一 点 至 头 重要 。 在 这 段 代码 中 ， 我 们 新 建 
了 一 个 新 的 变量 x 并 赋值 给 它 一 个 更 大 的 值 。 


let 关 键 字 的 最 后 一 种 用 法 古 let 语 句 块 的 一 个 变 体 ， 其 中 有 一 对 圆 括号 
括 起 来 的 变量 列表 和 初始 化 表达 式 ， 紧 跟着 征 一 个 表达 式 而 不 是 一 个 
语句 块 。 我 们 把 这 种 写法 叫做 let 表 达 式 ， 上 面 的 代码 可 以 写成 这 样 : 


let x=1,y=2; 


console.log(let (x=x+1,y=x+2)xty);// 输 出 5 


菜 些 const 和 let 的 用 法 (不 必 是 这 里 描述 的 4 种 形式 ) 在 将 来 很 有 可 能 
被 纳入 ECMAScript 标 准 规范 中 。 


11.3 ”解构 赋值 


Spidermonkey 1.7 实 现 了 一 种 混合 式 赋值 ， 我 们 称 之 为 “解构 赋 

值 ” (destructuring assignment) 。 例 如 ， 你 可 能 在 Python 或 Ruby 中 接触 
过 这 个 概念 。 在 解构 赋值 中 ， 等 号 右 侧 是 一 个 数组 或 对 象 〈 一 个 结构 
化 的 值 ) ， 指 定 左 侧 一 个 或 多 个 变量 的 语法 和 右 侧 的 数组 和 对 象 直接 
量 的 语法 保持 格式 一 致 。 


当 发 生 解 构 赋 值 时 ， 右 侧 的 数组 和 对 象 中 一 个 或 多 个 的 值 束 会 被 提取 
出 来 (解构) ， 并 赋值 给 左 侧 相 应 的 变量 名 。 除 了 用 于 党 规 的 赋值 运 
算 符 之 外 ， 解 构 赋 值 还 用 于 初始 化 用 var 和 jlet 渐 声明 的 变量 。 


当 和 数组 配合 使 用 时 解构 赋值 是 一 种 写法 简单 但 又 极其 强大 的 功能 ， 
等 别 征 在 函数 返回 一 组 结果 的 时 候 解构 赋值 吕 显 得 非常 有 用 。 然 而 当 
配合 对 象 或 者 伦 套 对 象 一 起 使 用 时 ， 解 构 赋值 变 得 更 加 复杂 且 容 易 摘 
混 。 下 面 的 例子 展示 了 简单 的 和 复杂 的 解构 赋值 : 


这 里 的 例子 是 简单 的 解构 赋值 ， 它 用 到 了 数组 : 


let[x,y]=[1,2];// 等 价 于 let x=1, y=2 


[x,y]=[x+1, y+1];// 等 价 于 x=x+1, y=y+1 


[x,y]=[y,x];// 交 换 两 个 变量 的 值 


console.1log([x,y]);// 输 出 [3,2] 


注意 ， 当 函数 返回 一 组 结 采 时 ， 使 用 解构 赋值 将 大 大 简化 程序 代码 : 


可 


A 


// 将 [x,y] 从 笛 卡 坐标 转换 为 [r, theta] 极 坐标 


2 


function polar(x,y){ 


return[Math.sqrt(x*x+t+y*y),Math.atan2(y,x)]; 


// 将 极 和 坐标 转 换 为 笛 卡 尔 坐 标 


function cartesian(r,theta)t{ 


return[r*Math.cos(theta),r*Math.sin(theta)]; 


let[r,theta]=polar(1.0,1.0);//r=Math.sqrt(2),theta=Math .PI/4 
let[x,y]=cartesian(r,theta);//x=1.0,y=1.0 

解构 赋值 右 侧 的 数组 所 包含 的 元 素 不 必 和 左 侧 的 变量 一 一 对 应 ， 左 侧 
多 余 的 变量 的 赋值 为 undefined， 而 右 侧 多 余 的 值 则 会 忽略 。 左 侧 的 变 
量 列表 可 以 包含 连续 的 逗号 用 以 路 过 右 侧 对 应 的 值 。 
let[x,y]=[1];//x=1,y=undefined 


[x,y]=[1,2,3];//x=1,y=2 


[xy]=[1， 2，3,4]; /LAXx=2，y=4 
JavaScript 并 未 提供 将 右 侧 的 多 余 的 值 以 数组 的 形式 赋值 给 左 侧 变量 的 
语法 。 比 如 ， 在 这 段 代码 的 第 二 行 ， 并 不 能 将 [2,3] 赋 值 给 y。 


整个 解构 赋值 运算 的 返回 值 是 右 侧 的 整个 数据 结构 ， 而 不 是 从 中 提取 
出 来 的 某 个 值 。 因 此 ， 可 以 这 样 写 “ 链 式 ”解构 赋值 : 


let first,second,all,; 


all=[first,second]=[1,2,3,4];//first=1, second=2,all=[1, 2,3,4] 


解构 赋值 同样 可 以 用 于 数组 内 套 的 情况 ， 解 构 赋 值 的 左 侧 应 当 也 是 同 
样 格式 的 藤 套 数组 直接 量 : 


let[one, [twoA, twoB]]=[1, [2,2.5],3];//one=1, twoA=2, twoB=2.5 


解构 赋值 的 右 侧 也 可 以 是 一 个 对 象 。 这 种 情况 下 ， 解 构 周 值 的 左 侧 部 
分 也 应 当 看 起 来 是 一 个 对 象 直 接 量 ， 对 象 中 是 一 个 名 值 对 的 列表 ， 名 
值 对 之 间 用 喜 号 分 隔 ， 列 表 用 花 括 号 括 起 来 。 名 值 对 内 冒号 左 侧 是 属 
性 名 称 ， 冒 号 右 侧 是 变量 名 称 ， 每 一 个 命名 属性 都 会 从 右 侧 对 象 中 碍 
找 对 应 的 赋值 ， 每 个 值 (或 者 是 undefined) 都 会 赋值 给 它 所 对 应 的 变 
量 。 这 种 解构 赋值 很 容易 被 搞 混 ， 因 为 属性 名 称 和 变量 标识 从 通常 写 
成 一 样 的 ° 在 下 面 这 个 例子 中 ，r、g 和 b 是 属性 名 ，red、green 和 blue 
尽 


:变量 名 ， 请 不 要 搞 混 : 


let transparent={r:0.0,g9:0.0,b:0.0,a:1.0};// 一 个 用 RGBA 值 表示 的 颜色 


let{r:red,g:green,b:blue}=transparent;//red=0.0,green=0.0,blue=0.0 


在 接 下 来 的 例子 中 ， 将 Math 对 象 的 全 局 函数 复制 至 新 的 变量 中 ， 用 以 
人 简化 三 角 函 数 相 关 的 代码 : 


// 等 价 于 let sin=Math.sin,cos=Math.cos,tan=Math .tan 
let{sin:sin,cos:cos,tan:tan}=Math,; 
就 像 峙 套数 组 可 以 用 于 解构 赋值 一 样 ， 舱 套 对 象 也 可 以 用 于 解构 赋 


人 
结构 ， 内 0: 


// 一 个 航 套 的 数据 结构 : 一 个 对 象 中 包含 数组 ， 数 组 中 又 包含 对 象 


let data={ 


name:"destructuring assignment", 


type:"extension", 


impl:[{engine:"spidermonkey",version:1.7}, 


{engine:"rhino",version:1.7}] 


}; // 使 用 解构 赋值 从 数据 结构 中 提取 4 个 值 


let({name:feature,impl:[{engine:impl1,version:v1i}, {engine:impl2}]}=data){ 


console .log(feature);// 输 出 "destructuring assignment" 


console .log(impl11);// 输 出 "spidermonkey" 


console.10g(v1);// 输 出 1.7 


console .log(imp12);// 输 出 "rhino" 


需要 注意 的 是 ， 类 似 这 种 欣 套 的 解构 巍 值 可 能 会 让 代码 变 得 睡 深 难 
懂 。 然 而 ， 有 一 种 有 趣 的 规律 可 以 帮助 你 更 好 地 阅读 这 些 复杂 的 解构 
赋值 。 思 考 一 下 最 普通 的 赋值 〈 给 一 个 变量 赋值 ) 。 赋值 结束 后 ， 可 
以 将 这 个 变量 用 在 程序 中 的 表达 式 里 ， 这 个 变量 的 值 束 是 刚 赋 的 值 。 
在 解构 赋值 中 ， 左 侧 的 部 分 使 用 了 类 似 数组 直接 量 或 对 象 直接 量 的 语 
法 。 但 需要 注意 ， 在 解构 赋值 完成 后 ， 左 侧 部 分 看 起 来 像 数 组 直接 量 
或 对 象 直接 量 的 代码 是 可 以 作为 合法 的 数组 和 对 象 用 在 代码 中 其 他 位 
置 的 ， 所 有 必需 的 要 量 都 已 经 有 定义 ， 因 此 可 以 直接 将 等 号 左 侧 的 部 
分 作为 一 个 可 用 的 数组 或 对 象 复制 并 粘贴 到 程序 的 其 他 地 方 。 


1 条 婉 代 
MozillaHJJavaScript 扩 展 引 入 了 一 些 新 的 送 代 机 制 ， 包 括 for/each 循 环 
和 Python 风 格 的 迭代 器 (iterator) 和 生成 器 (generator) 。 下 面 几 节 会 


Jh 引 


11.4.1 forveach 循 环 


foreach 循 环 是 由 E4X 规 范 (ECMAScript for XML) 定义 的 一 种 新 的 循 
环 语句 。E4X 是 语言 的 扩展 ， 它 允许 JavaScript 程 序 中 直接 出 现 XML 标 
和 俭 ， 并 添加 了 操作 XML 数据 的 语法 和 API。Web 浏 硕 事 大 都 没有 实现 
E4X， 但 是 Mozilla 的 JavaScript 1.6 ( 随 着 Firefox 1.5 发 布 ) 是 支持 E4X 
的 。 本 节 只 讲解 for/each， 并 不 会 涉及 XML 对 象 。 关 于 E4X 的 剩余 内 容 
请 参照 11.7 节 。 


foreach 循 环 和 fovin 循 环 非常 类 似 。 但 forveach 并 不 是 遇 历 对 象 的 属 
性 ， 而 是 过 历 属性 的 值 : 


let o={one:1,two:2,three:3} 


for(let p in o)console.log(p);//for/in: 输 出 'one','two','three' 


for each(let v in o0)console.log(v);//for/each: 输 出 1~3 


[CS 
富 
球 


当 使 用 数组 时 ，foreach 循 环 志 有 历 循 环 的 元 素 (而 不 是 索引 ) 
按 数 值 顺序 枚 举 它们 ， 但 实际 上 这 并 不 是 标准 化 或 必需 的 : 


a=['one', 'two', 'three']; 
for(let p in a)console.log(p);//Prints array indexes 0,1,2 


for each(let v in a)console.log(v);//Prints array elts'one','two','three' 


注意 ，foreach 循 环 并 不 仅仅 针对 数组 本 号 的 元 素 进 行 志 历 ， 它 也 会 记 
历数 组 中 所 有 可 枚 举 属性 的 值 ， 包 括 由 数组 继承 来 的 可 枚 举 方法 。 
此 ， 通 常 并 不 推荐 foveach 循 环 和 数组 一 起 使 用 。 在 ECMAScript 5 之 前 
的 JavaScript 碑 本 中 是 可 以 这 样 用 的 ， 因 为 目 定 义 属 性 和 方法 不 可 能 设 
置 为 可 枚 举 的 〈 对 fovin 循 环 的 讨论 参见 7.6 世 ) 。 


讶 直选 代 舍 


JavaScript 1.7 为 for/in 循 环 增加 了 更 多 通用 的 功能 。JavaScript 1.7 中 的 
循环 和 Python 的 forin 循 环 非常 类 似 ， 它 可 以 遇 历 任何 可 迭代 的 
(iterable) 对 象 。 为 了 便于 理解 ， 我 们 首先 给 出 一 些 定义 。 


迭代 器 是 一 个 对 象 ， 这 个 对 象 允 许 对 它 的 值 集合 进行 志 历 ， 并 保持 任 
何必 要 的 状态 以 便 能 够 跟踪 到 当前 遍历 的 “位 置 ”。 


友 代 闫 必须 包含 next(0) 方 法 ， 每 一 次 调用 next0 都 返回 集合 中 的 下 一 个 
值 。 比 如 下 面 的 counter0O 了 数 返回 一 个 迭代 大 ， 这 个 迭代 融 每 次 调用 
next() 都 会 返回 连续 化 增 的 整数 。 和 需要 注意 的 是 ， 这 个 函数 作用 域 利用 
闭 包 的 特性 实现 了 计数 万 当前 状态 的 保存 : 


// 返 回 迭 代 器 的 一 个 函数 


function counter(Start){ 


let nextValue=Math.round(start);// 表 示 迭 代 器 的 一 个 私有 状态 


return{fnext:function(){freturn nextValue++;}};// 返 回 迭 代 器 对 象 


let serialNumberGenerator=counter(1000); 
let sn1i=serialNumberGenerator.next();//1000 


let sn2=serialNumberGenerator.next();//1001 


当 送 代 器 用 于 有 限 的 集合 时 ， 当 亿 历 完 所 有 的 值 并 且 没 有 多 余 的 值 可 
迭代 时 ， 再 调用 next() 方 法 会 抛 Stoplteration 。Stoplteration 是 
JavaScript 1.7 中 的 全 局 对 象 的 属性 。 它 的 值 是 一 个 普通 的 对 象 目 
身 没有 属性 ) ， 只 是 为 了 终结 送 代 的 目的 而 保留 的 一 个 对 象 。 注 意 ， 
实际 上 ，Stoplteration 并 不 0 
数 。 比 如 ， i 这 个 方法 返回 一 个 可 以 对 某 
个 范围 的 整数 进行 迭代 的 迭代 器 


// 这 个 函数 返回 了 一 个 迭代 器 ， 它 可 以 和 欠 代 某 个 范围 内 的 整数 


function rangeIter(first,1ast)t{ 


let nextValue=Math.ceil(first)， 


return{ 


next:function(){ 


if(nextValue>1ast)throw StopIteration,; 


return nextValue++; 


}; 


// 使 用 这 个 范围 闪 代 器 实现 一 次 糟糕 的 迭代 


let r=rangeIter(1,5);// 获 得 迭代 器 对 象 


while(true){// 在 循环 中 使 用 它 


try{ 


console.1log(r.next());// 调 用 next() 方 法 


} 


catch(e)t{ 


if(e==StopIteration)break;// 抛 出 StopIteration 时 退出 循环 
else throw e; 
} 


} 


注意 ， 这 里 的 循环 使 用 一 个 迭代 器 对 象 ， 并 且 显 式 处 理 Stopiteration 方 
法 ， 这 种 方式 非常 糟糕 。 因 此 ， 我 们 并 不 经 常 直 接 使 用 迭代 器 对 象 ， 
而 是 使 用 可 迭代 的 对 象 。 可 迭代 对 象 表示 一 组 可 迭代 处 理 的 值 。 可 和 迭 
代 对 象 必须 定义 一 个 名 叫 _iterator _0 的 方法 (开始 和 结尾 有 两 条 下 
划 线 )  ， 用 以 返回 这 个 集合 的 迭代 器 对 象 。 


JavaScript 1.7 对 fovin 循 环 的 功能 进行 了 扩展 ， 可 以 用 它 来 忆 历 可 迭代 
对 象 。 如 果 关 键 字 in 右 侧 的 值 是 可 迭代 的 ， 那 么 fovin 循 环 会 目 动 调用 
它 的 _iterator_(0) 方 法 来 获得 一 个 闪 代 丹 对 象 。 然 后 它 调用 迭代 吉 的 ne 
xt() 方 法 ， 将 返回 值 赋 值 给 循环 变量 ， 随 即 执行 循环 体 。forvin 循 环 目 
己 会 处 理 StopIteration 异 常 ， 而 且 人 处理 过 程 对 开发 者 是 不 可 见 的 。 下 面 
的 代码 定义 了 一 个 range0 函 数 ， 这 个 函数 返回 一 个 可 闪 代 对 象 (不 是 
迭代 器 ) 用 以 表示 某 个 范围 内 的 整数 。 我 们 看 到 ， 使 用 迭代 范围 的 
for/in 循 环 要 比 使 用 迭代 妖 的 while 循 环 更 加 人 简单 。 


// 返 回 一 个 可 迭代 的 对 象 ， 用 以 表示 该 范围 内 的 一 个 数字 


function range(min,max){ 


mn 
utr 


return{// 返 回 一 个 表示 这 个 范 


的 对 象 


utr 


get min(){return min;},// 沁 昌 


边界 是 固定 的 


get max(){return max;},// 并 在 闭 包 内 保存 起 习 


AR 


includes:function(x){// 检 测 成 员 是 否 属 


return min<=x&&x<=max; 


}, 


rn 
嵌 
joa 
这 
[a 
ay 


下 


toSstring:function(){// 以 字符 串 


return"["+min+t","+max+"]"; 


}, 


ut 


攻 式 输出 这 个 范 上 


mn 


tt 


内 的 整数 都 是 可 迭代 的 


__iterator__:function(){// 汇 


let val=Math.ceil(min);// 将 当前 位 置 保存 在 闭 包 


return{// 返 回 一 个 迭代 器 对 象 


a 


next :function(){// 返 回 范围 内 的 下 一 个 值 


if(val>max)// 如 果 到 达 结 尾 就 停止 


throw StopIteration; 


return val++;// 否 则 返回 下 一 个 值 ， 


}; 


} 


}; 


} 


// 这 里 我 们 对 这 个 区 间 中 的 值 进行 渤 代 


for(let i in range(1,10))console.log(i);// 输 出 1~10 之 间 的 数字 


需要 注意 的 是 ， 我 们 在 创建 一 个 可 送 代 的 对 象 和 它 的 迭代 器 的 时 候 ， 
尽管 必须 写 一 个 _ iterator_0 〇 方法 并 抛 出 一 个 StopIteration 异 常 ， 但 在 
正常 使 用 时 并 不 需要 我 们 去 手动 调用 _ iterator_0 〇 方法 或 手动 处 理 
Stoplteration 异 常 ，for/in 循 环 会 为 我 们 处 理 这 些 逻 辑 。 如 采 出 于 某 种 考 
虑 ， 你 想 从 可 磊 代 的 对 象 中 显 式 获得 一 个 迭代 器 对 象 ， 只 需 调 用 
Iterator() 汞 数 即 可 〈 这 个 函数 是 定义 在 JavaScript 1.7 中 的 全 局 函数 ) 

如 果 这 个 函数 的 参数 是 一 个 可 迭代 的 对 象 ， 那 么 它 将 返回 这 个 对 象 的 
_ iterator__() 方 法 的 调用 结果 ， 从 而 保持 代码 整洁 干净 。 如 果 给 
Iterator(O) 函 数 传 入 第 二 个 参数 ， 这 个 参数 也 会 参与 _iterator _() 方 法 的 
调用 。 


然而 ， 引 入 Iterator0 函 数 还 有 一 个 重要 的 目的 ， 如 果 传 入 的 对 象 或 者 
数组 没有 定义 _iterator _() 方 法 ， 它 会 返回 这 个 对 象 的 一 个 可 迭代 的 
目 定 义 欠 代 恬 。 每 次 调用 这 个 迭代 恬 的 next0) 方 法 都 会 返回 其 中 包含 两 
个 值 的 一 个 数组 ， 第 一 个 数组 元 素 是 一 个 属性 名 ， 第 二 个 是 命名 属性 
的 值 。 由 于 这 个 对 象 是 可 迭代 的 妈 代 器 ， 因 此 它 可 以 直接 用 于 fovin 循 
环 ， 而 不 用 直接 调用 它 的 next0 方 法 。 这 意味 着 可 以 将 Iteratro0 函 数 和 
ee ， 这 样 可 以 方便 地 对 对 象 或 数组 的 属性 和 值 进 行 志 
力 : 


for(let[k,v]in Iterator({fa:1,b:2}))// 对 属性 和 值 作 迭代 


console.1og(k+"="+V);V// 输 出 "a=1" 和 "b=2" 


Iterator() 苹 数 返 回 的 从 代 絮 还 有 两 个 重要 的 特性 。 第 一 ， 它 只 对 目 有 
属性 进行 忆 历 而 名 上 略 继 承 的 属性 ， 通 常 我们 希望 是 这 个 样子 。 第 二 ， 
如 果 给 Iterator0 传 入 第 二 个 参数 true， 返 回 的 迭代 器 只 对 属性 名 进行 遍 
历 ， 而 忽略 属性 值 。 下 面 这 段 代码 展示 了 这 两 种 特性 : 


0={X:1,y:2}// 定 义 一 个 对 象 ， 它 有 两 个 属性 


0bject .prototype.z=3;// 所 有 的 对 象 都 继承 了 z 


for(p in 0)console.1lo0g(p);// 输 出 "x",，"y" 和 "z" 


for(p in Iterator(o,true))console.l0og(p);// 只 输出 "x" 和 "y" 


11.4.3 生成 怖 


生成 怖 是 JavaScript 1.7 中 的 特性 《是 从 Python 中 借用 过 来 的 概念 ) ， 这 
里 用 到 了 一 个 新 的 天 键 字 yield， 使 用 这 个 关键 字 时 代码 必须 显 式 指定 

JavaScript 的 版 本 1.7， 残 像 在 11.2 和 中 提 到 的 。 关 键 字 yield 在 函数 内 使 
用 ， 用 法 和 return 类 似 ， 返 回 函 数 中 的 一 个 值 。yield 和 return 的 区 别 在 

于 ， 使 用 yield 的 函数 “产生 ”一 个 可 保持 函数 内 部 状态 的 值 ， 这 个 值 是 

可 以 恢复 的 。 这 种 可 恢复 性 使 得 yield 成 为 编写 迭代 器 的 有 力 工 具 。 生 

J 但 它 初 次 理解 起 来 可 能 有 些 困 难 ， 下 面 

给 一 些 定 义 2 


任何 使 用 关键 字 yield 的 函数 (哪怕 yield 在 代码 逻辑 中 是 不 可 达 的 ) 都 
称 为 “生成 器 了 国 数 ”(generator function) 。 生 成 器 函数 通过 yield 返 回 
值 。 这 些 函 数 中 可 以 使 用 return 来 终止 函数 的 执行 而 不 带 任何 返回 值 ， 
但 不 能 使 用 returmn 来 返回 一 个 值 。 除 了 使 用 yield， 对 return 的 使 用 限制 
也 使 生成 器 函数 更 明显 地 区 别 于 普通 函数 。 然 而 和 普通 的 函数 一 样 ， 
生成 器 函数 也 通过 关键 字 function 声 明 ，typeof 运 算 符 返 回 "function"， 
并 可 以 从 Function.prototype 继 承 属 性 和 方法 。 但 对 生成 事 函 数 的 调用 
却 和 普通 函数 完全 不 一 样 ， 不 是 执行 生成 事 函 数 的 函数 体 ， 而 是 返回 
一 个 生成 器 对 象 。 


生成 怖 是 一 个 对 象 ， 用 以 表示 生成 器 函数 的 当前 执行 状态 。 它 定义 了 
一 个 next() 方 法 ， 后 考 可 恢复 生成 器 函数 的 执行 ， 直 到 遇 到 下 一 条 yield 


语句 为 止 。 这 时 ， 生 成 颖 范 数 中 的 yield 语 句 的 返回 值 就 是 生成 妖 的 
next() 方 法 的 返回 值 。 如 果 生 成 器 函数 通过 执行 retur 语 句 或 者 到 达 画 
数 体 末尾 终止 ， 那么 生成 器 的 nextO 方 法 将 抛 出 一 个 StopIteration 。 


只 要 一 个 对 象 包含 可 抛 出 StopIteration 的 next(0) 方 法 ， 它 就 是 一 个 迭代 
器 对 象 中 。 实 际 上 ， 它 们 是 可 送 代 的 迭代 器 ， 也 就 是 说 ， 它 们 可 以 通 
过 for/in 循 环 进行 裔 历 。 下 面 的 代码 展示 了 如 何人 简单 地 使 用 生成 器 函数 
以 及 对 它 所 生成 的 返回 值 进行 侦 历 : 


// 针 对 一 个 整数 范围 定义 一 个 生成 器 画 数 


function range(min,max){ 


for(let i=Math.ceil(min);i<=max;i++)yield i; 


} 


生成 器 函数 以 获得 一 个 生成 器 ， 并 对 它 进行 遍历 


全 


// 调 用 这 


-AT 小 


for(let n in range(3,8))console.log(n);// 输 H 


生成 右 函 数 不 需要 返回 。 实 际 上 ， 最 典型 的 例子 承 是 用 生成 万 来 生成 
Fibonacci 数 列 : 


// 一 个 用 以 产生 一 个 Fibonacci 数 列 的 生成 器 画 数 


function fibonacci(){ 


let x=0,y=1; 


while(true)t{ 


yield y; 


[x,y]=[y,x+y]; 


} 


} 


// 调 用 生成 器 函数 以 获得 一 个 生成 器 


f=fibonacci( );// 将 生成 器 当做 迭代 器 ， 输 出 Fibonacci 数 列 的 前 10 个 数 


for(let i=0;i<10;i++)console.log(f.next()); 


我 们 注意 到 ，fibonacci0 生 成 辟 函 数 没 有 返回 。 因 此 ， 它 所 产生 的 生成 
右 不 会 抛 出 Stoplteration ° 不 能 把 这 个 生成 絮 当 做 一 个 可 过 代 的 对 象 用 
forin 循 环 进行 志 历 ， 这 个 循环 是 一 个 无 穷 循 环 ， 而 是 把 它 当 做 一 个 迭 
代 需 并 显 式 调用 10 次 它 的 next(0 方 法 来 实现 。 这 段 代 码 运行 后 ， 生 成 噩 
f 依 然 保 持 着 生成 怖 函数 的 执行 状态 。 如 宁 不 再 使 用 ， 则 可 以 通过 调 
用 f.close(0) 方 法 来 释放 它 : 


f.close(); 


当 调 用 了 生成 器 的 close(0) 方 法 时 ， 和 它 相 关 的 生成 器 函数 承 会 终止 执 
行 ， 就 像 在 函数 运行 挂 起 的 位 置 执行 一 条 return 语 句 。 如 果 当 前 挂 起 位 
置 在 一 个 或 者 多 个 try 语 句 块 中 ， 那 么 将 首先 运行 finally 从 句 ， 再 执行 
close() 返 回 。close() 没 有 返回 值 ， 但 如 果 finally 语 句 块 产生 了 异常 ， 这 
个 异常 则 会 传播 给 close()。 


生成 紫 经 常用 来 处 理 序 列 化 的 数据 ， 比 如 元 素 列 表 、 多 行文 本 、 词 法 
分 析 需 中 的 单词 等 。 生 成 右 可 以 像 Unix 的 shell 命 令 中 的 管道 那样 链 式 
使 用 。 有 趣 的 是 ， 这 种 用 法 中 的 生成 器 是 “懒惰 的 ”， 只 有 在 需要 的 时 
候 才 会 从 生成 器 (或 者 生成 器 的 管道 ) 中 “ 取 ” 值 ， 而 不 是 一 次 将 许多 
结果 都 计算 出 来 。 参 照例 11-1。 


例 11-1: 一 个 生成 器 管道 


// 一 个 生成 器 ， 每 次 产生 一 行 字符 串 s 


分 配 一 个 数组 


ny 


// 这 里 没有 使 用 s.sp1Lit()， 因 为 这 样 会 每 次 都 处 理 整 个 字 串 ， 


// 我 们 希望 能 更 " 懒 "一 些 


function eachline(s)t{ 


let p; 


while( (p=s.indexof('\n'))!=-1){ 


yield s.substring(0,p); 


s=s.substring(p+1); 


if(s.length>0)yield s,; 


// 一 个 生成 器 画 数 ， 对 于 每 个 可 迭代 的 的 每 个 元 素 Xx， 都 会 产生 一 个 f(x) 


function map(i,f)t{ 


for(let x in i)yield f(x); 


// 一 个 生成 器 画 数 ， 针 对 每 个 结果 为 true 的 f(x) ， 为 1i 生 成 一 个 元 素 


function select(i,f)t{ 


for(let x in i){ 


if(f(x))yield x; 


// 准 备 处 理 这 个 字符 串 


let text="#comment\n\n hello\nworld\n quit\n unreached\n";// 现 在 创建 一 个 生成 器 管道 来 处 理 


To 


已 


// 首 先 ， 将 文本 分 隔 成 行 


let lines=eachline(text);// 然 后 ， 去 掉 行 首 和 行 尾 的 空格 


let trimmed=map(lines,function(line){return line.trim();});// 最 后 ， 忽 略 空 行 和 注释 


let nonblank=select(trimmed,function(line)t{ 


return line.length>0&&1line[0]!="#" 


});// 现 在 从 管道 中 取出 经 过 删 减 和 第 选 后 的 行 对 其 进行 处 理 


// 直 到 遇 到 "quit" 的 行 


for(let line in nonblank){ 


console.1log(line); 


} 


生成 器 往往 是 在 创建 的 时 候 初 始 化 ， 传 入 生成 器 函数 的 值 是 生成 器 所 
接收 的 唯一 输入 。 然 而 ， 也 可 以 为 正在 执行 的 生成 器 提供 更 多 输入 。 

每 一 个 生成 器 都 有 一 个 send() 方 法 ， 后 者 用 来 重启 生成 器 的 执行 ， 就 像 
next() 方 法 一 样 。 和 next0 不 同 的 是 ，send0 可 以 带 一 个 参数 ， 这 个 参数 
的 值 就 成 为 yield 表 达 式 的 值 (多 数 生 成 器 函数 是 不 会 接收 额外 的 输入 
的 ， 关 键 字 yield 看 起 来 像 一 条 语句 。 但 实际 上 ，yield 是 一 个 表达 式 ， 

是 可 以 有 值 的 ) 。 除 了 next0 和 send0 之 外 ， 还 有 一 种 方法 可 以 重启 生 
成 避 的 执行 ， 即 使 用 throw0。 如 果 调 用 这 个 方法 ，yield 表 达 式 束 将 参 
数 作为 一 个 异常 抛 给 throw0， 比 如 ， 下 面 一 段 代码 : 


// 一 个 生成 器 画 数 ， 用 以 从 某 个 初始 值 开始 计数 


ny 


// 调 


生成 器 的 send( ) 来 进行 增 量 计算 


// 调 


HH 


E 成 器 的 throw( "reset") 


初始 


| 


// 这 里 的 代码 只 是 示例 ，throw( ) 的 这 种 用 法 并 不 推 若 


function counter(initial)f{ 


let nextValue=initial;// 定 义 初始 值 


while(true)t{ 


try{ 


个 值 


HT 


得 到 增 量 


let increment=yield nextValue;// 广 4 


if(increment )// 如 果 我 们 传 入 一 个 增 量 ..… 


nextValue+=increment ;//…. 那 么 使 用 它 


else nextValue++;// 否 则 自 增 1 


全 


catch(e){// 如 果 调 用 了 生成 器 的 throw( )， 则 执行 这 旦 


有 的 逻辑 


if(e==="reset") 


nextValue=initial,; 


else throw e; 


let c=counter(10);// 用 10 来 创建 生成 器 


console.1log(c.next());// 输 出 10 


console.1og(c.send(2) );// 输 出 12 


console.log(c.throw("reset"));// 输 出 10 


11.4.4 数组 推导 


JavaScript 1.7 中 的 数组 推导 (array comprehension) 也 是 从 Python 中 借 
用 过 来 的 一 个 概念 。 它 是 一 种 利用 另外 一 个 数组 或 可 迭代 对 象 来 初始 
化 数组 元 素 的 技术 。 数 组 推导 的 语法 是 基于 定义 元 素 集 合 的 数学 模型 
的 ， 也 就 是 说 ， 表 达 式 和 从 句 的 写法 和 JavaScript 程 序 员 期 望 的 不 一 
人 致 。 但 不 必 担 心 ， 因 为 花 不 了 太 多 时 间 就 可 以 掌握 这 种 新 式 语 法 ， 一 
旦 掌握 它 则 威力 无 穷 。 


下 面 这 上 段 代 码 展示 了 数组 推导 的 写法 ， 这 里 用 到 了 上 文 定 义 的 range0 
四 这 段 代码 用 以 初始 化 一 个 数组 ， 数 组 成 员 是 0 一 100 之 间 的 偶 平 


let evensquares=[x*x for(x in range(0,10))if(x%2===0)] 


这 段 代码 和 下 面 这 五 行 代码 等 价 : 


let evensquares=[]; 
for(x in range(0,10))f{ 
if(x%2===0) 
evensquares.push(x*x); 


} 


一 般 来 讲 ， 数 组 推导 的 语法 如 下 : 


[expression for(variable in object)if(condition)] 


我 们 看 到 ， 数 组 推导 包含 三 个 部 分 : 


一 个 没有 循环 体 的 for/in 或 for/each 循 环 。 这 部 分 推导 包括 一 个 变量 
(或 者 通过 解构 赋值 得 到 的 多 个 变量 ) ， 它 位 于 关键 字 ip 的 左 侧 ，i 
的 右 侧 是 一 个 对 象 “例如 ， 这 个 对 象 可 以 是 一 个 生成 器 、 可 和 迭代 对 象 
或 数组 ) 。 尽 管 这 个 对 象 后 面 没 有 循环 体 ， 这 段 数组 推导 也 能 正确 执 
行 和 迭代， 并 能 给 指定 的 变量 赋值 。 注 意 ， 在 变量 之 前 没有 关键 字 var 和 
let， 其 实 这 里 使 用 了 隐 式 的 let， 在 数组 推导 中 的 变量 在 方 括号 的 外 部 

古 不 可 见 的 ， 也 不 会 履 雷 已 有 的 同名 变量 。 


:在 执行 表 历 的 对 象 之 后 ， 是 圆 括号 中 的 天 键 字 过 和 条 件 表达 式 ， 目 

前 ， 这 个 条 件 表达 式 只 是 用 做 过 滤 迭 代 的 值 。 每 次 for 循 环 产 生 一 个 值 

之 后 会 判断 条 件 表达 式 。 如 有 果 条 件 表达 式 返 回 false， 则 跳 过 这 个 值 ， 

这 个 值 也 不 会 被 添加 至 数组 当中 。if 从 句 是 可 选 的 ， 如 果 省 上 略 的 话 ， 

相当 于 给 数组 推导 补充 一 条 if(true) 从 句 。 

.在 关键 字 for 之 前 是 expression， 可 以 认为 这 个 表达 式 是 循环 体 。 在 失 

代 需 返回 了 一 个 值 并 将 它 赋 给 一 个 变量 ， 且 这 个 变量 通过 了 conditional 

将 计算 这 个 表达 式 ， 并 将 表达 式 的 计算 结果 插入 到 要 创建 
数组 中 。 


下 面 是 一 些 具体 的 例子 : 


data=[2, 3,4, -5];// 一 个 数组 


squares=[x*x for each(x in data)];// 对 每 个 元 素 求 平方 : [4, 9, 16, 25] 


// 如 果 数 组 元 素 是 非 负 数 ， 求 它 的 平方 根 


roots=[Math.sqrt(x)for each(x in data)if(x>=0)]// 将 一 个 对 象 的 属性 名 放 入 新 创建 的 数组 中 


o={a:1,b:2,f:function(){}} 
let allkeys=[p for(p in o)] 
let ownkeys=[p for(p in o)if(o,hasownProperty(p))] 


let notfuncs=[k for([k,v]jin Iterator(o))if(typeof v!=="function")] 


11.4.5 ”生成 器 表达 式 


在 JavaScript 1.8 3 中， 将 数组 推导 中 的 方 括 号 蔡 换 成 圆 括 号 ， 它 就 成 
了 一 个 生成 怖 表达 式 。 生 成 句 表 达 式 〈generator expression) 和 数组 推 
导 非 常 类 似 〈 两 者 在 圆 括号 内 的 语法 几乎 完全 一 样 ) ， 只 是 它 的 返回 
值 是 一 个 生成 侨 对 象 ， 而 不 是 一 个 数组 。 和 数组 推导 相 比 ， 使 用 生成 
器 表达 式 的 好 处 是 可 以 惰性 求 值 (lazy evalution) ， 只 有 在 需要 的 时 
候 求 值 而 不 是 每 次 都 计算 求 什 ， 这 种 特性 可 以 应 用 于 洪 在 的 无 穷 序 
列 。 使 用 生成 颖 表达 式 而 不 用 数组 也 有 不 足 之 处 ， 生 成 侨 只 支持 对 值 
的 顺序 存 取 而 不 是 随机 存 取 。 和 数组 不 同 ， 生 成 锅 并 没有 索引 ， 为 了 
得 到 第 n 个 值 ， 必 须 壳 历 它 之 前 的 n-1 个 值 。 


本 章 前 面 有 这 样 一 个 map() 函 数 : 


function map(i,f){// 对 于 i 的 每 个 元 素 ， 生 成 器 都 会 生成 f(x) 
for(let x in i)yield f(x); 


} 


有 了 生成 锅 表 达 式 ， 束 不 必用 这 个 map0 函 数 了 。 比 如 ， 下 面 这 段 代 码 
定义 一 个 新 的 生成 器 h 用 以 对 每 个 x 生成 f(x)，x 由 生成 硕 g 生 成 : 


let h=(f(x)for(x in 9g)); 


实际 上 ， 例 11-1 中 所 提 到 的 eachline() 生 成 器 ， 我 们 可 以 对 其 进行 重 
写 ， 可 以 通过 这 种 方式 来 去 除 空格 、 注 释 和 至 行 : 


let lines=eachline(text); 
let trimmed=(1.trim()for(l1 in lines)); 


let nonblank=(1 for(1 in trimmed)if(1.length>0&&1[0]!="'#")); 


11.5” 画 数 简 写 


对 于 简单 的 画 数 ，JavaScript 1.81J01 引 入 了 一 种 简写 形式 ， 表 达 式 闭 
包 。 如 有 果 函 数 只 计算 一 个 表达 式 并 返回 它 的 值 ， 天 键 字 retum 和 花 括号 
人 并 将 待 计算 的 表达 式 紧 接着 放 在 参数 列表 之 后 ， 这 里 有 
一 些 内 


let succ=function(x)x+1,yes=function()true,no=function( )false; 


这 只 是 一 种 简单 的 快捷 写法 ， 用 这 种 形式 定义 的 函数 其 实 和 市 花 括 号 
和 关键 子 return 的 函数 完全 一 样 。 这 种 快捷 写法 更 适用 于 当 给 函数 传 入 
男 一 个 芳 数 的 场景 ， 比 如 : 


// 对 数组 按照 数字 大 小 顺序 进行 降序 排列 


data.sort(function(a,b)b-a);// 定 义 一 个 函数 ， 用 以 返回 数组 元 素 的 平方 和 


let sumOofSquares=function(data) 


Array.reduce(Array.map(data,function(x)x*x),function(x,y)x+ty); 


11.6 ”多 catch 从 名 


在 JavaScript 1.5 中 ，try/catch 语 句 已 经 可 以 使 用 多 catch 从 名 了 ， 在 catch 
从 名 的 参数 中 加 入 关键 字 if 以 及 一 个 条 件 判断 表达 式 : 


try{// 这 里 可 能 会 抛 出 多 种 类 型 的 异常 


throw 1; 


} 


catch(e if e instanceof ReferenceError ){// 这 里 处 理 引 用 错误 


} 


catch(e if e==="quit"){// 这 里 处 理 抛 出 的 字符 串 是 "quit" 的 情况 


catch(e :if typeof e==="string"){// 处 理 其 他 字符 串 的 情况 


} 


catch(e){// 处 理 余下 的 异常 情况 


} 


finally{//finally 从 句 正常 执行 


} 


当 产 生 一 个 异常 时 ， 程 序 将 会 党 试 依次 执行 每 一 条 catch 从 句 。catch 从 
句 中 的 命名 参数 即 是 这 个 异常 ， 执 行 到 catch 的 时 候 会 计算 它 的 条 件 表 
达 式 。 如 果 条 件 表 达 式 计算 结果 为 tue， 则 判断 当前 catch 从 句 中 的 逻 
辑 ， 同 时 跳 过 其 他 的 catch 从 名 。 如 果 catch 从 句 中 没有 条 件 表达 式 ， 程 
序 束 会 假设 它 包 含 一 个 if true 的 条 件 ， 如 果 它 之 前 的 catch 从 句 都 没有 触 
发 ， 那 么 这 条 catch 语 句 一 定 会 执行 。 如 果 所 有 有 的 catch 从 句 都 包含 条 
件 ， 但 没有 一 个 条 件 是 tme， 那 么 程序 会 加 上 抛 出 这 个 未 捕获 的 异 


常 。 注 意 ， 因 为 catch 从 句 中 的 条 件 表达 式 已 经 在 圆 括号 内 了 ， 因 此 也 
束 不 必 像 普通 的 条 件 语句 一 样 再 给 它 包 襄 一 对 辆 括号 。 


11.7 E4X:ECMAScript for XML 


"ECMAScript for XML" 倍 称 E4X， 是 JavaScript 的 一 个 标准 扩展 出], 

它 为 处 理 XML 文 档 定 义 了 一 系列 强大 的 特性 。Spidermonkey 1.5 和 
Rhino 1.6 已 经 文 持 E4X。 由 于 多 数 浏 哆 器 厂商 还 未 文 持 E4X， 因 此 E4X 
被 认为 是 一 种 基于 Spidermonkey 或 Rhino 引 警 的 服务 器 端 技术 。 


E4X 将 XML 文档 〈 或 者 XML 文档 的 元 素 或 属性 ) 视 为 一 个 XML 对 象 ， 
将 XML 片段 〈 在 常见 的 父 对 象 中 包含 多 个 XML 元 素 ) 视 为 一 个 紧密 相 
关 的 XML 列 表 对 象 。 本 市 会 介绍 创建 和 使 用 XML 对 和 象 的 一 些 方法 。 
XML 对 象 是 一 类 全 新 的 对 象 ，E4X 中 定义 了 专门 的 语法 来 描述 它 〈 接 
下 来 会 看 到 ) 。 我 们 知道 ， 除 了 函数 之 外 所 有 标准 的 JavaScript 对 象 的 
typeof 运 算 结 果 都 是 "object"。 正 如 函数 和 原始 的 JavaScript 对 象 有 所 区 
别 一 样 ，XML 对 象 也 和 原始 JavaScript 对 象 不 同 ， 对 它们 进行 typeof 运 
算 的 结果 是 "xml"。 在 客户 端 JavaScript 中 (参照 第 15 章 ) ，XML 对 象 
和 DOM (文档 对 象 模型 ) 对 象 没 有 任何 关系 ， 理 解 这 一 点 非常 重要 。 
E4X 标 准 也 针对 XML 文档 元 素 的 E4X 和 DOM 表 示 方 式 之 间 的 转换 做 了 
规定 ， 这 个 规定 是 可 选 的 ，Firefox 并 没有 实现 它们 之 间 的 转换 。 这 也 
是 E4X 更 适用 于 服务 硕 端 编程 的 原因 。 


本 太 会 给 出 E4X 的 一 个 快速 入 | ] 教 程 ， 而 不 会 进行 更 深入 的 讲解 。 
XML 对 象 和 XML 列表 对 象 的 很 多 方法 本 书 中 并 未 介绍 。 第 四 部 分 也 不 
2 如 果 读者 布 望 进一步 了 解 E4X， 可 以 参照 官方 文 


E4X 只 定义 了 很 少 的 新 语言 语法 。 最 显著 的 新 语法 当 属 将 XML 标 签 引 
入 JavaScript 语 言 中 。 可 以 在 JavaScript 代 码 中 直接 书写 XML 标 签 直 接 
量 ， 比 如 : 


// 创 建 一 个 XML 对 象 


var pt= 


<periodictable> 


<element id="1"><name>Hydrogen</name> </element> 


<element id="2"><name>Helium</name> </element> 


<element id="3"><name>Lithium</name> </element> 


</periodictable> ;// 给 这 个 表格 添加 一 个 新 元 素 


pt.element+=<element id="4"><name>Beryllium</name> </element>，; 


XML 直接 量 语法 中 使 用 花 括 号 作为 转 义 字符 ， 可 以 在 XML 中 磐 入 
JavaScript 表 达 式 。 例 如 ， 这 里 是 另外 一 种 创建 XML 元 素 的 方法 : 


pt=<periodictable></periodictable> ;// 创 建 一 个 空 表格 


var elements=["Hydrogen", "Helium", "Lithium"];// 待 添加 的 元 素 


// 使 用 数组 元 素 创 建 XML 标 签 


for(var n=0;n<elements.1length;n++){ 


pt.element+=<element id={n+1}> <name> {elements[n]}</name> </element>,; 


除了 使 用 直接 量 语 法 ， 我 们 也 可 以 将 字符 串 解 析 成 XYML。 下 面 的 代码 
为 上 段 代 码 创 建 的 节操 增加 了 一 个 新 元 素 : 


pt.element+=new XML('<element id="5"><name>Boron</name> </element>'); 


当 涉 及 XML 片段 的 时 候 ， 使 用 XMLListO 蔡 换 XML0: 


pt.element+=new XMLList('<element id="6"><name>Carbon</name> </element>'+'< 


element id="7"><name>Nitrogen</name></element> '); 


E4X 提 供 了 一 些 显 而 易 见 的 语法 用 以 访问 所 创建 的 XML 文 档 的 内 容 : 


var elements=pt .element;// 得 全 


所 有 <element> 标 签 组 成 的 一 个 列表 


Le 


var names=pt .element.name;// 得 到 所 有 的 <name> 标签 的 一 个 列表 


var n=names[0];//"Hydrogen" ( 毛 ) ，name 的 第 0 个 标签 的 内 容 


yh 


运算 符 ” (descendant operator) ， 可 以 用 它 替 换 普 通 的 点 (.) 成 员 ; 
问 运算 符 ; 


E4X 同 样 为 操作 XML 对 象 提供 了 语法 文 持 ， 点 点 (..) 运 筑 香 十 " 厄 代 


St 


// 另 一 种 得 到 所 有 < name > 标签 对 应 列表 的 方法 


var names2=pt. .name; 


E4X 其 至 定义 了 通配符 运算 : 


// 得 到 所 有 < element > 标签 的 所 有 子 节点 


// 这 也 是 得 到 所 有 < name > 标签 对 应 列表 的 另外 一 种 方法 


var names3=pt.element.*,; 


E4X 中 使 用 字符 @ 来 区 分 属性 名 和 标 宅 名 (从 XPath 中 借用 过 来 的 语 
法 ) 。 比 如 ， 可 以 这 样 来 获得 一 个 属性 : 


//" 氮 "的 原子 序数 是 多 少 


var atomicNumber=pt.element[1].@id; 


可 以 使 用 通配符 来 获得 属性 名 @*: 


// 获 得 所 有 的 <element> 标签 的 所 有 属性 


var atomicNums=pt.element .Q@* ， 


E4X 其 至 包含 了 一 种 强大 日 极 其 简洁 的 语法 用 来 对 列表 进行 过 滤 ， 过 
滤 条 件 可 以 是 任意 谓词 表达 式 : 


// 对 所 有 的 <element > 元 素 组 成 的 一 个 列表 进行 过 滤 


// 过 滤 出 那些 id 属性 小 于 3 的 元 素 


var 1ightELements=pt.element,(@id<3);// 对 所 有 的 element 元 素 组 成 的 列表 进行 过 滤 


// 过 滤 出 那些 name 以 B 开 始 的 元 素 


// 然 后 得 到 过 滤 后 元 素 的 < name > 标签 列表 


var bElementNames=pt.element. (name.charAt(0)=='B').name; 


11.4.1 ” 方 讲 到 for/each 循 环 是 非常 有 用 的 ， 但 在 E4X 标 准 中 对 for/each 
循环 有 了 新 的 定义 ， 可 以 用 forveach 来 遍历 XML 标签 和 属性 列表 。 
foreach 和 fovin 循 环 非常 类 似 ，fovin 循 环 用 以 遍历 对 象 的 属性 名， 
foreach 循 环 用 以 遇 历 对 象 的 属性 值 : 


// 输 出 元 素 周期 表 中 的 每 个 元 素 名 


for each(var e in pt.element){ 


console.1og(e.name ) ， 


// 输 出 每 个 元 素 的 原子 序数 


for each(var n in pt.element.@*)console.1o0og(n); 


En 


和 属性 进行 修改 或 添加 新 标签 或 属性 : 


// 修 改 氨 元 素 的 <element> 标签， 给 它 添加 一 个 新 属性 


// 像 下 面 这 样 添加 一 个 子 元 素 


汉 


// 

//<element id="1"symbol="H"> 
//<name>Hydrogen</name> 
//<weight>1.00794</weight> 
//</element> 

// 

pt.element[0].@symbol="H"; 


pt.element[0] .weight=1.00794; 


过 标准 的 delete 运 算 符 也 可 以 方便 地 删除 属性 和 标签 


delete pt.element[0].@symbol;// 删 除 一 个 属性 


ws 


delete pt. .weight;// 删 除 所 


有 的 <widget > 标签 


我 们 可 以 通过 E4X 所 提供 的 语法 来 进行 大 部 分 的 XML 操作 。E4X 同 样 
定义 了 能 够 调用 XML 对 象 的 方法 ， 例 如 ， 这 里 用 到 了 


insertChildBefore() 方 法 : 


pt.insertcCchildBefore(pt.elemen 


t[1]， 


<element id="1"><name>Deuterium</name> </element> ); 


E4X 中 是 完全 文 持 命名 空间 的 ， 它 为 使 用 XML 命 名 空间 提供 了 语法 文 


持 和 API 支 持 : 


// 声 明 默认 的 命名 空间 


default xml namespace="http://www.w3.0rg/1999/xhtml";// 这 里 也 是 一 个 包含 


文档 


d=<htmil> 


<body> 


This is a small red square: 


些 svg 标 签 的 xhtml 


<svg xmlns="http://www.w3.org/2000/svg"width="10"height="10"> 


<rect x="O"y="O"width="10"height="10"fill="red"/> 


</svg> 


</body> 


</html>//body 元 素 和 它 的 命名 空间 旦 


var tagname=d.body.name(); 


有 的 Uri 及 划 


localName 


var bodyns=tagname.uri; 


var localname=tagname .localName;// 选 择 <svg>> 元 素 需 要 多 做 一 些 工 作 ， 因 为 <svg> 不 在 默认 的 命名 


空间 中 


// 因 此 需要 为 svg 创 建 一 个 命名 空间 ， 并 使 用 : :运算 符 将 命名 空间 添加 至 标签 名 中 


var svg=new Namespace('http://www.w3.org/2000/svg'); 


Var color=d..svg::rect.Q@fill//"red" 


[1].Firefox 的 JavaScript 引 敬 有 很 多 种 ， 大 多 数 是 我 们 熟悉 的 “ 锋 ” 系 列 ， 
文中 所 提 到 的 Spidermonkey (用 于 Firefox 1.0~3.0) 便 是 其 中 一 种 ， 此 
外 还 包括 TraceMonkey (用 于 Firefox 3.5~3.6) 、JaegerMonkey (用 于 
Firefox4.0) 以 及 最 新 开发 的 IonMonkey。 有 关 Spidermonkey 的 更 多 信 
轧 可 参照 : http:/en.wikipedia.org/wiki/SpiderMonkey) 。 


[2] 理论 上 ， 只 要 是 Mozilla 血 统 的 JavaScript 引 警 的 开发 环境 都 可 以 文 
持 文 中 提 到 的 扩展 特性 。 


[3]. 这 里 所 说 的 双重 身份 是 指 浏 览 絮 窗口 对 象 除了 作为 普通 的 全 局 对 象 
之 外 ， 还 能 通过 它们 去 操作 浏览 硕 和 DOM 。 


[4]“ 外 观 面板 * 和 “代理 对 象 是 设计 模式 中 的 两 个 术语 ， 分 别 对 应 “外 
观 模 式 *“ 和 “代理 模式 ”。 更 多 内 容 请 参照 http://zh.wikipedia.org/wiki/ 外 
观 模式 和 http://zh.wikipedia.org/wiki/ 代 理 模 式 。 


[5] 详情 请 参照 http:/www.sitepen.com/blog/2008/08/01/secure-mashups- 
with-dojoxsecure ° 


[6]_Caja 是 西班牙 语 ， 意 思 是 “ 沙 使”，Caja 的 评 情 请 参照 : 
http://code.google.com/p/google-caja/ ° 


[7] 原文 是 "It expects the version number times ten"， 作 者 表述 有 误 ， 应 
当 是 版 本 号 乘 以 100 而 不 是 乘 以 10。 在 命令 行 环境 中 ， 直 接 执行 
version() 可 以 返回 当前 采用 的 JavaScript 版 本 号 ， 返 回 值 通常 为 150、 
160、170 等 。 


[8]. 生 成 器 有 时 也 叫做 “生成 器 迭代 器 ”(〈generator iterator) ， 用 以 区 分 
创建 它 的 生成 万 男 数 。 在 本 章 里 ， 我 们 统一 使 用 术语 “生成 万 ?来 表 
示 “ 生 成 絮 从 代 器 ”， 在 其 他 参考 文献 中 ， 生 成 器 可 能 会 同时 指 代 生成 
句 男 数 和 生成 右 和 迭代 器 。 

[9]. 本 书 拟稿 时 ，Rhino 还 未 开始 支持 生成 右 表 达 式 。 

[10]1 本 书 撰 稿 时 ，Rhino 还 未 开始 文 持 生 成 万 表达 式 。 

[1L1]_E4X 是 由 ECMA-357 规 范 定义 的 ， 可 以 从 这 里 查看 官方 文档 : 


http:/www.ecma-international.org/publications/standards/Ecma-357.htm ° 


第 12 章 ”服务 如 端 JavaScript 


前 面 的 章节 已 经 详细 介绍 了 JavaScript 语 言 核心 ， 我 们 即将 开始 本 书 的 
第 二 部 分 ， 该 部 分 会 介绍 JavaScript 仍 入 Web 浏 览 右 的 原理 ， 并 洱 盖 庞 
杂 的 客户 端 JavaScript API。 可 以 说 JavaScript 是 基于 Web 的 编程 语言 ， 
因为 绝 大 部 分 JavaScript 代 码 是 为 web 浏览 器 而 编写 。 但 是 作为 一 门 高 
效 和 通用 的 语言 ，JavaScript 理 所 当然 能 用 于 其 他 编程 工作 。 所 以 在 过 
渡 到 服务 端 JavaScript 之 前 ， 我 们 先 快 束 了 解 一 下 为 外 两 种 JavaScript 敬 
入 。Rhino 十 基于 Java 的 JavaScript 解 析 侣 ， 实 现 了 通过 JavaScript 程 序 访 
问 整 个 Java API，12.1 节 将 会 介绍 它 。Node 1 由 是 Google 的 V8 JavaScript 
解析 器 的 一 个 特别 版 本 ， 它 在 底层 绑 定 了 POSIX (Unix) API， 包 括 文 
件 、 进 程 、 流 和 套 接 字 等 ， 并 侧重 于 异步 JO、 了 网 络 和 HTTP。12.2 世 将 


SI 


本 划 标 题 表明 本 章 是 关于 “服务 器 端 * 的 JavaScript，Node 和 Rhion 常 用 于 
创建 脚本 服务 器 。 但 “服务 器 * 这 个 词 也 意味 着 “Web 浏 宽 器 之 外 的 任何 

事情 ?”。Rhino 程 序 能 使 用 Java 的 Swing 框架 创建 图 形 UI， 而 Node 上 运行 
的 JavaScript 程 序 可 以 像 shell 脚 本 那样 去 操作 文件 。 


本 章 非常 简短 ， 仪 准备 重点 介绍 在 Web 浏 览 器 之 外 使 用 JavaScript 的 一 
些 方式 ; 不 会 尝试 全 面 介绍 Rhino 和 Node， 第 三 部 分 也 不 会 包 泗 这 里 讨 
论 的 API， 并 且 不 会 详细 介绍 Java 平 台 或 POSIX API， 接 下 来 关于 Rhion 
的 章节 假定 读者 有 一 定 的 Java 经 验 ， 关 于 Node 的 章节 假定 读者 有 一 定 
的 底层 Unix API 的 经 验 。 


12.1 用 Rhino 脚 本 化 Java 

Rhino 是 一 种 用 Java 编 写 的 JavaScript 解 释 絮 ， 其 设计 目标 是 借助 于 强大 
的 Java 平 台 API 实 现 轻 松 编 写 JavaScript 程 序 。Rhino 能 自动 完成 
JavaScript 原 生 类 型 的 Java 原 生 类 型 之 间 的 相互 转换 ， 因 此 JavaScript 脚 
本 可 以 设置 、 查 询 Java 属 性 ， 并 调用 Java 方 法 。 


获得 Rhino 


Rhino 是 Mozilla 开 发 的 免费 软件 ， 可 以 从 http://www.mozilla.org/rhino/ 下 
载 。Rhino 的 1.7r2 版 本 实现 了 ECMAScript3， 以 及 在 11 章 介绍 的 很 多 语 
言 扩 展 。Rhino 软 件 比 较 成 熟 ， 不 会 经 常 发 布 新 版 本 。 在 写本 章 时 ， 


1.7r3 的 预 贤 版 已 出 现在 源码 库 中 ， 它 实现 了 ECMAScript 5 的 部 分 内 容 
4。Rhino 打 包 为 JAR 文 件 发 布 ， 可 以 从 使 用 下 面 这 行 命令 开始 探索 之 
旅 : 


java-jar rhino1l_7R2/js.jar program.js 


如 果 省 略 program.js，Rhino 会 开启 一 个 交互 的 shell 界 面 ， 它 对 壬 试 人 简单 
或 单行 的 程序 比较 有 用 。 


Rhino 定 义 了 少量 重要 的 全 局 画 数 ， 不 过 它们 都 不 是 JavaScript 的 核心 组 
成 部 分 : 


// 特 定 于 骨 入 的 全 局 函数 : 输入 help( ) 获 取 更 多 的 rhino 提 示 


print(X) ;// 全 局 输出 画 数 ， 将 内 容 输出 到 控制 台 


version(170);// 告 诉 Rhino 需 要 使 用 JS 1.7 的 语言 特性 


load(filename, ... );// 加 载 并 执行 1 个 或 多 个 JavaScript 代 码 文件 


readFile(file);// 读 取 文 本 文件 ， 并 以 字符 串 的 形式 返回 内 容 


readUrl(url1);// 读 取 URL 的 原文 内 容 ， 并 以 字符 串 的 形式 返回 内 容 


下 


和 一 个 新 线程 中 加 载 执行 文件 


spawn(f) ;// 运 行 f( ) 或 


了 
hn 


runcommand(cmd, [args...]);// 使 用 0 或 多 个 命令 行 参数 来 运行 系统 命令 


quit()// 退 出 Rhino 


注意 print() 函 数 ， 在 本 节 我 们 将 用 它 取 代 console.log()。Rhino 会 将 Java 
包 和 类 表示 成 JavaScript 对 象 : 


// 全 局 变量 Packages 是 Java 包 层次 结构 的 根 


Packages.any.package.name// 任 何 来 自 Java CLASSPATH 的 包 


己 TR 县 


java.lang// 全 局 变量 java 是 Packages , java 的 短 名 
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javax.swing//javax 是 Packages .javax 的 短 名 


// 类 : 能 像 包 的 属性 一 样 存 取 


Var System=java.lang.System; 


var JFrame=javax.swing.JFrame,; 


由 于 Rhino 把 包 和 类 表示 为 JavaScript 对 象 ， 因 此 可 以 将 它们 赋值 给 变量 
从 而 得 到 相应 的 短 名 。 如 果 愿 意 ， 也 可 以 用 更 正式 的 方式 导入 它们 : 


var ArrayList=java.util.ArrayList;// 为 类 创建 短 名 


importClass(java.util.HashMap);// 其 等 同 于 : var HashMap=java.util.HashMap 


// 使 用 importPackage( ) 导 入 包 (惰性 地 ) 


// 不 要 导入 java.1lang: 太 多 的 名 字 和 JavaScript 全 局 变量 有 冲突 


importPackage(java.util); 


importPackage(java.net);// 另 一 技术 : 传 入 任意 数量 的 类 和 包 给 JavaImporter() 


// 并 在 with 语 句 中 使 用 它 返 回 的 对 象 


var guipkgs=JavaImporter(java.awt,]java.awt.event,Packages.javax.swing); 


with(guipkgs){/* 这 里 定义 Font、ActionListener 和 JFrame 等 类 */ 


Java 类 能 使 用 new 进 行 实例 化 ， 束 像 JavaScript 类 一 样 : 


// 对 象 :使 用 new 实 例 化 Java 类 


var f=new java.io.File("/tmp/test");// 我 们 随后 将 使 用 这 些 对 象 


Var out=new java.io.Filewriter(f); 


Rhino 让 JavaScript 的 instanceof 运 算 符 能 用 于 Java 对 象 和 类 : 


f instanceof java.io.File//=>true 


out instanceof java.io.Reader//=>false: 它 是 writer 而 非 Reader 


out instanceof java.io.Closeable//=>true:Writer 实 现 Closeable 


如 你 所 见 ， 在 之 前 的 对 象 实例 化 示例 中 ，Rhino 人 允许 把 值 传 给 Java 构 造 
函数 ， 并 将 构造 函数 的 返回 值 赋 给 JavaScript 变 量 。 (注意 ， 在 这 个 例 
子 中 Rhino 执 行 了 隐 式 类 型 转换 JavaScript 字符 串 "/type/test" 上 自动 转换 
成 Java 的 java.lang.String 值 。) Java 方 法 更 像 Java 构 造 画 数 ， 而 Rhino 允 
许 JavaScript 程 序 调 用 Java 方 法 : 


// 静 态 Java 方 法 工作 类 似 JavaScript 函 数 


java.lang.System.getProperty("java.version")// 返 回 Java 版 本 


var isDigit=java.lang.Character .isDigit;// 把 静态 方法 赋值 给 变量 


isDigit("2")//=>true: 阿 拉 伯 数字 2 


// 调 用 Java 对 象 f 的 实例 方法 ，out 已 经 在 前 面 创建 


out .write("Hello World\n"),; 


out.close( ); 


Var len=f.length(); 


Rhino 也 允许 JavaScript 代 码 查 询 、 设 置 Java 类 的 静态 字段 和 Java 对 象 的 
实例 字段 。Java 类 通常 利用 getter 和 setter 方 法 避免 定义 公共 字段 。 当 
getter 和 setter 方 法 存在 时 ，Rhino 将 其 显示 为 JavaScript 的 属性 : 


// 读 取 Java3 


var stdout=java.lang.System.out;//Rhino 把 getter 和 setter 方 法 映射 到 单个 JavaScript 属 性 


的 静态 字段 


f.name//=>"/tmp/test": 调 用 f.getName() 


f.,directory//=>false: 调 用 f.isDirectory() 


Java 人 允许 重 载 方 法 ， 它 们 名 字 相 同 但 签名 不 同 。 一 般 ，Rhino 能 根据 传 
递 的 参数 类 型 判断 出 所 要 调用 方法 的 版 本 。 不 过 偶尔 也 需要 通过 名 字 
和 签名 来 明确 识别 方法 : 


// 假 设 Java 对 象 O 有 一 个 名 为 f( ) 的 方法 ， 它 接受 int 或 float 参 数 
// 在 JavaScript 中 ， 必 须 明 确 指 定 签名 
of[ 'f(int)'](3);// 调 用 int 方 法 


o['f(float)'](Math.PI);// 调 用 float 方 法 


使 用 fow/in 循 环 能 志 历 Java 类 和 对 象 的 方法 、 字 段 和 属性 : 


importClass(java.lang.System); 


for(var m in System)print(m);// 输 出 java.1lang.System 的 静态 成 员 


for(m in ff)print(m);// 输 出 java.io.File 的 实例 成 员 


// 六 


这 利 


I 方 六 


枚 举 包 i 


FE 意 不 能 


的 类 


for(c in java.lang)print(c);// 无 法 工作 


Rhino 人 允许 JavaScript 程 序 获取 、 设 置 Java 数 组 的 元 素 ， 就 像 它们 是 
JavaScript 数 组 那样 。 当 然 ，Java 数 组 和 JavaScript 数 组 并 不 完全 一 致 : 
Java 数 组 长 度 固定 、 元 素 类 型 统一 ， 但 不 具备 像 slice0) 这 样 的 JavaScript 
方法 。 由 于 没有 现成 的 JavaScript 语 法 可 供 Rhino 扩 展 JavaScript 程 序 从 而 
创建 新 的 Java 数 组 ， 因 此 必须 使 用 java.lang.reflect.Array 类 来 实现 : 


// 分 别 创建 一 个 长 度 为 19 的 字符 捉 数组 和 一 个 长 度 为 128 字 节 的 数组 


var words=java.lang.reflect.Array.newInstance(java.lang.string,10); 


var bytes=java.lang.reflect.Array.newInstance(java.lang.Byte.TYPE,128);// 一 旦 创建 了 数 
组 ， 就 能 像 JavaScript 数 组 一 样 使 用 它们 


for(var i=0;i<bytes.length;i++)bytes[i]=i; 


Java 编 程 经 常 涉及 实现 接口 ， 这 在 GUI 编 程 中 很 常见 ， 每 个 事件 处 理 程 
a 实现 事件 监听 接口 ， 接 下 来 的 例子 将 闭 示 如 何 实现 Java 事 件 监 
昕 接口 : 


// 接 口 : 如 下 所 示 实 现 接 


var handler=new java.awt.event.FocusListener({ 


focusGained:function(e){print("got focus");}, 


focusLost:function(e){print("lost focus");} 


i 


象 类 


});// 用 同样 的 方式 扩展 


var handler=new java.awt.event .WindowAdapter({ 


windowClosing:function(e){java.lang.System.exit(0);} 


});// 当 接口 只 有 一 个 方法 ， 可 以 使 


button.addActionListener(function(e){print("button clicked");});// 如 果 # 


方法 都 有 村 


目 同 的 签名 


个 函数 取而代之 


// 则 可 以 使 用 


// 且 Rhino 将 把 方法 名 作为 最 后 一 个 参数 传 入 


人 


单独 的 函数 作为 接 


的 实现 


frame.addwindowListener(function(e,name)t{ 


if(name==="windowClosing")java.lang.System.exit(0); 


需要 一 个 对 象 实现 多 


}) ;// 如 玉 


Var o=new JavaAdapter(java.awt.event.ActionListener,java.lang.Runnable,t 


接 


， 则 使 


run:function(){},// 实 现 Runnable 


actionPerformed:function(e){}// 实 现 ActionListener 


}); 


当 Java 方 法 抛 出 异 第 ， 


JavaScript 错 误 对 象 的 javaException 属 性 可 以 获取 原始 的 Java 
java.lang.Exception 对 象 : 


try{ 


java.lang.System.getProperty(null);//null 不 是 合法 的 参数 


catch(e){//e 是 JavaScript 异 常 


print(e.javaException);// 它 包含 一 个 java.1lang.NullPointerException 异 常 


jJavaAdapter 


Rhino 将 其 作为 JavaScript 异 党 传递。 通过 


象 类 的 所 有 


二 


最 后 ， 必 须 注 意 Rhino 的 类 型 转换 。Rhino 会 按 需要 上 自动 转换 原始 数 
字 、 布尔 值 和 null。Java 的 char 类 型 被 当做 JavaScript 数 字 对 符 ， 因 为 
JavaScript 没 有 字符 类 型 。JavaScript 字 符 串 能 目 动 转换 成 Java 字 符 串 ， 
但 这 可 能 也 是 个 绊脚石 ， 因 为 像 java.lang.String 对 象 这 样 的 Java 字 符 串 
不 能 转换 回 JavaScript 字 符 串 。 注 意 前 面 出 现 过 的 这 行 代码 : 


var version=java.lang.System.getProperty("java.version"); 


调用 这 行 代 码 后 ， 变 量 version 保 存 了 一 个 java.lang.String 对 象 。 这 行 代 
码 的 行为 看 起 来 像 JavaScript 字 符 串 ， 其 实 区 别 巨 大 。 首 先 ，Java 字 符 
串 有 length() 方 法 而 没有 length 属 性 。 其 次 ， 对 Java 字 符 串 进行 typeof 运 
算得 到 的 结果 是 "object"。 无 法 通过 调用 其 toString( 方 法 把 Java 字 符 串 
转换 成 JavaScript 字 符 串 ， 为 所 有 的 Java 对 象 都 有 目 己 的 toString() 方 
法 ， 后 者 返回 java.lang.String。 为 了 把 Java 值 转换 成 字符 串 ， 请 将 它 传 
递 给 JavaScript 的 StringO 函 数 : 


var version=String(java.lang.System.getProperty("java.version")); 


Rhino 示 例 


示例 12-1 是 一 个 简单 的 Rhino 应 用 ， 它 演示 了 前 面 介 绍 的 很 多 特性 和 技 
术 。 本 示例 使 用 javax.swing GUI 包 、java.net 网 络 包 、java.io 流 的 输入 / 
输出 (VO) 包 和 Java 的 多 线程 功能 实现 一 个 简单 的 下 载 管 理 器 应 用 ， 
它 把 对 应 URL 的 文件 下 载 到 本 地 ， 并 在 下 载 时 显示 下 载 进度 。 图 12-1 展 
示 了 当 两 个 下 载 挂 起 时 应 用 的 大 致 样子 。 
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图 12-1 使 用 Rhino 创 建 的 GUI 


例 12-1: 用 Rhino 实 现 的 下 载 管理 器 应 用 


// 导 入 Swing GUI 组 件 和 一 些 其 他 组 借 


简单 的 Java GUI 实现 下 载 管理 器 应 


让 


importPackage(javax. swing); 


importClass(javax.swing.border.EmptyBorder); 


importClass(java.awt.event.ActionListener); 


importClass(java.net.URL); 


importClass(java.io.FileOutputStream); 


importClass(java.lang.Thread);// 创 建 一 些 GUI 小 部 件 (widget) 


var frame=new JFrame("Rhino URL Fetcher");// 应 用 窗 体 


var urlfield=new JTextField(30);//URL 输 入 字段 


var button=new JButton("Download");// 开 始 下 载 的 按钮 


var filechooser=new JFilechooser();// 文 件 选择 对 话 框 


var row=Box.createHorizontalBox();// 用 于 放置 字段 和 按钮 的 方 框 


var co0l=Box.createVerticalBox( );// 用 于 放置 数据 行 和 进度 条 


var padding=new EmptyBorder(3,3,3,3);// 填 充 数据 行 的 空 


ALL 


巴 它们 组 装 一 起 并 显示 这 个 GUI 


row.add(button) ;// 把 按 旬 


col.add(row);//# 


frame.add(col);//# 


row.setBorder(padding);// 为 行 增加 一 些 空 


frame .pack();// 设 


frame .visible=true;// 设 置 窗 体 可 


i 


row.add(urlfield);// 把 


后 


i 入 字段 放 入 行 


0 


放 入 行 


巴 行 放 入 允 


巴 列 放 入 窗 体 中 


| 中 


为 最 小 值 


| 


// 当 窗 体 中 发 生 任何 寻 


了 件 都 会 调用 这 个 函数 


frame.addwindowListener(function(e,name){// 如 户 关 闭 窗 体 ， 退 出 这 个 应 


if(name==="windowClosing")//Rhino 加 入 了 name 参 数 


java.lang.System.exit(0); 


});// 当 用 户 


和 有 击 按 饵 


时 ， 调 


button.addActionListener(function(){ 


try{// 创 建 java.net .URL 表 示 源 URL 


//( 这 会 检查 


var url=new URL(urlfield.text);// 告 诉 用 户 选 择 保存 URL 内 容 的 文件 


var response=filechooser.showSaveDialog(frame);// 如 果 单 击 Ccancel 按 钮 ， 立 即 退 4H 


if(response!=JFileChooser .APPROVE_OPTION)return;// 否 则 ， 获 取 java.io.File 表 示 


户 的 输入 是 否 符合 语法 规则 ) 


上 


var file=filechooser .getSelectedFile( );// 现 在 启动 一 个 新 线程 下 载 URL 


new java.lang.Thread(function(){download(ur]l,file);}).start(); 


标 文件 


catch(e){// 如 果 出 现 错 误 ， 显 示 一 个 对 话 框 


JOptionPane.showMessageDialog(frame,e.message, "Exception", 


JOptionPane .ERROR_MESSAGE); 


});// 使 用 java.net .URL 等 下 载 URL 的 内 容 ， 使 用 java.io.File 等 


// 在 JProgressBar 组 件 中 显示 下 载 进度 


// 这 将 在 一 个 新 线程 中 调 


function download(url,file){ 


try{// 每 次 下 载 一 个 URL 时 ， 我 们 会 添加 一 个 新 的 数 


// 数 据 行 中 会 显示 URL、 文 件 名 和 下 载 进 度 


var row=Box.createHorizontalBox( );// 创 建 数 


row.setBorder (padding);// 填 充 它 的 空 


var label=url.toString()+":";// 泣 示 URL 


ED 


row.add(new JLabel(label));// 在 Jlabeld 


var bar=new JProgressBar(0,100);// 加 入 进 


bar .stringPainted=true;// 显 示 文 件 名 


| 


bar .string=file.toString();// 在 进度 条 


I 


row.add(bar );// 把 进度 条 加 入 新 的 行 吕 


UD 


col.add(row);// 把 数据 行 加 入 列 


度 条 


据 行 到 


四 行 


体 


内 容 保存 到 一 个 文 伯 


frame.pack() ;// 调 整 窗 体 大 / 


六 


// 我 们 不 知道 URL 的 大 小 ， 所 以 进度 条 是 动画 


bar .indeterminate=true;// 如 果 可 能 ， 立 即 连接 服务 器 并 获取 URL 的 长 度 


var conn=url.openConnection();// 得 到 java.net.URLConnection 


牧 往 站 术 尖 


conn.connect( );// 连 接 且 等 得 连接 


var len=conn.contentLength;// 如 果 能 得 到 URL 长 度 就 设 


if(len){// 如 果 长 度 已 知 ， 那 么 


bar .maximum=len;// 设 置 进度 条 展示 


bar .indeterminate=false;// 下 载 的 百分比 


// 得 到 输入 和 输出 流 


var input=conn.,inputStream;// 从 服务 器 读 取 字 节 


var output=new FileoutputStream(file);// 把 字 节 写 入 文件 


区 


// 创 建 4KB 的 数组 作为 输入 缓 ; 


var buffer=java.lang.reflect.Array.newInstance(java.lang.Byte.TYPE, 4096); 


Var Num, 


while( (num=input.read(buffer))!=-1){// 读 取 然 后 循环 至 EOF 


output .write(buffer,0,num);// 把 字 节 写 入 文件 


bar .value+=num;// 更 新 进度 条 


output .close( );// 完 成 后 关闭 流 


input.close(); 


} 


catch(e){// 如 果 发 生 错误 ， 在 进度 条 上 显示 错误 


if(bar)t{ 


bar .indeterminate=false;// 停 止 动画 


bar .string=e.toString();// 用 错误 取代 文件 名 


了 
} 


} 


12.2 ”用 Node 实 现 异 步 /O 


Node 是 基于 C++ 的 高 速 JavaScript 解 释 器 ， 绑 定 了 用 于 进程 、 文 件 和 网 
络 套 接 字 等 底层 Unix API， 还 绑 定 了 HTTP 客 户 端 和 服务 器 API。 除 了 
一 些 专门 命名 的 同步 方法 外 ，Node 的 绑 定 都 是 异步 的 ， 且 Node 程 序 默 
认 绝 不 阻塞 ， 这 意味 着 它们 通常 具备 强大 的 可 伸缩 能 力 并 能 有 效 地 处 
理 高 负荷 。 由 于 API 是 异步 的 ， 因 此 Node 依 赖 事件 处 理 程序 ， 其 通常 使 
用 髓 套 函 数 和 闭 包 来 实现 中 。 


本 节 重 点 介绍 Node 部 分 最 重要 的 API 和 事件 ， 但 这 些 文档 并 不 完整 。 请 
到 jhttp://modejs.org/api/ 查 看 Node 的 联机 文档 | 生 -。 


获得 Node 


Node 是 免费 软件 ， 可 以 从 http://nodejs.org 上 下 载 。 在 写本 章 时 ，Node 
依旧 处 于 活跃 开发 期 ， 不 过 尚 无 二 进 制版 本 一 一 你 必须 自己 获取 并 编 
译 源码 。 本 节 的 例子 是 在 Node 0.4 版 本 下 编写 和 测试 的 中.。 这 些 API 尚 
未 完全 确定 ， 但 这 里 介绍 的 基本 原则 在 未 来 不 会 有 太 多 改变 。 


Node 是 在 Google 的 V8 JavaScript 引 擎 上 构建 而 成 。Node 0.4 使 用 的 是 V8 
的 3.1 版 本 ， 它 实现 了 除 严 格 模式 之 外 的 全 部 ECMAScript 5。 


下 载 、 编 译 并 安装 Node 后 ， 可 以 使 用 如 下 命令 运行 Node 程 序 : 


node program.js 


我 们 之 a 数 开 始 介绍 Rhino。Node 也 有 类 似 函 数 ， 只 
是 名 字 不 同 


中 所 口号 


一 


//Node 定 义 了 console.1og()， 可 以 像 在 沪 样 调试 代码 输出 


已 
弄 
十 
| 


妖 


console.1log("Hello Node" ) ;// 调 试 输出 到 控制 台 


// 使 用 require() 替 代 load () 


// 它 加 载 并 执行 (只 有 一 次 ) 命名 模块 ， 返 回 包含 其 导出 标识 符 (exported symbol) 的 对 象 


其 API 对 象 


H 
入 
| 


var fs=require("fs");// 加 载 "fs" 模 块 ， 


Node 在 其 全 局 对 象 中 实现 了 所 有 标准 的 ECMAScript 5 构造 钞 数 、 属 性 
和 函数 。 除 此 之 外 ， 它 也 文 持 客户 端的 计时 丹 函 数 集 setTimeout( 、 


setInterval() 、clearTimeout(O 和 clearInterval(): 


//i1 秒 钟 后 


过 


"Hello World" 


setTimeout(function(){console.log("Hello World");},1000); 


客户 症 的 全 局 夯 数 将 在 14.1 Node 的 实现 与 Web 浏 览 器 的 实现 兼 
容 。 


Node 在 process 名 字 空 间 中 定义 了 其 他 重要 的 全 局 属性 。 这 里 有 该 对 象 
的 一 些 属性 : 


A 


process.version//Node 的 版 本 字符 串 信 息 


process.argv//"node" 命 令 行 的 数组 参数 ，argv[9] 是 "node" 


process .env// 环 境 变量 对 象 。 例 如 :process .env .PATH 


process .pid// 进 程 id 


process.getuid()// 返 回 用 户 id 


process.cwd()// 返 回 当前 的 工作 目 对 


process.chdir()// 改 变 目 


process.exit()// 退 出 (运行 shutdown 命 令 之 后 ) 


由 于 Node 的 函数 和 方法 都 是 异步 的 ， 因 此 当 它 们 等 竺 运算 完成 时 并 不 
产生 阻塞 。 非 阻截 方 法 的 返回 值 无 法 返回 异步 运算 的 结果 给 你 。 如 果 
想 获取 结果 ， 或 想 知 道 完 成 运算 的 时 间 ， 当 结果 准备 好 或 完成 运算 

(或 发 生 错 误 ) 时 ， 就 必须 提供 Node 能 调用 的 一 个 函数 。 在 某 些 情况 
下 《如 在 调用 前 面 出 现 的 setTimeoutO0 时 ) ， 只 须 简 单 地 把 函数 作为 参 
数 传 入 ，Node 会 适时 调用 它 。 在 另外 一 些 情况 下 ， 则 可 以 利用 Node 的 
事件 机 制 。Node 对 和 象 产生 事件 〈 称 为 事件 触发 器 (event emitter) ) 定 
义 on0 方 法 来 注册 人 处理 程序 。 当 传 入 参数 时 ， 将 事件 类 型 (一 个 字符 
串 ) 作为 第 一 参数 ， 处 理 程序 函数 作为 第 二 参数 。 不 同 的 事件 类 型 传 
递 给 处 理 程序 函数 的 参数 不 同 ， 你 可 能 需要 查阅 API 文 档 从 而 确切 了 解 
如 何 编写 处 理 程序 : 


emitter .on(name,f)//emitter 注 册 f 画 数 处 理 name 事 件 


emitter.addListener(name,f)//addLinstener() 和 on( ) 是 同一 个 方法 


emitter .once(name, 下 )// 只 执行 一 次 ， 然 后 f 会 自动 删除 


emitter.1Listeners(name)// 返 回 事件 处 理 函 数组 成 的 数组 


emitter.removeListener(name,f)// 注 销 事件 处 理 程序 和 


emitter .removeAllListeners(name)// 移 除 name 事 件 的 所 有 处理 程 请 


前 面 介 绍 的 process 对 象 是 一 个 事件 触发 器 ， 这 里 是 其 部 分 事件 的 处 理 
程序 示例 : 


//"exit" 事 件 在 Node 退 出 之 前 发 送 


bP 


process.on("exit", function(){console.1log("Goodbye");});// 如 果 注 册 了 任何 事件 处 理 程序 ， 非 捕获 
异常 都 会 产生 事件 ， 


// 否 则 ， 异 常 仅 会 使 Node 输 出 错误 然后 退 


站 所 


process.on("uncaughtException", function(e){console.1log(Exception,e);});//POSIX 中 诸如 


SIGINT、SIGHUP 和 SIGTERM 等 信号 产生 事件 
process.on("SIGINT", function(){console.log("Ignored Ctrl-Cc")))， 
Node 的 设计 目标 是 高 性 能 VO， 因 此 其 流 API 常 被 用 到 。 当 数据 准备 好 


时 ， 可 读 流 会 触发 事件 。 在 下 面 的 代码 中 ， 假 设 s 是 在 其 他 地 方 得 到 的 
可 读 流 。 下 面 我 们 将 看 到 如 何 从 文件 和 网 络 套 接 字 中 得 到 流 对 象 : 


// 输 入 流 s 


s.on("data", 下 ) ;// 当 数据 可 用 时 ， 把 它 作 为 参数 传 给 f( ) 


rT 


(EOF) 时 会 触发 "end" 事 件 


卫 比 
Rall 


s.on("end",f);// 当 不 再 有 数据 达到 ， 在 文件 


s.on("error", 下 );// 如 果 发 生 错 误 ， 把 异常 传递 给 f() 


s.readable// 如 果 它 是 依旧 打开 的 可 读 流 ， 返 回 true 


二 过 


s.pause();// 暂 停 "data" 事 件 。 例 如 ， 为 了 限制 上 传 


s.resume( ) ;// 再 次 恢复 


串 传 给 "data" 事 件 处 理 程序 ， 请 指定 编码 


一 人 
Ee 


// 如 果 想 把 字 


s .setEncoding(enc);// 如 何 对 字 节 编码 : "utf8"、"ascii" 或 "base64" 


可 写 流 比 可 读 流 的 核心 事件 少 。 使 用 write() 方 法 发 送 数 据 ， 当 所 有 数据 
写 入 完毕 后 使 用 end0) 方 法 结束 流 。write0) 方 法 诀 不 会 阻塞 。 知 Node 无 
法 立即 写 入 数据 而 不 得 不 在 内 部 缓存 它 ， 则 write() 方 法 返回 false。 如 采 
你 想 知 道 Node 何 时 刷新 缓冲 区 并 确保 数据 实际 上 已 写 入 ， 那 么 请 注 
册 '"drain" 事 件 的 处 理 程序 : 


// 输 出 流 s 


Cs 


s.write(buffer);// 写 入 二 进 制 数据 


s.write(string,encoding)// 写 入 字符 串 数据 ， 默 认 编码 是 "utf-8" 


s .end( )// 结 束 流 


7 二 


s.end(buffer);// 写 入 最 后 的 二 进 制 数据 块 并 结 下 


s.end(str,encoding)// 写 入 最 后 的 字符 串 并 结束 所 有 流 


s,.writeable;// 如 果 流 依旧 打 可 写 入 ， 返 回 true 


s.on("drain'",f)V/ 当 内 部 缓冲 区 为 空 ， 调 用 f( ) 


如 之 前 代码 所 示 ，Node 的 流 能 处 理 二 进 制 数据 和 文本 数据 。 文 本 传输 
使 用 的 是 普通 JavaScript 字 符 串 ， 字 市 使 用 Node 特 定 的 绥 冲 区 来 处 理 。 
Node 的 缓冲 区 是 有 固定 长 度 的 类 数组 对 象 ， 其 元 素数 量 必须 在 0~255 
之 间 。Node 程 序 通常 把 缓冲 区 作为 不 透明 的 数据 块 来 对 符 ， 将 它们 从 
一 个 流 中 读 取 然后 写 入 男 一 个 。 但 缓冲 区 中 的 字 广 能 够 像 数 组 元 素 一 
样 存 取 ， 其 对 应 的 方法 有 从 一 个 缓冲 区 复制 二 进 制 数据 到 另 一 个 、 获 
取 基 础 缓冲 区 的 切片 (slice) 、 使 用 指定 编码 把 字符 串 写 入 缓冲 区 和 把 
缓冲 区 或 部 分 缓冲 区 解码 回 字 符 串 : 


[Xl 


var bytes=new Buffer(256);// 创 建 一 个 256 字 节 的 新 缓冲 


for(var i=0;i<bytes.length;i++)// 通 过 索引 值 进 行 遍历 


bytes[i]=i;// 设 置 缓 冲 区 的 每 个 元 素 


var end=bytes,slice(240,256) ;// 为 这 个 缓冲 区 创建 一 个 新 的 视 


end[9]//=>240: end[9] 就 是 bytes[240] 


end[9]=0;// 修 改 这 个 切片 的 一 个 元 素 


bytes[240]//=>0: 原始 缓冲 区 也 修改 了 


Kl 


var more=new Buffer(8);// 创 建 一 个 新 的 独立 缓 ? 


UD 


end.copy(more,9,8,16);// 把 end[] 的 第 8~15 元 素 复 制 到 more[]j9 


more[0]//=>248 


// 缓 ; 


区 也 可 以 实现 二 进 制 <=> 文 本 的 转换 


// 合 法 编码 是 "utf8"、"ascii" 和 "base64"， 默 认 编码 是 "utf8" 


var buf=new Buffer("2Tr" "utf8");// 使 用 UTF-8 把 文本 编码 为 字 节 


buf .length//=> 3 个 字符 占 4 个 字 节 


buf .toString()//=>"2nr": 返回 文本 


荆 
| 


E 长 度 的 缓冲 


buf=new Buffer(10) ;// 开 始 一 个 新 的 


区 


var len=buf.write("nr2",4);// 从 第 4 个 字 节 开始 写 入 文本 


buf. toString("utf8",4,4+len)//=> "nr2" :解码 一 段 字 节 


Node 的 文件 和 文件 系统 API 位 于 "fs" 模 块 中 : 


var fs=require("fs" ) ;// 加 载 文件 系统 API 


这 个 模块 提供 了 其 绝 大 部 分 方法 的 “同步 版 本 ”。 任 何 名 字 以 "Sync" 结 尾 
的 方法 都 是 一 个 阻塞 方法 ， 它 返回 一 个 值 或 抛 出 一 个 异 彰 。 不 

以 "Sync" 结 尾 的 文件 系统 方法 都 是 非 阻 赛 的 方法 ， 它 们 会 把 结 采 或 鲁 旋 
传 给 指定 的 回调 函数 。 下 面 的 代码 展示 了 如 何 使 用 阻塞 方法 读 取 文 本 
文件 、 如 何 使 用 非 阻塞 方法 恋 取 二 进 制 文件 : 


// 同 步 读 取 文件 ， 通 过 传递 编码 获得 文本 而 非 字 市 


var text=fs.readFileSync("config.json", "utf8");// 异 步 读 取 二 进 制 文件 ， 通 过 传递 画 数 获得 数据 


fs.readFile("image.png",function(err,buffer)t{ 


if(err)throw err;// 如 果 出 现任 何 错误 


process(buffer);// 文 件 内 容 在 缓冲 区 中 


}); 


类 似 地 ， 存 在 用 来 写 文 件 的 writeFile0 和 writeFileSyncO 男 数 : 


fs.writeFile("config.json",JSON.stringify(userprefs)); 


前 面 展示 的 范 数 将 文件 内 容 看 得 为 单个 字符 串 或 绥 促 区 。Node 也 定义 
了 读 写 文件 的 流 API， 下 面 这 个 函数 实现 了 文件 复制 : 


/ 


Ws 


流 API 复 制 文件 


// 产 想 知 道 何 时 完成 ， 请 传递 回调 范 数 


function fileCopy(filename1,filename2, done){ 


var input=fs.createReadStream(filename1);// 输 入 流 


var output=fs.createwriteSstream(filename2);// 输 出 流 


input.on("data", function(d){output.write(d);});// 把 输入 复制 到 输出 


input.on("error",function(err){throw err;});// 提 示 错 误 


input.on("end", function(){// 当 输入 结束 


output .end();// 关 闭 输 出 


if(done)done() ;// 并 通知 回调 函数 


}); 


"fs" 模 块 还 包括 大 量 的 方法 ， 用 于 列 出 文件 目录 、 查 询 文 件 属 性 等 。 下 
i 同步 的 方法 列 出 一 个 目 孙 的 内 容 ， 并 显示 文件 大 小 
[修改 日 期 : 


#!/UuSr/local/bin/node 


var fs=require("fs"),path=require("path");// 加 载 需 要 的 模块 


var dir=process,.cwd();// 当 前 目 了 对 


if(process.argv.length>2)dir=process.argv[2];// 或 来 自命 令 行 


var files=fs.readdirSync(dir);// 读 取 目 录 内 容 


process.stdout .write("Name\tSize\tDate\n");// 输 出 头 


files.forEach(function(filename){// 获 取 每 个 文件 名 
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var fullname=path.join(dir,filename);//: 


-全 


var stats=fs.statSync(fullname) ;// 获 取 文 件 属 性 


if(stats.isDirectory())filename+="/";// 标 记 子 目 导 


process.stdout.write(filename+"\t"+// 输 出 文件 名 + 


stats.sizet+"\t"+// 文 件 大 小 + 

stats.mtime+"\n");// 修 改 时 间 

}); 

注意 上 面 第 一 行 的 注释 #1!”*。 这 是 Unix 中 的 "shebang" 注 释 ， 常 用 于 使 脚 
本 文件 被 指定 的 某 种 语言 解释 器 自动 执行 中 。 当 像 这 样 的 代码 出 现在 
文件 的 第 一 行 时 ，Node 会 忽略 它们 。 


"net" 模 块 是 用 于 基于 TCP 网 络 的 API。 (用 于 基于 数据 包 网 络 的 模块 请 
看 "dgram"。) 下 面 是 Node 中 一 个 非常 简单 的 TCP 服 务 器 : 


//Node 中 简单 的 TCP 回 显 服务 器 它 监听 2000 端 口上 的 连接 ， 


// 并 把 客户 端的 数据 回 显 给 它 


Var net=require('net'),; 


Var server=net.createServer(); 


server.listen(2000,function(){console.log("Listening on port 2000");}); 


server.on("connection",function(stream){ 


console.log("Accepting connection from",stream.remoteAddress); 


stream.on("data",function(data){stream.write(data);}); 


stream.on("end",function(data){console.log("Connection closed");}); 


}); 


除了 基础 的 met" 模 块 ，Node 使 用 "http" 模 块 内 置 文 持 HTTP 协 议 。 接 下 
来 的 示例 可 以 说 明 更 多 细节 。 


12.2.1 ” Node 示例: HTTP 服 务 需 

示例 12-2 是 一 个 基于 Node 的 简单 HTTP 服 务 。 它 能 处 理 当 前 目录 的 文 
件 ， 并 能 实现 两 种 特殊 的 URL。 它 使 用 了 Node 的 "http" 模 块 ， 也 会 使 用 
到 前 面 提 到 的 文件 和 流 API。 第 18 章 的 示例 18-17 是 一 个 与 之 类 似 的 
HTTP 服 务 器 示例 。 


示例 12-2: 基于 Node 的 HTTP 服 务 器 


// 这 是 一 个 简单 的 Node _ HTTP 服务 器 ， 能 处 理 当 前 目录 的 文件 ， 


// 并 能 实现 两 种 特殊 的 URL 用 于 测试 


// 用 http://Localhost:8000 或 http://127.0.0.1:8000 连 接 这 个 服务 器 


// 首 先 ， 加 载 所 有 要 用 的 模块 


var http=require('http');//HTTP 服 务 器 API 


var fs=require('fs');// 用 于 处 理 本 地 文件 


var server=new http.Server();// 创 建新 的 HTTP 服 务 器 


8000 上 运行 它 
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server .listen(8000);// 在 端 


//Node 使 用 "on( ) "方法 注册 事件 处 理 程序 ， 


// 当 服务 器 得 到 新 请 求 ， 则 运行 西数 处 理 它 


server.on("request",function(request,response){// 解 析 请 求 的 URL 


var url=require('url').parse(request.url);// 特 殊 URL 会 让 服务 器 在 发 送 响 应 前 先 等 待 


// 此 处 用 于 模拟 缓慢 的 网 络 连 接 


if(url.pathname==="/test/delay"){// 使 


查询 字符 串 来 获取 延迟 时 长 ， 或 者 2000 富 秒 


var delay=parseInt(url,query)||2999;// 设 置 响应 状态 码 和 头 


response.writeHead(200, {"Content-Type":"text/plain;charset=UTF-8"});// 立 即 开始 编写 响应 3 
体 


各 


response.write("Sleeping for"+delay+"milliseconds...");// 在 之 后 调用 的 男 一 个 函数 中 完成 响应 


setTimeout(function(){ 


response.write("done."); 


response.end( ); 


},delay); 


[ 款 


// 若 请 求 是 "/test/mirror"， 则 原文 返 


// 当 需要 看 到 这 个 请 求 头 和 主体 时 ， 会 很 有 用 


else if(url.pathname==="/test/mirror"){// 响 应 状态 和 头 


response.writeHead(2009, {"Content-Type":"text/plain;charset=UTF-8"});// 用 请 求 的 内 容 开 始 编 
写 响应 主体 


response.write(request.method+""+request .url+ 


"HTTP/"+request.httpVersion+"\r\n");// 所 有 的 请 求 关 


for(var h in request.headers){ 


response.write(h+":"+request.headers[h]j+"\r\n"); 


response.write("\r\n");// 使 用 额外 的 空白 行 来 结束 六 


// 在 这 些 事件 处 理 程序 画 数 中 完成 响应 ; 
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// 当 请 求 主体 的 数据 块 完成 时 ， 把 其 写 入 响应 


request.on("data", function(chunk){response.write(chunk);});// 当 请 求 结束 时 ， 啊 应 也 


request.on("end",function(chunk){response.end();}); 


// 否 则 ， 处 理 来 自 本 地 目录 的 文件 


else{// 获 取 本 地 文件 名 ， 基 于 其 扩展 名 推测 内 容 类 型 


var filename=url.pathname.substring(1);// 去 掉 前 导 "/" 


var type; 


switch(filename.substring(filename.lastIndexof(".")+1)){// 扩 展 名 


case"html": 


case"htm":type="text/html;charset=UTF-8";break; 


case"js":type="application/javascript;charset=UTF-8";break; 


case"css":;type="text/css;charset=UTF-8";break; 


case"txt":type="text/plain;charset=UTF-8";break; 


case"manifest":type="text/cache-manifest;charset=UTF-8";break; 


default:type="application/octet-stream";break; 


// 异 步 读 取 文件 ， 并 将 内 容 作为 单独 的 数据 块 传 给 回调 画 数 


// 对 于 确实 很 大 的 文件 ， 使 用 流 API fs .createReadStream( ) 更 好 


fs.readFile(filename,function(err,content)t{ 


if(err){// 如 果 由 于 某 些 原 因 无 法 读 取 该 文件 


response.writeHead(404, {// 发 送 404 未 找到 状态 码 


"Content-Type":"text/plain;charset=UTF-8"}); 


response.write(err.message);// 简 单 的 错误 消息 主体 


response.end();// 完 成 


else{// 否 则 ， 若 读 取 文件 成 功 


response.writeHead(200,// 设 置 状态 码 和 MIME 类 型 


{"Content-Type":type}); 


response.write(content);// 把 文件 内 容 作 为 响应 主体 发 送 


response.end( );// 完 成 


}); 


12.2.2 Node 示例 : HTTP 客户 端 工具 模块 


示例 12-3 使 用 "http" 模 块 定义 了 用 于 发 送 HTTP GET 和 POST 请 求 的 工具 
函数 。 本 例 则 是 基于 "httputils" 模 块 ， 在 代码 中 应 该 这 样 使 用 : 


var httputils=require("./httputils");// 注 意 没 有 " . js" 后 绥 


httputils.get(url,function(status,headers, body){console.log(body);}); 


reguire() 画 数 并 非 用 普通 的 eval0 画 数 来 执行 模块 代码 。 模 块 是 在 一 个 特 
殊 的 环境 中 执行 ， 以 便 它们 不 能 定义 任何 全 局 变量 或 更 改 其 他 全 局 命 
名 空间 。 这 个 特殊 的 模块 执行 环境 总 是 包含 一 个 叫 exports 的 全 局 对 
象 ， 模 块 通过 在 这 个 对 象 中 定义 属性 来 导出 它们 的 APIIZL 。 


示例 12-3: “Node"httputils" 模 块 


// 


// 基 于 Node 的 "httputils" 模 块 


// 


// 为 指定 的 URL 实 现 一 个 异步 HTTP GET 请 求 ， 


/ 


We 


将 HTTP 状 态 、 头 和 响应 主体 传递 给 指定 的 回调 函数 


// 注 意 这 里 是 如 何 通过 exports 对 象 导出 这 个 方法 的 


exports.get=function(url,callback){// 解 析 URL， 获 取 所 需 的 信息 


url=require('url').parse(url); 


var hostname=url.hostname, port=url.port||80; 


var path=url.pathname, query=url.query; 


if(query)path+="?"+query;// 实 现 一 个 简单 的 6ET 请 求 


Var client=require("http").createcCclient(port,hostname); 


Var request=client,.request("GET",path,{ 


"Host":hostname//Request headers 


}); 


request.end( ) ;// 该 函数 用 于 处 理 到 达 的 响应 


比 


request .on("response",function(response){// 设 置 编 码 ， 使 返回 的 主体 成 为 文本 而 非 字 节 


response.setEncoding("utf8");// 一 旦 响应 主体 达到 ， 保 存 它 


var body="" 


response.on("data", function(chunk){body+=chunk;});// 响 应 完成 时 ， 调 用 这 个 函数 


response.on("end",function(){ 


if(callback)callback(response.statusCode,response.headers, body); 


}); 


}); 


} ;A/V 以 数据 作为 请 求 主体 的 简单 HTTP POST 请 求 


exports.post=function(url, data,callback){// 解 析 URL， 获 取 所 需 的 信息 


url=require('url').parse(url); 


var hostname=url.hostname, port=url.port||80; 


var path=url.pathname, query=url.query; 


if(query)path+="?"+query;// 判 断 将 要 作为 请 求 主体 发 送 的 数据 类 型 


var type; 


if(data==null)data=""; 


if(data instanceof Buffer)// 二 进 制 数据 


type="application/octet-stream"; 
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else if(typeof data==="string")// 字 符 


type="text/plain;charset=UTF-8"， 


else if(typeof data==="object"){// 名 / 值 对 


data=require("querystring").stringify(data); 


type="application/x-www-form-urlencoded"; 


其 中 包括 请 求 主体 


// 生 成 POST 请 求 ， 


化 


Var client=require("http").createCclient(port,hostname); 


Var request=client,.request("POST",path,t 


"Host":hostname, 


"Content -Type" :type 


}); 


request .write(data);// 发 送 请 求 主体 


request.end( ); 


request .on("response'" ,function(response){f// 处 理 响应 


response.setEncoding("utf8");// 假 设 它 是 文本 


var body=""// 用 于 保存 响应 主体 


response.on("data",function(chunk){body+=chunk;}); 


response.on("end", function( ){// 完 成 后 ， 调 


if(callback)callback(response.statusCode,response.headers, body); 


}); 


}); 


[1]_Node 是 其 官方 名 字 ，Node.js 是 非 官 方 名 字 ， 用 于 和 其 他 的 node 区 
分 ， 具 体内 容 见 https://www./github.com/joyent/node/wiki/FAQ。 


[2] 1.7r3 版 本 已 经 在 2011.06.03 正 式 发 布 ， 具 体内 容 见 


http:/www.mozilla.org/rhino/download.html ° 


[3] 客户 端的 JavaScript 也 能 高 度 地 异步 和 基于 事件 ， 如 果 你 读 过 本 书 第 
且 在 客户 端 中 运行 过 JavaScript 程 序 ， 就 会 很 容易 理解 本 章 的 
列 于 。 


[ 大 家 也 可 以 查看 CNode 社 区 组 织 翻译 的 Node 中 文 文档 ， 参 见 
http://cnodejs.org/cman/ ° 


[5] 在 翻译 本 书 时 ，Node 发 布 了 0.4.12 稳 定 版 和 0.5.7 不 稳定 版 。Node 的 
版 本 控制 方案 是 偶数 版 本 稳定 ， 奇 数 版 本 不 稳定 ， 稳 定 版 本 只 会 修复 
bug， 不 会 改变 JavaScript API 和 扩展 API， 在 稳定 版 本 分 文 升级 之 后 不 
需要 重新 生成 模块 。 


[6] 关于 shebang 的 详细 解释 请 查看 http:/zh.wikipedia.org/wiki/Shebang 。 


S 


< 


[Z]_Node 实现 了 CommonJS 模块 约定 ， 有 具体 内 容 请 参见 
http:/www.commonjs.org/specs/modules/1.0/° 


第 二 部 分 “客户 端 JavaScript 
本 书 第 二 部 分 涵盖 第 13~22 章 ， 主 要 讲解 JavaScript 是 如 何在 web 浏览 
器 中 实现 的 。 这 些 章节 介绍 了 大 量 的 脚本 宿主 对 象 ， 这 些 对 象 可 以 表 
示 浏 览 絮 窗口、 文档 树 和 文档 的 内 容 等 。 这 些 章 市 同样 涵盖 重要 的 
Web 应 用 所 需 的 网 络 编程 API、 本 地 存储 和 检索 数据 、 画 图 等 。 
第 13 章 “Web 浏览 锅 中 的 JavaScript 
第 14 章 Window 对 象 
第 15 章 ”脚本 化 文档 
第 16 章 ”脚本 化 CSS 
第 17 章 ”事件 处 理 
第 18 章 ”脚本 化 HTTP 


第 19 革 jQuery 类 库 


第 20 章 ”客户 端 存储 
第 21 章 ”多 媒体 和 图 形 编程 


第 22 章 HTML5 API 


第 13 章 ”Web 浏览 絮 中 的 JavaScript 


本 书 第 一 部 分 介绍 了 JavaScript 语 言 核 心 。 第 二 部 分 开始 转 同 Web 浏 览 
右 中 JavaScript 的 讨论 ， 通 党 称 为 客户 端 JavaScript。 迄 今 为 止 ， 我 们 所 
看 到 的 大 部 分 例子 虽然 是 合法 的 JavaScript 代 码 ， 但 是 却 没 有 特定 的 上 
下 文 ， 也 就 是 说 它们 不 过 是 一 些 运行 在 不 明 环 境 中 的 代码 片段 。 本 童 
提供 了 一 个 可 以 运行 JavaScript 的 上 下 文 。 


在 开始 讨论 JavaScript 之 前 ， 有 必要 先 思考 一 下 在 Web 浏 史 絮 中 是 如 何 
呈现 Web 页 面 的 。 一 些 呈现 静态 信息 的 页 面 ， 叫 做 文档 (document) 
(由 于 加 入 了 JavaScript， 静 态 页 面 的 信息 看 上 去 会 动 来 动 去 ， 但 信息 本 
吴征 静态 的 )， 相 对 于 文档 来 说 ， 其 他 Web 页 面 则 感觉 上 更 像 是 应 用 。 
如 果 需 要 的 话 ， 这 些 页 面 可 以 动态 载 入 新 的 信息 ， 因 此 看 起 来 更 加 图 
形 化 ， 而 非 文 本 化 ， 并 且 它 们 可 以 进行 离线 操作 ， 以 及 保存 数据 到 本 
地 ， 以 便 再 次 访问 时 进行 状态 恢复 。 此 外 ， 还 有 其 他 Web 页 面 处 于 文 
档 和 应 用 的 中 间 ， 结 合 了 两 者 的 特性 。 


本 间 以 客户 端 JavaScript 概 述 开 始 ， 包 括 一 个 简单 的 例子 ， 以 及 对 

JavaScript 在 Web 文 要 和 Web 应 用 中 角色 的 讨论 。 概 述 内 容 还 介绍 了 哪 
些 内 容 在 后 续 章 节 中 会 有 ， 接 下 来 会 详细 解释 JavaScript 代 码 在 HTML 
文档 中 是 如 何 葡 入 并 执行 的 ， 然 后 还 会 介绍 兼容 性 、 可 访问 性 和 安全 


性 等 问题 


13.1 窗户 端 JavaScript 


Window 对 象 是 所 有 客户 端 JavaScript 特 性 和 API 的 主要 接 入 点 。 它 表示 
Web 浏 览 器 的 一 个 窗口 或 窗 体 ， 并 且 可 以 用 标识 人 符 window 来 引用 它 。 
Window 对 和 象 定义 了 一 些 属性 ， 比 如 ， 指 代 Location 对 和 象 的 location 属 
性 ，Location 对 象 指定 当前 显示 在 窗口 中 的 URL， 并 人 允许 脚本 往 窗 口 
里 载 入 新 的 URL: 


// 设 置 1ocation 属 性 ， 从 而 跳 转 到 新 的 Web 页 男 


window.location="http://www.oreilly.com/"; 


Window 对 象 还 定义 了 一 些 方法 ， 比 如 alert0， 可 以 弹出 一 个 对 话 框 用 
来 显示 一 些 信息 。 还 有 setTimeoutO0， 可 以 注册 一 个 函数 ， 在 给 定 的 一 
段 时 间 之 后 触发 一 个 回调 : 


// 等 待 两 秒 ， 然 后 说 hello 


setTimeout(function(){alert("hello world");},2000); 


注意 上 面 的 代码 并 没有 显 式 地 使 用 window 属 性 。 在 客户 端 JavaScript 
中 ，Window 对 象 也 是 全 局 对 象 。 这 意味 着 Window 对 象 处 于 作用 域 链 
的 顶部 ， 它 的 属性 和 方法 实际 上 是 全 局 变量 和 全 局 函数 。Window 对 象 
有 一 个 引用 上 自身 的 属性 ， 叫 做 window。 如 果 需 要 引用 窗口 对 象 本 号 ， 
可 以 用 这 个 属性 ， 但 是 如 果 只 是 想 要 引用 全 局 窗口 对 象 的 属性 ， 通 常 
并 不 需要 用 到 window 。 


Window 对 象 还 定义 了 很 多 其 他 重要 的 属性 、 方 法 和 构造 畏 数 ， 参 见 第 
14 章 查看 完整 的 细节 。 


Window 对 象 中 其 中 一 个 最 重要 的 属性 是 document， 它 引用 Document 对 
象 ， 后 者 表示 显示 在 窗口 中 的 文档 。Document 对 象 有 一 些 重要 方法 ， 
比如 getElementById()， 可 以 基于 元 素 id 属 性 的 值 返 回 单一 的 文档 元 素 
et 以 及 它们 之 间 的 所 有 内 

谷 ) : 


// 查 找 id="timestamp" 的 元 素 


var timestamp=document .getElementById("timestamp"); 


getElementById0 返 回 的 Element 对 象 有 其 他 重要 的 属性 和 方法 ， 比 如 
允许 脚本 获取 它 的 内 容 ， 设 置 属性 值 等 : 


// 如 有 果 元 素 为 空 ， 往 里 面 插入 当前 的 日 期 和 时 间 


Ifl(timestamp ,firstCchild==nul]) 


timestamp .appendchild(document ,createTextNode(new Date().toString())); 


查询 、 忆 历 和 修改 文档 内 容 的 方法 会 在 第 15 划 介绍。 


每 个 Element 对 象 都 有 style 和 className 属 性 ， 人 允许 脚本 指定 文档 元 素 
的 CSS 样 式 ， 或 修改 应 用 到 元 素 上 的 CSS 类 名 。 设 置 这 些 CSS 相 关 的 属 
性 会 改变 文档 元 素 的 呈现 : 


/ /3 


~ 


i 式 修 改 目 标 元 素 的 呈现 


timestamp.style.backgroundColor="yellow";// 或 者 只 改变 类 ， 让 样式 表 指定 具体 内 容 


timestamp.className="highlight"，; 


第 16 章 会 介绍 style 和 className 属 性 ， 以 及 其 他 CSS 编 程 技术 。 


Window、Document 和 Element 对 象 上 男 一 个 重要 的 属性 集合 是 事件 处 
理 程序 相关 的 属性 。 可 以 在 脚本 中 为 之 绑 定 一 个 函数 ， 这 个 函数 会 在 
某 个 事件 发 生 时 以 异步 的 方式 调用 。 事 件 处 理 程序 可 以 让 JavaScript 代 
码 修改 窗口 、 文 档 和 组 成 文档 的 元 素 的 行为 。 事 件 处 理 程序 的 属性 名 
是 以 单词 "on" 开 始 的 ， 用 法 如 下 : 


// 当 用 户 单 击 timestamp 元 素 时 ， 更 新 它 的 内 容 


timestamp.onclick=function(){this.innerHTML=new Date().toString();} 


Window 对 象 的 onload 处 理 程序 是 最 重要 的 事件 处 理 程序 之 一 。 当 显示 
在 窗口 中 的 文档 内 容 稳 定 并 可 以 操作 时 会 触发 号 。JavaScript 代 码 通 常 
封装 在 onload 事 件 处 理 程序 里 。 第 17 章 将 会 详细 讲述 事件 。 例 13-1 是 
onload 处 理 程序 的 演示 ， 并 展示 了 客户 端 JavaScript 的 实例 代码 ， 包 括 
得 询 文档 元 素 、 修 改 CSS 类 和 定义 事件 处 理 程序 。 这 个 例子 的 


JavaScript 代 码 是 放置 在 HIML 的 < script> 标签 之 内 的 ， 且 在 13.2 节 会 
对 它 进行 解释 。 注 意 代 人 码 里 的 一 个 函数 是 在 另 一 个 函数 里 定义 的 。 
为 事件 处 理 程序 的 广泛 使 用 ， 使 得 租 套 函数 在 客户 端 JavaScript 中 非常 


普遍 。 


例 13-1: 显示 内 容 的 简单 客户 端 JavaScript 


<IDOCTYPE html> 
<html> 


<head> 


<style>/* 本 页 的 css 样 式 表 */ 


.reveal*{display:none;}/*class="reveal" 的 元 素 的 子 元 素 都 不 显示 */ 


,reveal* .handle{display:block;}/* 除 了 class="handle" 的 元 素 */ 


</style> 


<script>// 所 有 的 页 再 


逻辑 在 onload 事 件 之 后 启动 


window.onload=function( ){// 找 到 所 有 class 名 为 "reveal" 的 容器 元 素 


var elements=document.getElementsByClassName("reveal"); 


for(var i=0;i<elements.length;i++){// 对 每 个 元 素 进行 遍历 


var elt=elements[i];// 找 到 容器 中 的 "handle" 元 素 


var title=elt.getElementsByClassName("handle")[9];// 当 单 击 这 个 元 素 时 ， 呈 现 剩 下 的 内 容 


EL 


addRevealHandler (title,elt);} 


function addRevealHandler (title,elt) 


title.onclick=function(){ 
if(elt.className=="reveal") 
elt.className="revealed"; 

else if(elt.className=="revealed") 


elt.className="reveal"; 


}; 

</script> 

</head> 

<body> 

<div class="reveal"> 

<hi class="handle">Click Here to Reveal Hidden Text</hi> 

<p>This paragraph is hidden.It appears when you click on the title.</p> 
</div> 

</body> 

</html> 

在 本 章 的 概要 介绍 中 提 到 了 ， 一 些 Web 页 面 感觉 上 像 文档 ， 而 男 一 些 


则 像 应 用 。 接 下 来 的 两 节 会 探讨 JavaScript 在 两 种 Web 页 面 类 型 里 是 如 
何 使 用 的 。 


13.1.1 Web 文 档 里 的 JavaScript 


JavaScript 程 序 可 以 通过 Document 对 象 和 它 包 含 的 Element 对 象 退 历 和 
管理 文档 内 容 。 它 可 以 通过 操纵 CSS 样 式 和 类 ， 修 改 文档 内 容 的 呈 

现 。 并 且 可 以 通过 注册 适当 的 事件 处 理 程序 来 定义 文档 元 素 的 行为 。 
内 容 、 呈 现 和 行为 的 组 合 ， 叫 做 动态 HTML 或 DHTML ， 会 在 第 15 一 17 
草 里 介绍 。 


Web 文 档 里 应 当 少 量 地 使 用 JavaScript， 因 为 JavaScript 真 正 的 角色 是 增 
强 用 户 的 浏 斋 体 蔡 ， 使 信息 的 获取 和 传递 更 容易 。 用 户 的 体验 不 应 依 
赖 于 JavaScript， 但 JavaScript 可 以 增强 体验 ， 比 如 通过 下 面 的 方式 : 


:创建 动画 和 其 他 视觉 效果 ， 巧 妙 地 引导 和 帮助 用 户 进行 页 面 导航 。 
对 表格 的 列 进行 分 组 ， 让 用 户 更 容易 找到 所 需要 的 。 

:隐藏 某 些 内 容 ， 当 用 户 “ 深 入 ”到 内 容 里 时 ， 再 逐渐 展示 详细 信息 。 
13.1.2 ”Web 应 用 里 的 JavaScript 


在 Web 文 档 中 使 用 的 JavaScript DHTML 特 性 在 Web 应 用 中 都 会 用 到 ， 
对 于 Web 应 用 来 说 ， 除 了 内 容 、 呈 现 和 操作 API 之 外 ， 还 依赖 了 Web 浏 
哆 器 环境 提供 的 更 基础 的 服务 。 


要 真正 理解 Web 应 用 ， 和 需要 先 认 识 天 Web 浏览 右 已 经 有 了 很 好 的 发 

展 ， 现 在 已 经 不 仅仅 是 作为 显示 文档 的 工具 的 角色 了 ， 而 渐渐 变 成 了 
一 个 简易 的 操作 系统 。 想 一 下 ， 传 统 操作 系统 允许 组 织 桌面 和 文件 来 
里 的 图 标 (表示 文件 或 应 用 ) ; Web 浏 览 器 允许 在 工具 栏 和 文件 夹 里 

组 织 书签 (表示 文档 和 Web 应 用 ) 。 系 统 可 以 在 一 个 窗口 里 运行 多 个 

应 用 ，Web 浏 贤 右 可 以 在 一 个 标签 里 显示 多 个 文档 。 操 作 系统 定义 了 

很 多 撒 层 网 络 API、 提 供 绘制 图 像 、 保 存 文件 等 功能 。Web 浏 览 右 也 定 
0 (第 18 章 ) 、 保 存 数 据 (第 20 章 ) 和 绘制 图 像 (第 21 

部 


谨 记 Web 浏 唤 器 是 简单 操作 系统 的 概念 ， 这 样 束 可 以 把 Web 应 用 定义 

为 用 JavaScript 访 问 更 多 浏览 絮 提 供 的 高 级 服务 (比如 网 络 、 图 像 和 数据 
存储 ) 的 Web 页 面 。 高 级 服务 里 最 有 名 的 是 XMLHttpRequest 对 象 ， 后 者 
可 以 对 HTTP 请 求 编程 来 启用 网 络 。Web 应 用 使 用 这 个 服务 从 服务 器 获 


取 新 信息 ， 而 不 用 重新 载 入 页 面 。 类 似 这 样 的 Web 应 用 通常 叫做 Ajax 
应 用 ，Ajax 构 成 了 "Web 2.0" 的 将 染 。XMLHttpRequest 会 在 第 18 章 详细 
介绍 。 


HTML5 标 准 (在 撰写 本 书 之 时 还 是 草案 ) 和 相关 的 标准 为 web 应 用 定 
义 了 很 多 其 他 重要 的 API。 这 些 API 包 括 第 21 章 和 第 20 章 的 数据 存储 和 
图 像 API， 以 及 很 多 其 他 特性 的 API， 如 地 理 位 置信 息 、 历 史 管理 和 后 
台 线 程 。 在 实现 这 些 API 之 后 ， 会 开启 一 场 Web 应 用 功能 的 革命 。 这 些 
API 会 在 第 22 章 中 介绍 。 

当然 ，JavaScript 在 Web 应 用 里 会 比 在 Web 文 档 里 显得 更 加 重要 。 
JavaScript 增 强 了 Web 文 档 ， 但 是 设计 民 好 的 文档 需要 在 禁用 JavaScript 
后 还 能 继续 工作 。Web 应 用 本 质 上 就 是 JavaScript 程 序 ， 后 者 使 用 由 
Web 浏 览 右 提供 的 操作 系统 类 型 的 服务 ， 并 且 不 用 期 望 它 们 在 禁用 浏 
览 器 脚本 后 还 能 正常 工作 I 。 


13.2 ”在 HTML 里 租 入 JavaScript 

在 HTML 文 档 里 租 入 客户 端 JavaScript 代 码 有 4 种 方法 : 
:内 联 ， 放 置 在 <script> 和 </script> 标签 对 之 间 。 
.放置 在 由 < script> 标签 的 src 属 性 指定 的 外 部 文件 中 。 


:放置 在 HTML 事 件 处 理 程序 中 ， 该 事件 处 理 程序 由 onclick 或 
onmouseover 这 样 的 HTML 属 性 值 指 定 。 


: 放 在 一 个 URL 里 ， 这 个 URL 使 用 特殊 的 "javascript:" 协 议 。 


接 下 来 的 小 节 会 逐一 解释 这 4 种 JavaScript 藤 套 技术 。 但 是 ， 值 得 注意 
的 是 ，HTML 事 件 处 理 程序 属性 和 javascript:URL 这 两 种 方式 在 现代 
JavaScript 代 码 里 已 经 很 少 使 用 (它们 在 Web 早 期 多 少 有 点 通用 ) 。 内 
联 脚 本 (没有 src 属 性 ) 也 比 它 们 之 前 用 得 少 了 。 有 个 编程 哲学 

叫 "unobtrusive JavaScript" (< ， 主 张 内 容 (HTML) 和 行为 (JavaScript 
代码 ) 应 该 尽量 地 保持 分 离 。 根 据 这 个 编程 哲学 ，JavaScript 最 好 通过 
<script> 元 系 的 src 属性 来 嵌入 HIML 文 档 里 。 
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JavaScript 代 码 可 以 以 内 联 的 形式 出 现在 HTML 文 件 里 的 < script> 和 
</script> 标签 之 间 : 


< Script>// 这 里 是 你 的 JavaScript 代 码 


</script> 


在 XHTML 中 ，<script> 标签 中 的 内 容 被 当做 其 他 内 容 一 样 对待 。 如 
果 JavaScript 代 码 包 含 了 “<<” 或 “&”* 字 和 人 符 ， 那 么 这 些 字 符 就 被 解释 成 为 
XML 标记 。 因 此 ， 如 果 要 使 用 XHTML ， 最 好 把 所 有 的 JavaScript 代 码 
放 入 到 一 个 CDATA 部 分 里 : 


<script> <1!1[CDATA[// 这 里 是 你 的 JavaScript 代 码 


]]></script> 


例 13-2 展 示 了 一 个 HTML 文 件 ， 它 包含 简单 的 JavaScript 程 序 。 注 释 解 
释 了 这 个 程序 是 做 什么 的 ， 但 这 个 例子 主要 演示 的 是 JavaScript 代 码 以 
及 CSS 样 式 表 是 如 何 骨 入 HTML 文件 里 。 注 意 这 个 例子 和 例 13-1 的 结构 
类 似 ， 并 同样 使 用 onload 事 件 处 理 程序 。 


例 13-2: 实现 一 个 简单 的 JavaScript 数 字 时 钟 程 序 


<!DOCTYPE html> 


<1-- 这 是 一 个 HTML5 文 件 - - > 


<html> 


<1-- 根 节点 - -> 


<head> 


<1!1- -标题 、 脚 本 和 样式 都 放 在 这 里 - - > 


<title>Digital Clock</title> 


<script>//js 代 码 


// 定 义 一 个 函数 用 以 显示 当前 时 间 


function displayTime(){ 


var elt=document .getElementById("clock");// 通 过 ijd="clock" 找 到 元 素 


var now=new Date();// 得 到 当前 时 间 


elt.innerHTML=now.toLocaleTimeString();// 让 elt 来 显示 它 


setTimeout (displayTime,1000);// 在 1 秒 后 再 次 执行 


TT 
涉 
下 


生 时 开始 显示 时 间 


window.onload=displayTime;// 当 onload 事 人 


</script> 


<style>/* 钟 表 的 样式 */ 


#clock{/* 定 义 id="clock" 的 元 素 的 样式 */ 


font:bold 24pt sans;/* 使 用 粗 体 大 号 字 */ 


background:#ddf;/* 定 义 蓝 灰色 背景 */ 


padding:10px;/* 周 目 */ 


ey 

加 

LN 
/ 


所 


色 边 框 */ 


border:solid black 2px;/* 定 义 纯 


(如果 浏览 器 支持 的 话 ) */ 


河 


border-radius:10px;/* 定 义 


</style> 


</head> 


<body> 


<1--body 部 分 是 用 来 显示 文档 的 - - > 


<h1>Digital Clock</hi> 


<!- -显示 标 题 - - > 


<span id="clock"></span><1-- 输 出 时 钟 - - > 


</body> 


</html> 


13.2.2 ”外 部 文件 中 的 脚本 


<script> 标签 文 持 src 属 性 ， 这 个 属性 指定 包含 JavaScript 代 码 的 文件 
的 URL。 它 的 用 法 如 下 : 


<script src="../../scripts/util.js"></script> 


JavaScript 文 件 的 扩展 名 通常 是 以 .js 结尾 的 。 它 包含 纯粹 的 JavaScript 代 
码 ， 其 中 既 没 有 <script> 标签 ， 也 没有 其 他 HTML 标 签 。 


具有 src 属 性 的 <script> 标签 的 行为 束 像 指定 的 JavaScript 文 件 的 内 容 
直接 出 现在 标签 <script> 和 </script> 之 间 一 样 。 注 意 ， 即 便 指 定 了 
src 属 性 并 且 < script> 和 </script> 标签 之 间 没 有 JavaScript 人 代码， 结束 
的 </script> 标签 也 是 不 能 丢 的 。 在 XHTML 中 ， 在 此 处 可 以 使 用 简短 
的 <scripV> 标 签 。 


使 用 src 属 性 时 ，<script> 和 </script> 标签 之 间 的 任何 内 容 都 会 名 
略 。 如 果 需 要 ， 可 以 在 < script> 标签 之 间 添 加 代码 的 补充 说 明文 档 或 


版 权 信息 。 但 是 要 注意 ， 如 采 有 任何 非 空格 或 JavaScript 注 释 的 文本 出 
现在 < script src=""> 和 </script> 之 间 ，HTML5 校 验 器 将 会 报错 。 


以 下 是 src 属 性 方式 的 一 些 优点 : 


:可 以 把 大 块 JavaScript 代 码 从 HTML 文 件 中 删除 ， 这 有 助 于 保持 内 容 和 
行为 的 分 离 ， 从 而 人 简化 HTML 文件 。 


.如 果 多 个 Web 页 面 共用 相同 的 JavaScript 代 码 ， 用 src 属 性 可 以 让 你 只 管 
理 一 份 代 码 ， 而 不 用 在 代码 改变 时 编辑 每 个 HTML 文 件 。 


-如 条 一 个 JavaScript 代 码 文件 由 多 个 页 面 共 京 ， 束 只 需要 下 载 它 一 次 ， 
通过 使 用 它 的 第 一 个 页 面 一 一 随后 的 页 面 可 以 从 浏览 郁 缓 存 检索 它 。 


:由 于 src 属 性 的 值 可 以 是 任意 的 URL， 因 此 来 目 一 个 Web 服 务 器 的 
JavaScript 程 序 或 Web 页 面 可 以 使 用 由 男 一 个 Web 服 务 器 输出 的 代码 。 
很 多 互联 网 广告 依赖 与 此 。 


.从 其 他 网 站 载 入 脚本 的 能 力 ， 可 以 让 我 们 更 好 地 利用 缓存 。Google 正 
在 为 通用 的 客户 端 类 库 推广 标准 且 好 记 的 URL [4-， 可 以 让 浏览 器 只 缓 
存 一 份 副本 ， 并 且 网 络 上 的 任意 站 点 都 可 以 使 用 。 链 接 JavaScript 代 码 
到 Google 服 务 器 ， 可 以 减少 Web 页 面 的 局 动 时 间 ， 因 为 这 些 类 库 可 能 
已 经 存在 于 用 户 的 浏览 絮 缓 存 中 ， 但 是 你 必须 相信 由 第 三 方 提供 的 代 
码 服 务 ， 这 对 于 你 的 站 点 来 说 很 关键 。 参 见 
http://code.google.com/apis/ajaxlibs/ 查 看 更 多 信息 。 


从 文档 服务 絮 之 外 的 服务 器 里 载 入 脚本 有 重要 的 安全 隐患 。13.6.2 市 介 
绍 的 同 源 安全 策略 会 阻止 一 个 域 的 文档 中 的 JavaScript 和 为 一 个 域 的 内 
容 进行 交互 。 但 是 ， 要 注意 和 脚本 本 身 的 来 源 并 没有 关系 ， 而 是 和 脚 
本 藤 入 的 文档 的 来 源 有 关系 。 因 此 ， 同 源 策 略 并 不 适用 于 如 下 情况 : 
即便 代码 和 文档 有 着 不 同 的 来 源 ，JavaScript 代 码 也 可 以 和 它 租 入 的 文 
档 进 行 交 互 。 当 在 页 面 中 用 src 属 性 包含 一 个 脚本 时 ， 束 给 了 脚本 作者 
. 以 及 从 中 载 入 这 段 脚 本 的 域 的 网 站 管理 员 ) 完全 控制 Web 页 面 的 权 


13.2.3 ”脚本 类 型 


JavaScript 是 web 的 原始 脚本 语言 ， 而 在 默认 情况 下 ， 假 定 < script> 元 
素 包 含 或 引用 JavaScript 代 码 。 如 果 要 使 用 不 标准 的 脚本 语言 ， 如 
i (只 有 正文 持 ) ， 就 必须 用 type 属 性 指定 脚本 的 
MIME 类 型 . 


<script type="text/vbscript"> 


里 是 VBScript 代 码 


注 


</script> 


type 属 性 的 默认 值 是 "text/javascript"。 如 果 和 需要， 可 以 显 式 指定 此 类 
型 ， 但 这 完全 没 必要 。 


老 的 浏览 器 在 <script> 标 记 上 用 language 属 性 代 检 type 属 性 ， 这 种 情 
况 现 在 也 会 经 常 看 到 |: 


<script language="javascript">// 这 里 是 JavaScript 代 码 ... 


</script> 


language 属 性 已 经 废弃 ， 不 应 该 再 使 用 了 。 


当 Web 浏 览 絮 过 到 < script> 元 素 ， 并 且 这 个 <script> 元 素 包 含 其 值 不 
被 浏览 器 识别 的 type 属 性 时 ， 它 会 解析 这 个 元 素 但 不 会 尝试 显示 或 执 
行 它 的 内 容 。 这 意味 着 可 以 使 用 < script> 元 素来 内 入 任意 的 文本 数据 
到 文档 里 ， 只 要 用 type 属 性 为 数据 声明 一 个 不 可 执行 的 类 型 。 要 获取 
数据 ， 可 以 用 表示 script 元 素 (第 15 章 会 解释 如 何 获 取 这 些 元 素 ) 的 
HTMLElement 对 和 象 的 text 属 性 。 但 是 ， 要 注意 这 些 数 据 藤 入 技术 只 对 
内 联 脚 本 生效 9.。 如 果 同 时 指定 src 属 性 和 一 个 未 知 的 类 型 ， 那 这 个 脚 
会 被 忽略 ， 并 且 不 会 从 指定 的 UREL 里 下 载 任何 内 容 。 


13.2.4 HTML 中 的 事件 处 理 程序 


当 脚 本 所 在 的 HTML 文 件 被 载 入 浏览 右 时 ， 这 个 脚本 里 的 JavaScript 代 
码 只 会 执行 一 次 。 为 了 可 交互 ，JavaScript 程 序 必须 定义 事件 处 理 程序 
Web 浏 贤 姨 先 注册 JavaScript 芳 数 ， 并 在 之 后 调用 它 作 为 事件 的 响 
应 (比如 用 户 输入 ) 。 正 如 本 章 一 开始 展示 的 ，JavaScript 代 码 可 以 通 
过 把 函数 赋值 给 Element 对 象 的 属性 (比如 onclick 或 onmouseover) 来 
注册 事件 处 理 程序 。 (还 有 其 他 注册 事件 处 理 程序 的 方法 ， 参 见 第 17 
章 ) ， 这 个 Element 对 象 表示 文档 里 的 一 个 HTML 元 素 。 


类 似 onclick 的 事件 处 理 程序 属性 ， 用 相同 的 名 字 对 应 到 HTML 属 性 ， 
并 且 还 可 以 通过 将 JavaScript 代 码 放置 在 HTML 属性 里 来 定义 事件 处 理 
程序 。 例 如 ， 要 定义 用 户 切 换 表 单 中 的 复 选 框 时 调用 的 事件 处 理 程 
序 ， 可 以 作为 表示 复 选 框 的 HTML 元 素 的 属性 指定 处 理 程序 代码 : 


<input type="checkbox"name="options"value="giftwrap" 


onchange="order .options.giftwrap=this.checked;"> 


这 里 的 onchange 属 性 比较 有 意思 。 这 个 属性 值 里 的 JavaScript 代 码 会 在 
用 户 选 择 或 取消 选择 复 选 框 时 执行 。 


HTML 中 定义 的 事件 处 理 程序 的 属性 可 以 包含 任意 条 JavaScript 语 句 
相互 之 间 用 逗号 分 隔 。 这 些 语句 组 成 一 个 函数 体 ， 然 后 这 个 函数 成 为 
对 应 事件 处 理 程 序 属性 的 值 。 〈17.2.2 节 会 详细 介绍 HTML 属 性 文本 到 
JavaScript 函 数 的 转换 。) 但 是 ， 通 常 HTML 事 件 处 理 程序 的 属性 由 类 
似 上 面 的 简单 赋值 或 定义 在 其 他 地 方 的 简单 钞 数 调用 组 成 。 这 样 可 以 
保持 大 部 分 实际 的 JavaScript 代 码 在 脚本 里 ， 而 不 用 把 JavaScript 和 
HTMIL 混 在 一 起 。 实 际 上 ， 很 多 Web 开 发 者 认为 使 用 HTML 事 件 处 理 程 
序 的 属性 是 不 好 的 习惯 ， 他 们 更 喜欢 保持 内 容 和 行为 的 分 离 。 


13.2.5 ”URL 中 的 JavaScript 


在 URL 后 面 跟 一 个 javascript: 协 议 限 定 符 ， 是 男 一 种 租 入 JavaScript 代 码 
到 客户 端的 方式 。 这 种 特殊 的 协议 类 型 指定 URL 内 容 为 任意 字符 串 ， 
这 个 字符 串 是 会 被 JavaScript 解 释 器 运行 的 JavaScript 代 码 。 它 被 当做 单 
独 的 一 行 代码 对 待 ， 这 意味 着 语句 之 间 必 须 用 分 号 隔 开 ， 而 // 注 释 必 
须 用 /*#s#/ 注 释 代 奉 。javascriptUREL 能 识别 的 “资源 ”是 转换 成 字符 串 的 


。 如 果 代 码 返回 undefined， 那 么 这 个 资源 是 没有 内 
容 的 。 


javascript:URL 可 以 用 在 可 以 使 用 常规 URL 的 任意 地 方 ， 比 如 <a> 标 
记 的 href 属 性 ，<form > 的 action 属 性 ， 甚 至 window.open() 方 法 的 参 
数 。 超 链接 里 的 JavaScript URL 可 以 是 这 样 : 


<a href="javascript:new Date().toLocaleTimeString();"> 
What time is it? 


</a> 


部 分 浏览 器 (比如 Firefox) 会 执行 URL 里 的 代码 ， 并 使 用 返回 的 字符 
串 作 为 竺 显示 新 文档 的 内 容 。 束 像 单 击 一 个 http:URL 链 接 ， 浏 览 页 会 
探 除 当前 文档 并 显示 新 文档 。 以 上 代码 的 返回 值 并 不 包含 任何 HTML 
标签 ， 但 是 如 果 有 ， 浏 贤 器 会 像 洽 染 通 第 载 入 的 等 价 HTML 文 档 一 样 
泻 染 它 们 。 其 他 浏览 器 (比如 Chrome 和 Safari) 不 允许 URL 像 上 面 一 
样 禾 盖 当 前 文档 ， 它 们 会 忽略 代码 的 返回 值 。 但 是 ， 类 似 这 样 的 URL 
还 古文 持 的 : 


<a href="javascript:alert(new Date().toLocaleTimeString());"> 


检查 时 间 ， 而 不 必 禾 盖 整 个 文档 


</a> 


当 浏 唤 絮 载 入 这 种 类 型 的 URL 时 ， 它 会 执行 JavaScript 代 码 ， 但 是 由 于 
没有 返回 值 (alert0 方 法 返回 undefined) 作为 新 文档 的 显示 内 容 ， 类 似 
Firefox 的 浏览 器 并 不 会 替换 当前 显示 的 文档 。 (在 这 种 情况 下 ， 
javascript:URL 和 oncdlick 事 件 处 理 程序 的 目的 一 样 。 上 面 的 链接 通过 < 
button > 元 素 的 onclick 处 理 程序 来 表示 会 更 好 ， 因 为 <a> 元 系 通 常 应 
该 保留 为 超 链 接 ， 用 来 载 入 新 文档 。) 如 果 要 确保 javascript:URL 不 会 


窗 盖 当前 文 要 ， 可 以 用 void 操作 符 强 制 本 数 调用 或 给 表达 式 赋 了 予 
undefined 值 : 


<a href="javascript:void window.open('about:blank');"> 打 个 </a> 


如 果 这 个 URL 里 没有 void 操 作 符 ， 调 用 window.open() 方 法 返回 的 值 会 
(在 一 些 浏览 器 里 ) 被 转化 为 字符 串 并 显示 ， 而 当前 文档 也 会 被 覆盖 
为 包含 该 字符 串 的 文档 : 


[object Window] 


和 HTML 事 件 处 理 程序 的 属性 一 样 ，JavaScript URL 是 Web 早 期 的 遗 
物 ， 通常 应 该 避免 在 现代 HTML 里 使 用 。 但 javascript:URL 在 HTML 文 
档 之 外 确实 有 着 重要 的 角色 。 如 果 要 测试 一 小 段 JavaScript 人 代码， 那么 
可 以 在 浏览 絮 地 址 栏 里 直接 输入 javascript:URL 。 下 面 会 介绍 
javascript:URL 男 一 个 正统 ( 且 强 大 的 ) 的 用 法 : 浏览 器 书签 。 


书签 


在 Web 浏 览 絮 中 ,，“ 书 签 * 束 是 一 个 保存 起 来 的 URL。 如 果 书 签 是 
javascript:URL ， 那 么 保存 的 就 是 一 小 段 脚 本 ， 叫 做 bookmarklet。 
bookmarklet 是 一 个 小 型 程序 ， 很 容易 束 可 以 从 浏览 絮 的 羔 单 或 工具 栏 
里 启动 。bookmarklet 里 的 代码 执行 起 来 束 像 页 面 上 的 脚本 一 样 ， 可 以 
查询 和 设置 文档 的 内 容 、 呈 现 和 行为 。 只 要 书签 不 返回 值 ， 它 就 可 以 
探 作 当前 显示 的 任何 文档 ， 而 不 把 文档 替换 成 新 的 内 容 。 


考虑 下 面 <a> 标签 里 的 javascript'URL 。 单 击 链接 会 打开 一 个 徐 单 的 
JavaScript 表 达 式 计算 右 ， 它 允许 在 页 面 环境 中 计算 表达 式 和 执行 语 


人 名 : 


<a href='javascript: 


var e="",r="";/* 需 要 计算 的 表达 式 和 结果 */ 


dof/* 输 出 表达 式 和 结果 ， 并 要 求 输入 新 的 表达 式 */ 


e=prompt("Expression:"+et+"\n"+r+"\n",e); 


try{r="Result:"+teval(e);}/* 尝 试 计算 这 个 表达 式 */ 


catch(ex)f{r=ex;}/* 否 则 记 住 这 个 错误 */ 


}while(e);/* 直 到 没有 输入 表达 式 或 者 单 击 了 Cancel 按 钮 才 会 停止 ， 否 则 一 直 循 环 执行 */ 


void 0;/* 这 人 句 代 码 用 以 防止 当前 文档 被 覆盖 */ 


1'> 
JavaScript Evaluator 


</a> 


注意 ， 即 便 这 个 JavaScript URL 是 写成 多 行 的 ，HTML 解 析 妖 仍 将 它 作 

为 单独 的 一 行 对 等 ， 并 且 其 中 的 单行 /注释 也 是 无 效 的 。 还 有 ， 要 记 

全 所 以 代码 不 可 以 包含 任何 
和 


在 开发 时 ， 把 这 样 的 链接 硬 编码 在 页 面 中 钙 有 用 的 ， 而 把 它 男 存 为 可 
以 在 任何 页 面 上 运行 的 书签 ， 就 更 有 用 了 。 通 第 ， 在 浏览 右 里 把 超 链 
接 的 地 址 加 入 书签 可 以 这 样 做 ， 在 链接 上 右 击 并 选择 类 似 "Bookmark 
Link" 的 选项 ， 或 者 拖 动 链接 到 书签 工具 栏 。 


13.3 ” ”JavaScript 程序 的 执行 


客户 端 JavaScript 程 序 没 有 严格 的 定义 。 我 们 可 以 说 JavaScript 程 序 是 由 
Web 页 面 中 所 包含 的 所 有 JavaScript 代 码 (内 联 脚 本 、HTML 事 件 处 理 
程序 和 javascript:URL) 和 通过 < script> 标签 的 src 属性 引用 的 外 部 
JavaScript 代 码 组 成 。 所 有 这 些 单独 的 代码 共用 同一 个 全 局 Window 对 
象 。 这 意味 着 它们 都 可 以 看 到 相同 的 Document 对 象 ， 可 以 共享 相同 的 
全 局 函数 和 变量 的 集合 : 如 果 一 个 脚本 定义 了 新 的 全 局 变量 或 函数 ， 
那么 这 个 变量 或 函数 会 在 脚本 执行 之 后 对 任意 JavaScript 代 人 码 可 见 。 


如 果 Web 页 面包 含 一 个 网 入 的 窗 体 〈 通 常 使 用 < iframe> 元 素 ) ， 舱 入 
文档 中 的 JavaScript 代 码 和 被 能 入 文档 里 的 JavaScript 代 人 码 会 有 不 同 的 全 
局 对 象 ， 它 可 以 当做 一 个 单独 的 JavaScript 程 序 。 但 是 ， 要 记 住 ， 没 有 

严格 的 天 于 JavaScript 程 序 范 围 的 定义 。 如 果 外 面 和 里 面 的 文档 来 自 于 

同一 个 服务 器 ， 那 么 两 个 文档 中 的 代码 就 可 以 进行 交互 ， 并 且 如 果 你 

愿意 ， 束 可 以 把 它们 当做 是 同一 个 程序 的 两 个 相互 作用 的 部 分 。14.8.3 
六 会 详细 介绍 全 局 Window 对 和 象 以 及 不 同窗 口 和 窗 体 之 间 的 交互 。 


bookmarklet 里 的 javascript:URL 存 在 于 文档 之 外 ， 可 以 想象 成 是 一 种 用 
户 扩展 或 者 对 于 其 他 程序 的 修改 。 当 用 户 执 行 一 个 bookmarkletH 时 ， 书 
签 里 的 JavaScript 代 码 束 可 以 访问 全 局 对 象 和 当前 文档 的 内 容 ， 以 及 对 
它 进行 操作 。 


JavaScript 程 序 的 执行 有 两 个 阶段 。 在 第 一 阶段 ， 载 入 文档 内 容 ， 并 执 
行 <script> 元 素 里 的 代码 (包括 内 联 脚 本 和 外 部 脚本 ) 。 脚 本 通常 
(但 不 总 是 ， 参 见 13.3.1 节 ) 会 按 它们 在 文档 里 的 出 现 顺序 执行 。 所 有 
脚本 里 的 Javascript 代 码 都 是 从 上 往 下 ， 按 照 它 在 条 件 、 循 环 以 及 其 他 
控制 语句 中 的 出 现 顺序 执行 。 


当 文档 载 入 完成 ， 并 且 所 有 脚本 执行 完成 后 ，JavaScript 执 行 就 进入 它 
的 第 二 阶段 。 这 个 阶段 是 异步 的 ， 而 且 由 事件 驱动 的 。 在 事件 驱动 阶 
段 ，Web 浏 览 器 调用 事件 处 理 程序 范 数 (由 第 一 阶段 里 执行 的 脚本 指 
定 的 HTML 事 件 处 理 程序 ， 或 之 前 调用 的 事件 处 理 程序 来 定义 ,来 
响应 异步 发 生 的 事件 。 调 用 事件 处 理 程序 通常 是 响应 用 户 输 入 《如 鼠 
标 单 击 ， 键 盘 按 下 等 ) 。 但 是 ， 还 可 以 由 网 络 活动 、 运 行 时 间或 者 
JavaScript 代 人 码 中 的 错误 来 触发 。 第 17 章 会 详细 介绍 事件 和 事件 处 理 程 
序 。13.3.2 玫 也 会 进行 更 多 讨论 。 注 意 ， 航 入 在 Web 页 面 里 的 
javascript:URL 也 可 以 被 当做 是 一 种 事件 处 理 程序 ， 因 为 直到 用 户 通过 
单 击 链接 或 提交 表单 来 激活 之 后 它们 才 会 有 效果 。 


事件 驱动 阶段 里 发 生 的 第 一 个 事件 是 load 事 件 ， 指 示 文 档 已 经 完全 载 
入 ， 并 可 以 操作 。JavaScript 程 序 经 常用 这 个 事件 来 触发 或 发 送 消息 。 
我 们 会 经 常 看 到 一 些 定 义 函 数 的 脚本 程序 ， 除 了 定义 一 个 onload 事 件 
处 理 程序 函数 外 不 做 其 他 操作 ， 这 个 函数 会 在 脚本 事件 驱动 阶段 开始 
时 被 load 事 件 触发 。 正 是 这 个 onload 事 件 会 对 文档 进行 操作 ， 并 做 程序 
想 做 的 任何 事 。JavaScript 程 序 的 载 入 阶段 是 相对 短暂 的 ， 通 常 只 持续 
1~~2 秒 。 在 文档 载 入 完成 之 后 ， 只 要 Web 浏 唤 絮 显示 文档 ， 事 件 驱 动 
阶段 吏 会 一 直 持 续 下 去 。 因 为 这 个 阶段 是 异步 的 和 事件 驱动 的 ， 所 以 


可 能 有 长 时 间 处 于 不 活动 状态 ， 没 有 JavaScript 补 执行， 被 用 户 或 网 络 
。13.3.4 节 会 详细 介绍 JavaScript 执 行 的 两 个 阶 

3 。 

核心 JavaScript 和 客户 端 JavaScript 都 有 一 个 单线 程 执 行 模型 。 脚 本 和 事 
件 处 理 程序 (无 论 如 何在 同一 个 时 间 只 能 执行 一 个 ， 没 有 并 发 性 。 
这 保持 了 JavaScript 编 程 的 简单 性 ， 在 13.3.3 和 会 介绍 。 

13.3.1 同步、 异步 和 延迟 的 脚本 
JavaScript 第 一 次 添加 到 Web 浏 览 右 时 ， 还 没有 API 可 以 用 来 志 历 和 操 
作文 档 的 结构 和 内 容 。 当 文档 还 在 载 入 时 ，JavaScript 影 响 文 档 内 容 的 
唯一 方法 是 快速 生成 内 容 。 它 使 用 document.write() 方 法 完成 上 述 任 
务 。 例 13-3 展 示 了 1996 年 最 先进 的 JavaScript 代 码 的 样子 。 


例 13-3: 载 入 时 生成 文档 内 容 


<hi>Table of Factorials</hi> 


<script> 


function factorial(n){// 用 来 计算 阶乘 的 函数 


if(n<=1)return n; 


else return n*factorial(n-1); 


} 


document .write("<table>");// 开 始 创建 HTML 表 


document .write("<tr><th>n</th><th>n!</th></tr>");// 输 出 表 头 


for(var i=1;i<=10;i++){// 输 出 10 行 


document .write("<tr><td>"+i+"</td> <td>"+factorial(i)+"</td> </tr>"); 


} 


document .write("</table>");// 表 格 结束 


document ,write("Generated at"+new Date() ) ;// 输 出 时 间 戳 


</script> 


当 脚 本 把 文本 传递 给 document.write0 时 ， 这 个 文本 被 添加 到 文档 输入 
流 中 ，HTML 人 解析 器 会 在 当前 位 置 创 建 一 个 文本 节点 ， 将 文本 插入 这 
个 文本 节点 后 面 。 我 们 并 不 推荐 使 用 document.write()， 但 在 某 些 场景 
下 它 有 着 重要 的 用 途 〈 见 15.10.2 节 ) 。 当 HTML 解 析 器 过 到 <script> 
元 素 时 ， 它 默认 必须 先 执行 脚本 ， 然 后 再 恢复 文档 的 解析 和 泻 染 。 这 
对 于 内 联 脚本 没什么 问题 ， 但 如 果 脚 本 源 代 码 是 一 个 由 src 属 性 指定 的 
外 部 文件 ， 这 意味 着 脚本 后 面 的 文档 部 分 在 下 载 和 执行 脚本 之 前 ， 都 
“会 出 现在 浏览 器 中 罗 -。 


脚本 的 执行 只 在 默认 情况 下 是 同步 和 阻塞 的 。< script> 标 签 可 以 有 
defer 和 async 属 性 ， 这 〈 在 文 持 它们 的 浏览 器 里 ) 可 以 改变 脚本 的 执行 
方式 。 这 些 都 是 布尔 属性 ， 没 有 值 ， 只 需要 出 现在 <script> 标 签 里 即 
可 。HTML5 说 这 些 属性 只 在 和 src 属 性 联合 使 用 时 才 有 效 ， 但 有 些 浏览 
右 还 文 持 延迟 的 内 联 脚本 : 


< Script defer src="deferred.js"></script> 


<script async src="async.js"></script> 


defer 和 async 属 性 都 像 在 告诉 浏览 絮 链 接 进 来 的 脚本 不 会 使 用 
document.write0， 也 不 会 生成 文档 内 容 ， 因 此 浏览 右 可 以 在 下 载 脚本 
时 继续 解析 和 泻 染 文档 。defer 属 性 使 得 浏 贤 絮 延迟 脚本 的 执行 ， 直 到 
文档 的 载 入 和 人 解析 完成 ， 并 可 以 操作 。async 属 性 使 得 浏 贤 絮 可 以 尽快 
地 执行 脚本 ， 而 不 用 在 下 载 脚 本 时 阻塞 文档 解析 。 如 果 <script> 标签 
两 个 属性 ， 同 时 支持 两 者 的 浏览 器 会 遵从 async 属 性 并 忽略 defer 
Ea O 


注意 ， 延 迟 的 脚本 会 按 它们 在 文档 里 的 出 现 顺 序 执行 。 而 异步 脚本 在 
它们 载 入 后 执行 ， 这 意味 着 它们 可 能 会 无 序 执行 。 


在 撰写 本 书 的 时 候 ，async 和 defer 属 性 还 没有 广泛 实现 ， 它 们 只 被 一 些 
优化 建议 所 考虑 。 即 便 延 迟 和 异步 的 脚本 会 同步 执行 ，Web 页 面 应 该 
还 可 以 正常 工作 。 

甚至 可 以 在 不 支持 async 属 性 的 浏览 絮 里 ， 通 过 动态 创建 <script> 元素 
并 把 它 插入 到 文档 中 ， 来 实现 脚本 的 异步 载 入 和 执行 。 例 13-4 里 的 
loadasync() 落 数 完成 了 这 个 工作 。 第 15 章 会 介绍 它 使 用 的 技术 。 


例 13-4: 异步 载 入 并 执行 脚本 


// 异 步 载 入 并 执行 一 个 指定 URL 中 的 脚本 


function loadasync(url){ 


var head=document .getElementsByTagName("head")[90];// 找 到 <head>> 元 素 


var s=document.createElement("script");// 创 建 一 个 <script> 元 素 


s .src=url;// 设 置 其 src 属 性 


head.,appendchild(s);// 将 script 元 素 插入 head 标 签 中 


} 


注意 这 个 loadasync() 落 数 会 动态 地 载 入 脚本 脚本 载 入 到 文档 中 ， 
成 为 正在 执行 的 JavaScript 程 序 的 一 部 分 ， 既 不 是 通过 Web 页 面 内 联 包 
舍 ， 也 不 是 来 目 Web 页 面 的 静态 引用 。 


13.3.2 ”事件 驱动 的 JavaScript 


例 13-3 里 展示 的 古老 的 JavaScript 程 序 是 同步 载 入 的 程序 : 在 页 面 载 入 
时 开始 执行 ， 生 成 一 些 输出 ， 然 后 结束 。 这 种 类 型 的 程序 在 今天 已 经 
不 种 见 了 。 反 之 ,我 们 通过 注册 事件 处 理 程序 函数 来 写 程 序 。 之 后 在 
注册 的 事件 发 生 时 异步 调用 这 些 函 数 。 例 如 ， 想 要 为 党 用 操作 局 用 刍 
盘 快 捷 键 的 Web 应 用 会 为 链 盘 事件 注册 事件 处 理 程序 。 甚 至 非 交 互 的 
程序 也 使 用 事件 。 假 如 想 要 写 一 个 分 析 文 档 结构 并 目 动 生成 文档 内 容 


的 表格 的 程序 。 程 序 不 需要 用 户 输 入 事件 的 事件 处 理 程序 ， 但 它 还 是 
会 注册 onload 事 件 处 理 程序 ， 这 样 承 可 以 知道 文档 在 什么 时 候 载 入 完 
成 并 可 以 生成 内 容 表 格 了 。 


事件 和 事件 处 理 是 第 17 革 的 主题 ,但 是 这 一 节 会 提供 一 个 快速 概览 
事件 都 有 名 字 ， 比 如 click、change、load、mouseover、 keypress 或 。 
readystatechange， 指 示 发 生 的 事件 的 通用 类 型 。 事 件 还 有 目标 ， 它 是 
一 个 对 象 ， 并 且 事 件 束 是 在 它 上 面 发 生 的 。 当 我 们 谈论 事件 的 时 候 ， 
必须 同时 指定 事件 类 型 (名字) 和 目标 : 比如， 一 个 单 击 事件 发 生 在 
HTMLButtonElement 对 象 上 ， 或 者 一 个 readystatechange 事 件 发 生 在 
XMLHttpRequest 对 象 上 。 


如 果 想 要 程序 啊 应 一 个 事件 ， 写 一 个 函数 ， 叫 做 “事件 处 理 程序 ”`\“ 事 
件 监听 絮 * 或 “回调 *。 然 后 注册 这 个 函数 ， 这 样 他 束 会 在 事件 发 生 时 调 
用 它 。 正 如 前 面 提 到 的 ， 这 可 以 通过 HTML 属 性 来 完成 ， 但 是 我 们 不 
避 励 将 JavaScript 代 码 和 HTML 内 容 混 消 在 一 起 。 反 之 ， 注 册 事 件 处 理 
单 的 方法 是 把 JavaScript 函 数 赋 值 给 目标 对 象 的 属性 ， 类 似 这 


window.onload=function(){...}; 
document .getElementById("button1").onclick=function(){...}; 
function handleResponse(){...} 


request.onreadystatechange=handleResponse,; 


注意 ， 按 照 约定 ， 事 件 处 理 程序 的 属性 的 名 字 是 以 "on" 开 始 ， 后 面 跟 
he eh 还 要 注意 在 上 面 的 任何 代码 里 没有 函数 调用 只 是 把 

函数 本 身 赋值 给 这 些 必 性。 浏览 圳 会 在 事件 发 生 时 执行 调用 。 用 事件 
进行 异步 编程 全 经 双生 涉及 岁 套 函数 ， 也 经 常 要 在 函数 的 函数 里 定义 函 


数 。 


对 于 大 部 分 浏 虎 右 中 的 大 部 分 事件 来 说 ， 会 把 一 个 对 象 传递 给 事件 处 
理 程序 作为 参数 ， 那 个 对 象 的 属性 提供 了 事件 的 详细 信息 。 比 如 ， 传 
递 给 单 击 事件 的 对 象 ， 会 有 一 个 属性 说 明 鼠 标的 哪个 按钮 被 单 击 。 


(在 下 里 ， 这 些 事件 信息 被 存储 在 全 局 event 对 象 里 ， 而 不 是 传递 给 处 
理 程 序 函 数 。) 事件 处 理 程序 的 返回 值 有 时 用 来 指示 函数 是 否 充分 处 
理 了 事件 ， 以 及 阻止 浏览 亏 执 行 它 默认 会 进行 的 各 种 操作 。 


有 些 事件 的 目标 是 文档 元 素 ， 它 们 会 经 常 往 上 传递 给 文档 树 ， 这 个 过 
程 叫做 “ 冒 泡 ”。 例 如 ， 如 果 用 户 在 <button > 元 素 上 单 击 鼠标 ， 单 击 事 
件 就 会 在 按钮 上 触发 。 如 有 果 注 册 在 按钮 上 的 函数 没有 处 理 (并 且 冒 泡 
停止 ) 该 事件 ， 事 件 会 冒 泡 到 按钮 嵌 套 的 容器 元 素 ， 这 样 ， 任 何 注册 
在 容器 元 素 上 的 单 击 事件 都 会 调用 。 


如 果 需 要 为 一 个 事件 注册 多 个 事件 处 理 程序 函数 ， 或 者 如 果 想 要 写 一 
个 可 以 安全 注册 事件 处 理 程序 的 代码 模块 ， 束 算 另 一 个 模块 已 经 为 相 
同 的 目标 上 的 相同 的 事件 注册 了 一 个 处 理 程序 ， 也 需要 用 到 另 一 种 事 
件 处 理 程序 注册 技术 。 大 部 分 可 以 成 为 事件 目标 的 对 象 都 有 一 个 叫做 
addEventListaner() 的 方法 ， 人 允许 注册 多 个 监听 比 : 


window.addEventListener("load",function(){...},false); 
request.addEventListener("readystatechange",function(){...},false); 
注意 这 个 函数 的 第 一 个 参数 是 事件 的 名 称 。 虽 然 addEventListenerO 已 


经 标准 化 超过 了 十 年 ， 而 微软 目前 只 有 在 IE9 里 实现 了 它 。 在 IE8 以 及 
之 前 的 浏览 郁 中 ， 必 须 使 用 一 个 相似 的 方法 ， 叫 做 attachEventO: 


window.attachEvent("onload",function(){...}); 


参见 第 17 章 查看 更 多 关于 addEventListener() 和 attachEvent() 的 内 容 。 


客户 端 JavaScript 程 序 还 使 用 异步 通知 类 型 ， 这 些 类 型 往往 不 是 事件 。 
如 果 设 置 Window 对 象 的 onerror 属 性 为 一 个 函数 ， 会 在 发 生 (参阅 章 
14.6 节 ) JavaScript 错 误 (或 其 他 未 捕获 的 异常 ， 时 调用 函数 。 还 有 ， 
setTimeout(0 和 setIntervalO 函 数 (这 些 是 Window 对 象 的 方法 ， 因 此 是 客 
户 端 JavaScript 的 全 局 函数 ) 会 在 指定 的 一 段 时 间 之 后 触发 指定 函数 的 
调用 。 传 递 给 setTimeout0 的 函数 和 真实 事件 处 理 程序 的 注册 不 同 ， 它 


们 通常 叫做 “回调 逻辑 ”而 不 是 “处 理 程序 ?"， 但 它们 和 事件 处 理 程序 一 
样 ， 也 是 异步 的 。 参 见 14.1 市 获得 更 多 天 于 setTimeout() 和 和 setInterval() 
的 信息 。 

例 13-5 演 示 了 setTimeout()、addEventListener() 和 attachEvent()， 定 义 一 
个 onload0) 落 数 注册 在 文档 载 入 完成 时 执行 的 钞 数 。on load0 是 非常 有 
用 的 函数 ， 我 们 会 在 本 书后 面 的 例子 中 用 到 它 。 


例 13-5: onLoad0， 当 文档 载 入 完成 时 调用 一 个 函数 


// 注 册 函 数 f， 当 文档 载 入 完成 时 执行 这 个 函数 f 


// 如 果 文 档 已 经 载 入 完成 ， 尽 快 以 异步 方式 执行 它 


function onLoad(f){ 


if(onLoad.1oaded)// 如 果 文 档 已 经 载 入 完成 


window,setTimeout(f,9);// 将 f 放 入 异步 队列 ， 并 尽快 执行 它 


else if(window,addEventListener)// 注 册 事 件 的 标准 方法 


window.addEventListener("]load",f,false); 


else if(window.attachEvent)//IE8 以 及 更 早 的 IE 版 本 浏览 器 注册 事件 的 方法 


window.attachEvent("onload",f); 


// 给 onLoad 设 置 一 个 标志 ， 指示 文档 是 否 载 入 完成 


onLoad .loaded=false;// 注 册 一 个 函数 ， 当 文档 载 入 完成 时 设置 这 个 标志 


onLoad(function( ){onLoad.1loaded=true;}); 


13.3.3 客户 端 JavaScript 线 程 模型 


JavaScript 语 言 核 心 并 不 包含 任何 线程 机 制 ， 并 且 客 户 端 JavaScript 传 统 
上 也 没有 定义 任何 线程 机 制 。HTML5 定 义 了 一 种 作为 后 台 线 程 

的 "WebWorker"， 但 是 客户 端 JavaScripti 不 像 严 格 的 单线 程 一 样 工作 。 
甚至 当 可 能 并 发 执行 的 时 候 ， 客 户 端 JavaScript 也 不 会 知晓 是 否 真 鸭 有 
并 行 逻 辑 的 执行 。 


单线 程 执行 是 为 了 证 编程 更 加 简单 。 编 写 代 码 时 可 以 确保 两 个 事件 处 
理 程序 不 会 同一 时 刻 运行 ， 操 作文 档 内 容 时 也 不 必 担 心 会 有 其 他 线程 
试图 同时 修改 文档 ， 并 且 永 远 不 需要 在 写 JavaScript 代 码 的 时 候 担 心 


锁 、 死 锁 和 竞 态 条 件 (race condition) 


单线 程 执 行 意味 着 浏览 器 必须 在 脚本 和 事件 句 处 理 程序 执行 的 时 候 停 
止 啊 应 用 户 输 入 。 这 为 JavaScript 程 序 员 市 来 了 负担 ， 它 意味 着 
JavaScript 脚 本 和 事件 处 理 程序 不 能 运行 太 长 时 间 。 如 采 一 个 脚本 执行 
计算 密集 的 任务 ， 它 将 会 给 文档 载 入 带 来 延 返 ， 而 用 户 无 法 在 脚本 完 
成 前 看 到 文档 内 容 。 如 果 事 件 处 理 程序 执行 计算 密集 的 任务 ， 浏 览 履 
可 能 变 得 无 法 响应， 可 能 会 导致 用 户 认 为 浏览 器 朋 江 了 4。 


如 果 应 用 程序 不 得 不 执行 太 多 的 计算 而 导致 明显 的 延迟 ， 应 该 允许 文 
档 在 执行 这 个 计算 之 前 完全 载 入 ， 并 确 你 能 够 告知 用 户 计算 正在 进行 
并 且 浏 览 絮 没有 挂 起 。 如 果 可 能 将 计算 分 解 为 离散 的 子 任务 ， 可 以 使 
用 setTimeout() 和 setInterval() 方 法 在 后 人 台 运 行 子 任务 ， 同 时 更 新 一 个 进 
度 指 示 器 同 用 户 显 示 反 馈 。 


HTML5 定 义 了 一 种 并 发 的 控制 方式 ， 叫 做 "Web worker"。Web worker 
是 一 个 用 来 执行 计算 密集 任务 而 不 冻结 用 户 界 面 的 后 台 线 程 。 运 行 在 
Web worker 线 程 里 的 代码 不 能 访问 文档 内 容 ， 不 能 和 主线 程 或 其 他 
worker 共 享 状态 ， 只 可 以 和 主线 程 和 其 他 worker 通 过 异步 事件 进行 通 
信 ， 所 以 主线 程 不 能 检测 并 发 性 ， 并 且 Web worker 不 能 修改 JavaScript 
程 厅 的 莹 利生 线程 江 行 模 玖 。 人 参见 22.4 玉 获得 更 多 Web worker 的 信 


13.3.4 客户 端 JavaScript 时 间 线 


我 们 已 经 看 到 了 JavaScript 程 序 从 脚本 执行 阶段 开始 ， 然 后 切换 到 事件 
处 理 阶 段 。 本 市 会 更 详细 地 解释 了 JavaScript 程 序 执行 的 时 间 线 。 


1.Web 浏 览 右 创建 Document 对 象 ， 并 且 开 始 解 机 Web 页 面 ， 解 机 HIML 
元 素 和 它们 的 文本 内 容 后 添加 Element 对 象 和 TextT 点 到 文档 中 。 在 这 
个 阶段 document.readystate 属 性 的 值 是 "loading"。 


2. 当 HTML 解析 局 遇 到 没有 async 和 defer 属 性 的 <script> 元 素 时 ， 它 把 
这 些 元 素 添 加 到 文档 中 ， 然 后 执行 行内 或 外 部 脚本 。 这 些 脚本 会 同步 
执行 ， 并 且 在 脚本 下 载 (如 果 需 要 ) 和 执行 时 解析 器 会 暂停 。 这 样 脚 
本 就 可 以 用 document.write0) 来 把 文本 插入 到 输入 流 中 。 解 析 器 恢复 时 
这 些 文本 会 成 为 文档 的 一 部 分 。 同 步 脚 本 经 党 简单 定义 函数 和 注册 后 
面 使 用 的 注册 事件 处 理 程序 ， 但 它们 可 以 过 历 和 操作 文档 树 ， 因 为 在 
它们 执行 时 已 经 存在 了 。 这 样 ， 同 步 脚 本 可 以 看 到 它 自己 的 <script> 
元 素 和 它们 之 前 的 文档 内 容 。 


3. 当 解析 絮 遇 到 设置 了 async 属 性 的 <script> 元 素 时 ， 它 开始 下 载 脚本 
文本 ， 并 继续 解析 文档 。 脚 本 会 在 它 下 载 完 成 后 尽快 执行 ， 但 是 解析 
铬 没有 停 下 来 等 它 下 载 。 异步 脚本 禁止 使 用 document.write() 方 法 。 它 
们 可 以 看 到 上 自己 的 <script> 元 素 和 它 之 前 的 所 有 文档 元 素 ， 并 且 可 能 
或 干脆 不 可 能 访问 其 他 的 文档 内 容 。 


4. 当 文档 完成 解析 ，document.readyState 属 性 变 成 "interactive"。 


5. 所 有 有 defer 属 性 的 脚本 ， 会 按 它 们 在 文档 的 里 的 出 现 顺 序 执行 。 异 
步 脚 本 可 能 也 会 在 这 个 时 间 执 行 。 延 迟 脚 本 能 访问 完整 的 文档 树 ， 禁 
止 使 用 document.write() 方 法 。 


6. 浏 览 器 在 Document 对 象 上 触发 DOMContentLoaded 事 件 。 这 标志 着 程 
序 执行 从 同步 脚本 执行 阶段 转换 到 了 异步 事件 驱动 阶段 。 但 要 注意 ， 
这 时 可 能 还 有 异步 脚本 没有 执行 完成 。 


7. 这 时 ， 文 档 已 经 完全 解析 完成 ,但 是 浏览 妖 可 能 还 在 等 等 其 他 内 容 

载 入 ， 如 图 片 。 当 所 有 这 些 内 容 完 成 载 和 时， 并 且 所 有 异步 脚本 完成 
载 入 和 执行 ，document.readyState 属 性 改变 为 "complete"，Web 浏 览 履 

触发 Window 对 象 上 的 load 事 件 。 


8. 从 此 刻 起 ， 会 调用 异步 事件 ， 以 异步 响应 用 户 输入 事件 、 网 络 事 
件 、 计 时 器 过 期 等 。 


这 是 一 条 理想 的 时 间 线 ， 但 是 所 有 浏览 絮 都 没有 支持 它 的 全 部 细 广 。 
所 有 浏 贤 絮 普遍 都 支持 load 事 件 ， 都 会 触发 呈 ， 它 是 决定 文档 完全 载 
入 并 可 以 操作 最 通用 的 技术 。DOMContentLoaded 事 件 在 load 事 件 之 前 
触发 ， 当 前 所 有 浏 贤 絮 都 支持 这 个 事件 ， 除 了 正之 外 ， 
document.readyState 属 性 在 写本 书 时 已 被 大 部 分 浏览 絮 实 现 ， 但 是 属性 
的 值 在 浏览 器 之 间 有 细微 的 差别 。defer 属 性 被 所 有 当前 版 本 的 下 支 
持 ， 但 是 现在 还 未 被 其 他 浏览 器 实现 。async 属 性 的 支持 在 写本 书 时 还 
不 通用 ， 但 是 例 13-4 里 展示 的 异步 脚本 执行 技术 被 当前 所 有 当前 浏 虎 
需 文 持 。 〈 但 是 ， 要 注意 用 类 似 loadasync(O 函 数 动态 载 入 脚本 的 能 7 
让 程序 执行 的 脚本 载 入 阶段 和 事件 驱动 阶段 之 则 的 界限 更 加 模糊 。) 


这 条 时 间 线 没有 指定 什么 时 候 文 档 开 始 对 用 户 可 见 或 什么 时 候 Web 训 
览 硕 必须 开始 啊 应 用 户 输入 事件 。 这 些 是 实现 细节 。 对 于 很 长 的 文档 
或 非常 慢 的 网 络 链接 ，Web 浏 览 絮 理论 上 会 泻 染 一 部 分 文档 ， 并 且 在 
所 有 脚本 执行 之 前 ， 殖 能 允许 用 户 开 始 和 页 面 产 生 一 些 交 互 。 这 种 情 
况 下 ， 用 户 输 入 事件 可 能 在 程序 执行 的 事件 驱动 阶段 开始 之 前 触发 。 


13.4 兼容 性 和 互 用 性 


Web 浏 贤 絮 是 Web 应 用 的 操作 系统 ， 但 是 Web 是 一 个 存在 各 种 差异 性 的 
环境 ，Web 文 档 和 应 用 会 在 不 同 操 作 系 统 (Windows、Mac OS、 
Linux、iPhone OS、Android) 的 不 同 开 发 两 (Microsoft、Mozilla、 
Apple、Google、Opera) 的 不 同时 代 的 浏览 器 (从 预览 版 的 浏览 器 到 
类 似 IE6 这 种 十 多 年 之 前 的 浏览 器 ; 上 查看 和 运行 。 写 一 个 健壮 的 客户 
0 么 多 类 型 的 平台 上 ， 的 确 是 一 种 


客户 端 Javascript 兼 容 性 和 交互 性 的 问题 可 以 归纳 为 以 下 三 类 
演化 


Web 平 台 一 直 在 演变 和 发 展 当中 。 一 个 标准 规范 会 倡导 一 个 新 的 特性 
或 API。 如 采 特 性 看 起 来 有 用 ， 训 览 右 开发 丙 实现 它 。 如 果 足 够 多 的 
开发 商 实 现 它 ， 开 发 者 开始 试用 这 个 特性 ， 并 依赖 于 这 个 特性 ， 然 后 
这 个 特性 束 在 Web 平 台中 广泛 使 用 。 有 时候 浏 蜗 器 开发 商 和 Web 开 发 
者 引领 这 种 标准 规范 的 指定 ， 开 发 好 官方 的 版 本 ， 之 前 该 特性 已 经 成 
为 一 个 事实 的 标准 。 男 一 种 情况 ， 新 特性 已 经 被 添加 到 Web 中 ， 新 浏 


览 器 支持 它 但 是 老 浏 览 器 不 支持 。Web 开 发 者 必须 在 使 用 老 旧 浏览 器 
的 大 量 用 户 和 使 用 新 式 浏览 郁 的 少量 用 户 之 间 做 出 权衡 。 


未 实现 


有 了 时候， 浏览 絮 开 发 两 之 间 对 于 某 一 个 特性 是 否 足 够 有 用 到 要 实现 存 
在 观点 上 的 差异 。 一 些 开 发 商 实现 了 这 个 特性 ， 而 其 他 的 没有 实现 。 
有 些 现代 浏览 絮 实 现 的 功能 在 老 旧 浏 贤 姨 中 没 实现 ， 这 种 情况 还 好 ， 
但 同样 实现 一 个 功能 在 不 同 浏 览 器 中 有 很 大 差别 ， 例 如 ，IE8 不 支持 < 
canvas 元 素 ， 里 然 所 有 其 他 浏 贤 妮 已 经 实现 了 它 。 一 个 更 加 糟糕 的 
例子 是 ，Microsoft 决 定 不 实现 DOM Level 2 Event 规 范 ( 它 定 义 了 
addEventListener0 和 相关 的 方法 ) 。 这 个 规范 在 十 年 之 前 已 经 标准 化 
了 ， 其 他 浏览 器 厂商 已 经 支持 了 很 久 了 8.。 


bug 


每 个 浏览 器 都 有 bug， 并 且 没 有 按照 规范 准确 地 实现 所 有 的 客户 端 
JavaScript API。 有 时 候 编写 能 兼容 各 个 浏览 器 的 JavaScript 程 序 是 一 个 
糟 透 了 的 工作 ， 必 须 研 究 已 有 浏览 右 中 的 各 种 bug 。 


弟 运 的 是 ，JavaScript 语 言 本 喘 是 被 所 有 浏览 器 厂商 实 现 的 ， 它 不 是 兼 
容 性 问题 的 源头 。 所 有 浏览 器 都 有 对 ES3 的 通用 实现 ， 并 且 在 写本 书 

的 时 候 ， 所 有 厂商 都 在 实现 ES5。ES3 和 ES5 之 间 的 转换 可 能 会 导致 兼 
容 性 问题 ， 因 为 一 些 浏览 器 会 支持 严格 模式 而 其 他 的 不 支持 ， 浏 览 絮 
厂商 对 ES5 的 实现 基本 是 相互 通用 的 。 


目 和 完 ， 要 解决 JavaScript 的 兼容 性 问题 是 要 了 解 问题 的 根源 十 什么 。 
Web 浏 览 器 版 本 的 更 迭 要 比 本 书 的 版 本 快 三 售 多 ， 因 此 本 书 没 办 法 告 
诉 你 什么 版 本 的 浏 咒 右 实现 了 哪些 特性 ， 或 者 不 会 过 多 讨论 哪些 特性 
在 某 些 浏 咒 絮 下 的 表现 如 何 或 其 中 的 bug。 这 些 比 较 具 体 的 信息 最 好 直 
接 去 网 上 碍 找 。HTML5 标 准 化 的 努力 的 目标 古 最 终 产 生 一 个 测试 套 
件 。 在 写本 书 的 时 候 ， 还 没有 这 样 的 测试 ， 但 是 一 旦 存在 这 样 的 测 
试 ， 这 必定 会 给 济 唤 紫 兼 容 性 领域 留 下 一 些 宝 贯 的 财富 。 当 下 有 一 些 
网 站 提供 了 这 种 信息 ， 可 能 会 对 你 有 用 : 


https://developer.mozilla.org 


Mozilla 开 发 者 中 心 


http://msdn.microsoft.com 

Microsoft 开 发 者 网 络 

http://developer.apple.com/safari 

Apple 开 发 者 网 络 里 的 Safari 开 发 者 中 心 

http://code.google.com/doctype 

Google 把 Doctype 项 目 介 绍 为 “开放 Web 的 一 本 百科 全 书 *。 这 个 用 户 可 
以 编辑 的 站 点 包含 客户 端 JavaScript 的 各 种 兼容 性 表格 。 在 写本 书 的 时 


候 ， 这 些 表 格 只 报告 了 每 个 浏览 夯 里 是 否 存在 各 种 属性 和 方法 ， 而 事 
实 上 没有 说 它们 是 否 工 作 正 常 。 


http://en.wikipedia.org/wiki/Comparison_of layout_engines (HIML 5) 
Wikipedia 文 章 跟 踪 了 HTML5 特 性 和 API 在 各 个 浏览 器 里 的 实现 状态 。 


http://en.wikipedia.org/wiki/Comparison_of layout_engines (Document O 
bject_Model) 


一 篇 简单 的 文章 ， 跟 踪 DOM 特 性 的 实现 状态 。 
http://a.deveria.com/caniuse 


这 个 “ 何 时 可 用 ..….…...” 丫 点 跟 踩 重 要 Web 特 性 的 实现 状态 ， 人 允许 根据 各 
1 过 滤 ， 并 在 某 个 特性 只 剩 下 少量 已 部 署 的 浏览 器 不 支持 时 
荐 


http:/www.quirksmode.org/dom 


根据 W3C 标 准 列 出 的 各 种 浏览 占 的 DOM 兼 容 性 表格 。 


http://webdevout.net/browser-support 


另 一 个 跟踪 浏览 万 开 发 商 对 于 Web 标 准 的 实现 的 站 点 。 


注意 ， 列 表 的 最 后 三 个 站 点 是 由 个 人 维护 的 。 尽 管 它们 是 客户 端 
JavaScript 的 先行者， 但 这 些 站 点 可 能 不 会 总 是 保持 最 新 。 


当然 ， 意 识 到 浏览 器 之 间 的 兼容 性 问题 只 是 第 一 步 。 接 下 米 ， 你 需要 
解决 这 些 不 兼容 性 。 一 种 策略 是 限制 自己 使 用 你 选择 支持 的 所 有 浏览 
器 都 普遍 支持 的 特性 (或 者 很 容易 模拟 出 的 特性 ) 。 之 前 提 及 的 “ 何 时 
可 用 ...... ”这 个 网 站 (http://a.deveria.com/caniuse) 就 是 围绕 这 个 策略 
的 : 它 列 出 了 所 有 等 下 6 淘汰 之 后 才能 用 的 新 特性 ， 等 正 6 淘汰 之 后 ， 

这 个 网 站 也 没有 存在 的 必要 了 。 下 面 几 节 介绍 一 种 略 有 点 消极 的 对 付 
客户 端 不 兼容 性 问题 的 策略 。 


13.4.1 处理 兼容 性 问题 的 类 库 


处 理 不 兼容 问题 其 中 一 种 最 简单 的 方法 是 使 用 类 库 。 比 如 ， 考 虑 客户 
端 图 像 的 < canvas> 元 素 (第 21 章 的 主题 。 正 是 唯一 不 文 持 这 个 特 
性 的 当前 浏 贤 嚣 。 它 支持 一 种 星 梁 的 客户 端 图 形 语言 ， 叫 做 VML， 尺 
管 如 此 ，canvas 元 素 可 以 基于 它 进行 模拟 。 开 源 的 "explorer canvas" 项 
日 在 http://code.google.com/p/explorercanvas 上 已 经 发 布 了 一 个 类 库 ， 就 
是 做 这 件 事 情 : 引入 一 个 JavaScript 代 码 文件 叫做 excanvas.js， 然 后 I 下 
就 会 看 起 来 像 它 文 持 < canvas> 元 素 一 样 。 


关于 “当前 正在 使 用 的 浏览 器 ” 


客户 端 JavaScript 是 一 个 充满 变化 的 概念 ， 特 别 是 随 着 ES5 和 HTML5 的 

出 现 。 因 为 平台 的 快速 演变 ， 我 们 往往 不 会 使 用 “ 某 些 特定 版 本 的 浏 贤 

右 ” 这 种 狭义 的 措辞 表述 。 所 有 这 样 的 表述 在 本 书 下 一 版 出 版 之 前 承 过 

时 了 。 因 此 ， 你 会 发 现 我 经 名 使 用 * 所 有 当前 的 浏览 器 ”《〈 或 “除了 正之 外 

当前 所 有 浏览 器 ”) 放 入 我 所 表述 的 语 境 中 。 在 撰写 本 书 时 ， 当 前 的 
( 非 测 斌 版 ， 的 浏览 器 是 : 


‘Internet Explorer 8 
‘Firefox 3.6 
‘Safari 5 


-Chrome 5 


‘Opera 10.10 


当 本 书 上 架 时 ， 当 前 浏览 右 可 能 会 是 Internet Explorer 9、Firefox 4、 
Safari 5、Chrome 11 和 Opera 11 。 


但 并 不 是 说 本 书 中 所 有 提 到 的 “当前 浏览 融 ” 都 是 这 个 含义 ， 我 只 是 布 
望 大 家 能 了 解 在 撰写 本 书 时 所 使 用 的 浏览 器 。 


本 书 第 5 版 用 了 词语 “现代 浏 贤 器 *"， 而 不 是 “当前 浏览 絮 *。 那 个 版 本 在 
2006 年 发 布 ， 那 时 候 的 “当前 浏览 器 ”是 Firefox 1.5、IE6、Safari 2 和 
Opera 8.5 〈Google 的 Chrome 浏 览 器 还 不 存在 ) 。 本 书 中 保留 的 所 有 关 
于 “现代 浏 贤 器 * 的 表 壕 都 可 以 理解 “所 有 浏览 器 ”*"， 因 为 比 这 些 还 老 的 
浏览 器 已 经 很 少 了 。 


本 书 (特别 是 第 22 章 ) 描述 的 一 些 最 新 的 客户 端 特性 ， 这 些 特性 还 没 
有 在 所 有 的 浏览 右 里 实现 。 然 而 这 些 特性 都 在 一 个 开放 的 标准 流程 下 
进行 开发 ， 已 经 在 至 少 一 个 发 布 的 浏览 絮 里 实现 ， 并 看 起 来 会 被 所 有 
浏览 器 厂商 接受 (可 能 除 Microsoft 之 外 ) 。 


excanvas.js 是 一 个 兼容 类 库 的 很 纯粹 的 例子 。 在 开发 过 程 中 ， 可 能 会 
对 某 个 特性 编写 类 似 的 类 库 。ES5 数 组 方法 (7.9 节 ) ， 比 如 
forEachO0、mapO0 和 reduce0， 可 以 在 ES3 中 几乎 完美 模拟 ， 并 且 通 过 把 
合适 的 类 库 添 加 到 页 面 中 ， 可 以 把 这 些 强 大 有 用 的 方法 当做 所 有 浏 贤 
名 平台 基线 的 部 分 。 


但 是 ， 有 时候 ， 不 可 能 完全 地 (或 有 效 地 ) 在 一 个 不 支持 某 个 特性 的 
浏览 右上 实现 一 个 特性 。 残 像 已 经 提 到 的 ， 正 是 唯一 没有 实现 标准 事 
件 处 理 API 的 浏览 器 ， 包 括 注 册 事 件 处 理 程序 的 addEventListener() 方 
法 。 正 文 持 一 个 类 似 的 方法 叫做 attachEvent(0。attachEvent(O) 不 像 
addEventListener(O) 一 样 强大 ， 并 且 在 正 提供 的 基础 上 透明 地 实现 整个 
标准 并 非 真 正 可 行 。 反 之 ， 开 发 者 有 时 定义 一 个 折 中 的 事件 处 理 方 
法 ， 通 常 叫 addEvent()， 它 可 以 用 addEventListener() 或 attachEvent() 来 
方便 地 实现 绑 定 事件 的 功能 。 然 后 ， 它 们 在 所 有 的 代码 里 用 addEvent(O) 
来 代 玲 addEventListener0 或 attachEventO 。 


在 实际 的 开发 工作 中 ， 今 天 不 少 We b 开 发 者 在 它们 所 有 的 Web 页 面 上 
用 了 客户 端 JavaScript 框 架 ， 比 如 jQuery 〈 人 参见 第 19 章 ) 。 使 这 些 框架 
必 不 可 少 的 一 个 重要 功能 是 : 它们 定义 了 新 的 客户 端 API 并 兼容 所 有 


浏 斋 硕 。 例 如 ， 在 jQuery 里 ， 事 件 处 理 程序 的 注册 是 通过 叫 bind0 的 方 
法 完成 的 。 如 果 你 基于 jQuery 做 所 有 的 Web 开 发 ， 你 就 永远 不 需要 考 
虑 addEventListener0 和 attachEvent0 之 间 的 不 兼容 性 问题 。 参 见 13.7 贡 
获得 更 多 天 于 客户 闻 框 架 的 信息 。 


13.4.2 ”分 级 浏 贤 髓 支持 


分 级 浏览 器 (graded browser support) 是 由 Yahoo! 率 先 提出 的 一 种 测试 
技术 。 从 某 种 维度 对 浏 贤 器 三 商 /版 本 /操作 系统 变 体 进 行 分 级 。 分 级 
浏 哆 器 中 的 A 级 要 通过 所 有 的 功能 测试 用 例 。 对 于 C 级 浏览 器 来 说 则 不 
必 所 有 用 例 都 通过 测试 。A 级 浏览 如 需要 网 页 完全 可 用 ，C 级 浏览 娇 只 
需 在 HTML 完 整 情况 下 可 用 即 可 ， 而 不 需要 JavaScript 和 CSS 都 正常 工 
作 。 那 些 不 是 A 级 和 C 级 的 浏览 絮 都 称 做 X 级 浏览 侨 : 这 部 分 都 是 全 新 
的 浏览 妖 或 者 太 罕 见 的 浏览 絮 。 我 们 默认 在 这 些 浏览 絮 中 都 症 网 页 完 
er 的 ， 但 官方 并 不 会 对 X 级 浏览 器 中 的 功能 提供 完整 支持 和 测 

谍 %* 


你 可 以 在 http://developer.yahoo.com/yui/articles/gbs 阅 读 更 多 关于 Yahoo! 
的 分 级 浏览 右 文 持 情况 。 这 个 页 面 还 存 有 Yahoo! 当 前 的 A 级 和 C 级 浏览 
器 列表 (这 个 列表 每 季度 更 新 一 次 ) 中 。 就 算 上 自己 没有 采用 任何 一 种 
分 级 浏览 器 测试 基准 ， 使 用 Yahoo! 的 A 级 浏览 器 列表 是 一 种 简单 快捷 
下 通过 查阅 这 个 列表 也 能 清楚 地 知道 当前 比较 流行 的 浏览 器 是 
哪些 。 


13.4.3 ”功能 测试 


功能 测试 (capability testing) 是 解决 不 兼容 性 问题 的 一 种 强大 技术 。 
如 果 你 想 试用 某 个 功能 ， 但 又 不 清楚 这 个 功能 是 否 在 所 有 的 浏览 器 中 
都 有 比较 好 的 兼容 性 ， 则 需要 在 脚本 中 添加 相应 的 代码 来 检测 是 否 在 
浏览 絮 中 支持 该 功能 。 如 果 期 望 使 用 的 功能 还 没有 被 当前 的 平台 所 文 
和 要 么 不 在 该 平台 中 使 用 它 ， 要 么 提供 可 在 所 有 平台 上 运行 的 代 


你 将 会 在 后 面 的 各 章 中 一 次 又 一 次 地 看 到 功能 测试 。 例 如 ， 在 第 17 
草 ， 有 如 下 所 示 的 代码 : 


if(element .addEventListener ){// 在 使 用 这 个 W3C 方 法 之 前 首先 检测 它 是 否 可 用 


element.addEventListener("keydown",handler, false); 


element.addEventListener("keypress",handler, false); 


} 


else if(element.attachEvent ){// 在 使 用 该 ITE 方 法 之 前 首先 检测 它 


element.attachEvent("onkeydown",handler); 
element.attachEvent("onkeypress",handler); 


} 
else{// 否 则 ， 选 择 普遍 支持 的 技术 
element .onkeydown=element.onkeypress=handler,; 


} 


天 于 功能 测试 最 重要 的 是 ， 它 并 不 涉及 浏 贤 器 开发 英和 浏 贤 絮 的 版 本 
号 。 代 码 在 当前 的 浏览 器 集合 中 有 效 ， 在 浏览 絮 的 后 续 版 本 中 也 同样 
有 效 ， 而 不 管 后 续 的 浏览 器 是 否 实现 了 这 些 功 能 的 集合 。 但 要 注意 的 
是 ， 这 种 方法 需要 测试 某 个 属性 或 方法 是 否 在 浏览 絮 中 已 经 定义 了 ， 
除非 该 属性 或 方法 完全 可 用 。 如 果 Microsoft 要 定义 一 个 
addEventListener(0) 方 法 ， 但 Microsoft 只 是 实现 了 一 部 分 W3C 规 范 ， 在 
addEventListener() 之 前 这 将 会 给 使 用 特性 测试 的 代码 带 来 很 多 麻 
烦 。 


13.4.4 怪异 模式 和 标准 模式 


Microsoft 在 发 布 IE6 的 时 候 ， 增 加 了 IE5 里 没有 的 很 多 CSS 标 准 特性 。 
但 为 了 确保 与 已 有 有 Web 内容 的 后 同 兼 容 性 ， 它 定义 了 两 种 不 同 的 泻 沫 
模式 。 在 “标准 模式 ”或 CSS 兼容 模式 ”中 ， 浏 席 顷 要 遵循 CSS 标 准 ， 

在 “怪异 模式 ”中 ， 浏 览 器 表现 的 和 IE4 和 IE5 中 的 怪异 非 标 准 模 式 一 
样 。 演 染 模 式 的 选择 依赖 于 HTML 文 件 顶 部 的 DOCTYPE 声 明 ， 在 IE6 
中 打开 没有 DOCTYPE 的 页 面 和 声明 了 某 些 权限 Doctype 的 页 面 都 会 按 


照 怪 异 模式 进行 泻 染 ， 定 义 了 严格 的 Doctype 的 页 面 (或 者 为 了 做 到 前 
各 兼容 性 而 添加 了 未 知 的 Doctype 的 页 面 ) 会 按照 标准 模式 进行 渲染 ， 

定义 了 HTML5 Doctype (<!DOCTYPE html>) 的 页 面 在 所 有 现代 浏 
唤 强 中 都 会 按照 标准 模式 渲染 。 


怪异 模式 和 标准 模式 之 间 的 差别 经 历 了 很 长 时 间 的 发 展 历程 ， 现 在 新 
版 本 的 正 都 支持 标准 模式 ， 其 他 主流 浏览 右 也 都 支持 标准 模式 。 这 两 
种 模式 都 已 经 被 HIML5 规 范 所 认可 。 人 怪异 模式 和 标准 模式 之 间 的 差异 
对 于 HTML 和 CSS 开 发 者 影响 最 大 。 但 客户 端 JavaScript 代 码 则 是 需要 
知道 文档 以 哪 种 模式 进行 泻 染 的 。 要 进行 这 种 泻 染 模式 的 特性 检测 ， 
通常 检查 document.compatMode 属 性 。 如 果 其 值 为 "CSS1Compat"， 则 
说 明 浏 览 絮 工作 在 标准 模式 ， 如 果 值 为 "BackCompat”( 或 undefined， 
说 明 属 性 根本 不 存在 ) ， 则 说 明 浏 览 器 工作 在 怪异 模式 。 所 有 现代 浏 
pe 并 且 HTML5 规 范 对 它 进 行 了 标准 


测试 compatMode 不 是 必要 的 。 但 是 ， 在 例 15-8 展 示 的 示例 代码 中 用 到 
了 它 。 


13.4.5 浏览 需 测 试 


功能 测试 非常 适用 于 检测 大 型 功能 领域 的 支持 ， 比 如 可 以 使 用 这 种 方 
法 来 确定 浏 咒 占 是 否 文 持 W3C 事 件 处 理 模 型 还 是 I 的 事件 处 理 模型 。 

另外 ， 有 时 候 可 能 会 需要 在 某 种 浏 损 需 中 解决 个 别 的 bug 或 难题 ， 但 却 
没有 太 好 的 方法 来 检测 bug 的 存在 性 。 在 这 种 情况 下 ， 需 要 创建 一 个 针 
对 某 个 平台 的 解决 方 条 ， 这 个 解决 方案 和 特定 的 浏览 器 厂 两、 版 本 或 
操作 系统 〈 或 三 方面 的 组 合 ) 联系 紧密 。 


在 客户 端 JavaScript 中 检测 浏览 器 类 型 和 版 本 的 方法 就 是 使 用 Navigator 
对 象 ， 我 们 将 在 第 14 章 学 习 它 ， 确 定 当前 浏览 器 的 厂商 和 版 本 的 代码 
通常 叫做 浏览 器 串 探 器 (browser sniffer) 或 者 客户 端 噢 探 器 (client 
sniffer) 。 例 14-3 给 出 了 一 个 简单 的 例子 。 在 Web 的 早期 ， 当 Netscape 
和 IE 平 台 两 者 相互 不 兼容 的 时 候 ， 客 户 端 嗅 探 (client sniffing) 就 是 一 
种 常见 的 客户 端 编程 技术 ， 现 在 兼容 性 情况 已 经 基本 稳定 ， 浏 览 器 咱 
探 不 像 若干 年 前 这 样 常用 ， 但 偶尔 有 些 场 景 还 会 用 到 。 


需要 注意 的 是 ， 客 户 端 噢 探 也 可 以 在 服务 右 端 完成 ，Web 服 务 锅 根据 
User-Agent 头 部 可 以 有 选择 地 返回 特定 的 JavaScript 代 码 给 客户 端 。 


13.4.6 ”Internet Explorer 里 的 条 件 注 释 

实际 上 ， 读 者 会 发 现 客 户 端 JavaScript 编 程 中 的 很 多 不 兼容 性 都 是 针对 
IE 的 。 也 就 是 说 ， 必 须 按照 某 种 方式 为 正 编写 代码 ， 而 按照 另 一 种 方 
式 为 其 他 的 浏览 器 编写 代码 。 正 文 持 条 件 注 释 (由 IE5 引 入 ) ， 尽 管 这 
种 做 法 并 不 符合 标准 规范 ， 但 是 在 处 理 不 兼容 性 时 非常 有 用 。 

下 面 是 HIML 中 的 条 件 注 释 的 样子 。 注 意 ，HTML 注 释 使 用 结束 的 分 
隔 符 的 技巧 

<!--[if IE 6]> 

This content is actually inside an HTML comment. 

It will only be displayed in IE 6. 

<1[endif]--> 

<1--[if lte IE 7]> 

This content will only be displayed by IE 5,6 and 7 and earlier. 

lte stands for"less than or equal".You can also use"]lt","gt"and"gte". 

<1![endif]--> 

<1--[if!IE]><--> 

This is normal HTML content,but IE will not display it 

because of the comment above and the comment below. 

<1--><![endif]--> 


This is normal content,displayed by all browsers. 


来 看 一 个 具体 的 例子 ， 上 文 介绍 过 使 用 excanvs.js 类 库 在 Internet 
Explorer 里 实现 <canvas>> 元 素 。 由 于 这 个 类 库 只 有 I 下 需要 (并 且 也 只 
为 EE 工作 ) ， 因 此 有 理由 在 页 面 里 使 用 条 件 注释 引入 它 ， 这 样 其 他 浏 
完 絮 就 不 会 载 入 它 : 


<!--[if IE]><script src="excanvas.js"></script><![endif]--> 


下 的 JavaScript 解 释 器 也 文 持 条 件 注 释 ，C 和 C++ 程序 员 可 能 觉得 它们 
和 C 预 处 理 器 的 下 fdef/#endif 功 能 很 相似 。 正 中 的 JavaScript 条 件 注释 以 
文本 /*@cc_on 开 头 ， 以 文本 @*/ 结 束 (cc_on stands 中 的 cc 表示 条 件 编 
译 ) 。 下 面 的 条 件 注释 包含 了 只 在 正中 执行 的 代码 : 


/*Q@cc_on 


@if(@_jscript )// 该 代码 位 于 一 条 JS 注 释 内 但 在 IE 中 执行 它 


alert("In IE"); 
@end 


@*/ 


在 一 条 条 件 注释 内 部 ， 关 键 字 @if、@else 和 @end 划 分 出 哪些 是 要 被 IE 
的 JavaScript 解 释 器 有 条 件 地 执行 的 代码 。 大 多 数 时 候 ， 只 需要 上 面 所 
示 的 简单 的 条 件 : @if(@_jscript)。JScript 是 Microsoft 目 己 的 JavaScript 
解释 器 的 名 字 ， 而 @_jscript 变 量 在 正中 总 是 为 true。 


通过 条 件 注 释 和 第 规 的 JavaScript 注 释 的 合理 的 交叉 组 合 ， 可 以 设置 在 
IE 中 运行 一 段 代码 而 在 所 有 其 他 浏 贤 夯 中 运行 另 一 段 不 同 的 代码 : 


/*Q@cc_on 


@if(@_jscript)// 这 里 的 代码 在 一 条 条 件 注释 中 ， 也 在 一 条 常规 的 JavaScript 注 释 中 


//IE 会 执行 这 段 代码 ， 其 他 浏览 器 不 执行 它 


alert('You are using Internet Explorer); 


@else*/// 这 段 代 码 并 没 在 JavaScript 注 释 中 ， 但 仍然 在 IE 条 件 注释 中 


// 也 就 是 说 除了 IE 之 外 的 所 有 浏览 器 都 执行 这 里 的 代码 


alert('You are not using Internet Explorer');/*@end 


@*/ 


13.5 可 访问 性 


Web 是 发 布 信息 的 理想 工具 ， 而 JavaScript 程 序 可 以 增强 对 信息 的 访 
问 。 然 而 ，JavaScript 程 序 员 必须 小 心 ， 因 为 程序 员 写 代码 太 过 随意 ， 
以 至 于 那些 有 视觉 障碍 或 者 肢体 困难 的 用 户 没 办 法 正确 地 获取 信息 。 


盲人 用 户 使 用 一 种 叫做 屏幕 阅读 硕 的 “辅助 性 技术 "将 书面 的 文字 变 成 
语音 词汇 。 有 些 屏幕 阅读 右 征 识别 JavaScript 的 ， 而 另 一 些 只 能 在 公用 
JavaScript 时 才 会 工作 得 更 好 。 如 采 你 设计 的 站 点 过 于 依赖 JavaScript 来 
呈现 数据 的 话 ， 就 会 把 那些 使 用 读 屏 软 件 的 用 户 拒 之 门 外 。 (当然 也 
会 把 那些 使 用 像 手 机 这 样 不 支持 JavaScript 的 移动 设备 的 用 户 以 及 那些 
有 意 蔡 用 浏览 器 脚本 的 用 户 排除 在 外 。) JavaScript 的 角色 应 当 是 增加 
信息 的 表现 力 ， 而 不 是 负责 信息 的 呈现 。JavaScript 可 访问 性 的 一 条 重 
要 原则 是 ， 设 计 的 代码 即使 在 禁用 JavaScript 解 释 器 的 浏览 器 中 也 能 正 
常 使 用 (或 至 少 以 某 种 形式 正常 使 用 ) 。 


可 访问 性 关心 的 另 一 个 重要 的 问题 是 ， 对 于 那些 只 使 用 键盘 但 不 能 

(或 者 选择 不 用 ) 使 用 鼠标 的 用 户 来 说， 如 果 编 写 的 JavaScript 代 但 依 
赖 于 特定 的 鼠标 事件 ， 这 吏 会 将 那些 不 使 用 鼠标 的 用 户 排 除 在 外 。 
Web 浏 贤 絮 允许 使 用 键盘 来 疡 历 和 激活 一 个 Web 页 面 中 的 UI 元 素 。 并 
且 JavaScript 代 码 也 应 该 允许 这 样 做 。 正 如 第 17 章 所 介绍 的 ，JavaScript 
文 持 独 立 于 设备 的 事件 ， 例 如 onfocus 和 onchange， 以 及 依赖 于 设备 的 
事件 (比如 onmouseover 和 onmousedown) 。 为 了 考虑 到 可 访问 性 ， 应 
该 尽 可 能 地 支持 独立 于 设备 的 事件 。 


创建 可 访问 的 Web 页 面 并 非 鸡 毛 蒜 皮 的 小 问题 ， 而 对 于 可 访问 性 的 完 
整 讨 论 则 超出 了 本 书 的 范畴 。 关 心 可 访问 性 的 Web 应 用 开发 者 应 该 阅 
读 这 里 的 文档 : http:/www.w3.org/WALUintro/aria 的 WAI-ARIA (Web 
Accessibility Initiative-Accessible Rich Internet Applications) 标准 。 


136， 过 全 性 


Web 济 蜗 絮 中 包 仿 JavaScript 解释 句 ， 也 就是 说 ,一旦 载 入 Web 页 面 ， 
束 可 以 让 任意 的 JavaScript 代 码 在 计算 机 里 执行 。 很 明显 ， 这 里 存在 奢 
安全 隐患 ， 浏 览 絮 厂商 也 在 不 断 地 权衡 下 面 这 两 个 方面 之 间 的 博 到 : 


定义 强大 的 客户 端 API， 启 用 强大 的 Web 应 用 : 
:阻止 恶意 代码 读 取 或 修改 数据 、 盗 取 隐 私 、 诈 骗 或 浪费 时 间 。 


就 像 在 其 他 领域 中 一 样 ，JavaScript 也 在 盘 根 错 市 的 安全 漏洞 和 补丁 之 
则 不 断 地 发 展演 化 。 在 Web 早 期 ， 浏 贤 器 添加 了 类 似 能 够 打开 、 移 

动 、 调 整 窗口 大 小 以 及 编辑 浏览 絮 状 态 栏 的 功能 。 而 当 不 道德 的 广告 
商 和 骗子 开始 滥用 这 些 技术 ， 浏 览 妖 制作 者 不 得 不 限制 或 禁用 这 些 
API。 今 天 ， 在 标准 化 HTML5 的 进程 中 ， 浏 览 器 厂商 会 小 心 (并 且 开 
放 和 合作 性 地 ) 搞 量 某 个 长 期 存在 的 安全 限制 ， 并 且 在 (希望 ) 不 引 
入 新 的 安全 漏洞 的 基础 上 给 客户 端 JavaScript 添 加 少量 的 功能 。 


下 面 几 节 会 介绍 JavaScript 的 安全 限制 和 安全 问题 ， 这 些 问题 是 每 个 
Web 开 发 者 都 需要 意识 到 的 。 


13.6.1 JavaScript 不 能 做 什么 


Web 浏 览 器 针对 恶意 代码 的 第 一 条 防线 就 是 它们 不 支持 某 些 功能 。 例 
如 ， 客 户 端 JavaScript 没 有 权限 来 写 入 或 删除 客户 计算 机 上 的 任意 文件 
或 列 出 任意 目录 。 这 意味 着 JavaScript 程 序 不 能 删除 数据 或 植 入 病毒 。 
(但 22.6.5 闻 会 介绍 JavaScript 如 何 阅 读 用 户 选 择 的 文件 ，22.7 节 介绍 
JavaScript 如 何 实现 安全 隐私 文件 系统 ， 以 及 如 何 读 取 和 写 入 文件 。) 


类 似 地 ， 客 户 端 JavaScript 没 有 任何 通用 的 网 络 能 力 。 客 户 端 JavaScript 
程序 可 以 对 HTTP 协 议 编程 (参见 第 18 章 ) ; 并 且 HTML5 有 一 个 附属 
标准 叫 WebSockets， 定 义 了 一 个 类 套 接 字 的 API， 用 于 和 指定 的 服务 需 
通信 。 但 是 ， 这 些 API 都 不 允许 对 于 范围 更 广 的 网 络 进行 直接 访问 。 


通用 的 Internet 客 户 端 和 服务 器 不 能 同时 使 用 客户 端 JavaScript 来 写 也 | 


浏览 需 针 对 恶意 代码 的 第 二 条 防线 是 在 目 己 文 持 的 某 些 功 能 上 施加 限 
制 。 以 下 是 一 些 功 能 限制 : 


-JavaScript 程 序 可 以 打开 一 个 新 的 浏览 万 袜 口 ， 但 是 为 了 防止 广告 丙 和 小 
用 弹出 窗口 ， 很 多 浏览 器 限制 了 这 一 功能 ， 使 得 只 有 为 了 啊 应 鼠标 单 
击 这 样 的 用 户 触发 事件 的 时 候 ， 才 能 使 用 它 。 


JavaScript 程 序 可 以 关闭 目 己 打 开 的 浏览 郁 窗 口 ， 但 是 不 允许 它 不 经 过 
用 户 确 认 束 关闭 其 他 的 窗口 。 


HTML FileUpload 元 素 的 value 属 性 是 只 读 的 。 如 果 可 以 设置 这 个 属 
性 ， 脚 本 就 能 设置 它 为 任意 期 望 的 文件 名 ， 从 而 导致 表单 上 传 指定 文 
件 (比如 密码 文件 ) 的 内 容 到 服务 器 。 


.脚本 不 能 读 取 从 不 同 服务 器 出 | 载 入 的 文档 的 内 容 ， 除 非 这 个 就 是 包 
含 该 脚本 的 文档 。 类 似 地 ， 一 个 脚本 不 能 在 来 日 不 同 服务 器 的 文档 上 
注册 事件 监听 器 。 这 就 防止 脚本 窃取 其 他 页 面 的 用 户 输入 (例如 ， 组 
成 一 个 密码 项 的 键盘 单 击 过 程 ) 。 这 一 限制 叫做 同 源 策略 (same- 
origin policy) ， 下 一 节 将 更 详细 地 介绍 它 。 


注意 ， 这 里 并 未 给 出 所 有 的 客户 端 JavaScript 的 限制 项 ， 不 同 浏览 右 有 
不 同 的 安全 策略 ， 并 可 能 实现 不 同 的 API 限 制 。 部 分 浏览 硕 可 能 还 允 
许 根据 用 户 但 好 来 增强 或 减弱 限制 。 


13.6.2” 同 源 策略 


同 源 策略 是 对 JavaScript 代 码 能 够 操作 哪些 Web 内 容 的 一 条 完整 的 安全 
限制 。 当 Web 页 面 使 用 多 个 <iframe > 元素 或 者 打开 其 他 浏览 器 窗口 的 
时 候 ， 这 一 策略 通常 束 会 发 挥 作用 。 在 这 种 情况 下 ， 同 源 策略 负责 管 
理 窗口 或 窗 体 中 的 JavaScript 代 码 以 及 和 其 他 窗口 或 帧 的 交互 。 具 体 来 
说 ， 脚 本 只 能 读 取 和 所 属 文档 来 源 相 同 的 窗口 和 文档 的 属性 (参见 
14.8 节 了 解 如 何 使 用 JavaScript 操 控 多 个 窗口 和 窗 体 ) 。 


文档 的 来 源 包 含 协议 、 主 机 ， 以 及 载 入 文档 的 URL 端 口 。 从 不 同 Web 
服务 硕 载 入 的 文档 具有 不 同 的 来 源 。 通 过 同一 主机 的 不 同 端口 载 入 的 


文档 具有 不 同 的 来 源 。 使 用 http: 协 议 载 入 的 文档 和 使 用 https: 协 议 载 入 
的 文档 具有 不 同 的 来 源 ， 即 使 它们 来 目 同 一 个 服务 器 。 


脚本 本 号 的 来 源 和 同 源 策 略 并 不 相关 ， 相 关 的 是 脚本 所 骨 入 的 文档 的 
来 源 ， 理 解 这 一 点 很 重要 。 例 如 ， 假 设 一 个 来 自主 机 A 的 脚本 被 包含 
到 (使 用 <script> 标 记 的 src 属 性 ) 宿主 B 的 一 个 Web 页 面 中 。 这 个 脚 
本 的 来 源 是 主机 B， 并 且 可 以 完整 地 访问 包含 它 的 文档 的 内 容 。 如 果 
脚本 打开 一 个 新 窗口 并 载 入 来 目 主 机 B 的 另 一 个 文档 ， 脚 本 对 这 个 文 
档 的 内 容 也 具有 完全 的 访问 权限 。 但 是 ， 如 果 脚 本 打开 第 三 个 窗口 并 
载 入 一 个 来 自主 机 C 的 文档 (或 者 是 来 自 主机 A) ， 同 源 策略 就 会 发 挥 
作用 ， 阻 止 脚本 访问 这 个 文档 。 


实际 上 ， 同 源 策 略 并 非 应 用 于 不 同 源 的 窗口 中 的 所 有 对 象 的 所 有 属 

性 。 不 过 它 应 用 到 了 其 中 的 大 多 数 必 性， 尤其 是 对 Document 对 象 的 几 
平 所 有 属性 而 言 。 凡 是 包含 男 一 个 服务 右 中 文档 的 窗口 或 窗 体 ， 都 是 
同 源 策略 适用 的 范围 。 如 采 脚 本 打开 一 个 窗口 ， 脚 本 也 可 以 天 闭 它 ， 
但 不 能 以 任何 方式 得 看 窗口 内 部 。 同 源 策 略 还 应 用 于 使 用 
XMLHttpRequest 生 成 的 HTTP 请 求 (参见 第 18 章 ) 。 这 个 对 象 允许 客 
户 端 JavaScript 生 成 任意 的 HITP 请 求 到 脚本 所 属 文档 的 web 服务 右 ， 但 
是 不 允许 脚本 和 其 他 Web 服 务 器 通信 。 


对 于 防止 脚 丰 祈 取 似 有 的 信息 来 说 ， 同 兰 策 略 是 必需 的 。 如 采 没 有 这 
一 限制 ， 有 恶意 脚本 (通过 防火 载 载 入 到 安全 的 公司 内 网 的 浏 损 器 中 ) 可 
能 会 打开 一 个 人 的 口 ， 欺 驻 用 户 进入 并 使 用 这 个 窗口 在 内 网 上 浏览 
文件 。 恶 意 脚本 就 能 够 读 取 窗 口 的 内 容 并 将 其 发 送 回 目 己 的 服务 器 。 
辣 源 策 路 防止 了 这 种 行 


不 严格 的 同 源 策略 


在 某 些 情况 下 ， 同 源 策 略 就 显得 太 过 严格 了 。 本 市 会 介绍 三 种 不 严格 
的 同 兰 策略 。 


同 源 策 上 略 给 那些 使 用 多 个 子 域 的 大 站 点 带 来 了 一 些 问题 。 例 如 ， 来 自 
home.example.com 的 文档 里 的 脚本 想 要 合法 地 读 取 从 
developer.example.com 载 入 的 文档 的 属性 ， 或 者 来 目 
orders.example.com 的 脚本 可 能 需要 读 catalog.example.com 上 的 文档 的 
属性 。 为 了 文 持 这 种 类 型 的 多 域名 站 点 ， 可 以 使 用 Document 对 象 的 
domain 属 性 。 在 默认 情况 下 ， 属 性 domain 存 放 的 是 载 入 文档 的 服务 器 


的 主机 名 。 可 以 设置 这 一 属性 ， 不 过 使 用 的 字符 串 必须 具有 有 效 的 域 
表 绥 或 它 本 喘 。 因 此 ， 如 果 一 个 domain 属 性 的 初始 值 是 字符 

串 "home.example.com"， 束 可 以 把 它 设置 为 字符 串 "example.com"， 但 
是 不 能 设置 为 "home.example" 或 "ample.com"。 另 外 ，domain 值 中 必须 
有 一 个 点 号 ， 不 能 把 它 设置 为 "com" 或 其 他 顶级 域名 。 


如 果 两 个 窗口 (或 窗 体 ) 包含 的 脚本 把 domain 设 置 成 了 相同 的 值 ， 那 
人 这 两 个 窗口 就 不 再 受 同 源 集 略 的 约束 ， 它 们 可 以 相互 读 取 对 方 的 属 
性 。 例 如 ， 从 order.example.com 和 catalog.example.com 载 入 的 文档 中 的 
脚本 可 以 把 它们 的 document.domain 属 性 都 设置 为 "example.com"， 这 样 
一 来 ， 这 些 文档 束 有 了 同 源 性 ， 可 以 互相 读 取 属 性 。 


不 严格 的 同 源 策 略 的 第 二 项 技术 已 经 标准 化 为 : 路 域 资 源 共享 

(Cross-Origin Resource Sharing， 参 见 http://www.w3.0org/TR/cors/) 。 
这 个 标准 草案 用 新 的 "Origin:" 请 求 尖 和 新 的 Access-Control-Allow- 
Origin 啊 应 头 来 扩展 HTTP。 它 允许 服务 器 用 头 信息 显 式 地 列 出 源 ， 或 
使 用 通配符 来 匹配 所 有 的 源 并 人 允许 由 任何 地 址 请 求 文件 。 类 似 Firefox 
3.5 和 Safari 4 的 浏览 器 可 以 使 用 这 种 新 的 头 信息 来 允许 路 域 HTTP 请 
求 ， 这 样 XMLHttpRequest 就 不 会 被 同 源 策 上 略 所 限制 了。 


另 一 种 新 技术 ， 叫 做 跨 文 档 消 息 (cross-document messaging) ， 人 允许 
来 自 一 个 文档 的 脚本 可 以 传递 文本 消息 到 另 一 个 文档 里 的 脚本 ， 而 不 
管 脚本 的 来 源 是 否 不 同 。 调 用 Window 对 象 上 的 postMessage() 方 法 ， 可 
以 异步 传递 消息 事件 〈 可 以 用 onmessage 事 件 句 处 理 程序 函数 来 处 理 
它 ) 到 窗口 的 文档 里 。 一 个 文档 里 的 脚本 还 是 不 能 调用 在 其 他 文档 里 
的 方法 和 读 取 属性 ， 但 它们 可 以 用 这 种 消息 传递 技术 来 实现 安全 的 通 
信 。 参 见 22.3 市 获得 更 多 天 于 跨 文档 消 居 API 的 细 广 。 


13.6.3 ”脚本 化 插件 和 ActiveX 控 件 


尽管 核心 JavaScript 语 言 和 基本 的 客户 端 对 象 模型 缺乏 大 多 数 肪 意 代 码 

所 需要 的 文件 系统 功能 和 网 络 功能 ， 但 情况 并 不 像 看 上 去 那么 简单 。 

在 很 多 Web 浏 览 釉 中 ，JavaScript 亦 被 用 做 很 多 软件 或 插件 的 "脚本 引 

敬 ”， 这 样 的 组 件 有 正中 的 ActiveX 探 件 和 其 他 浏览 三 的 插件 。Flash 和 

它们 为 客户 端 脚本 提供 了 非常 重要 且 强 
、 村 O 


脚本 化 ActiveX 控 件 和 插件 的 能 力也 存在 着 安全 性 的 问题 。 例 如 ，Java 
applet 具 有 访问 的 层 网 络 的 能 力 。Java 安 全 “ 沙 箱 ”阻止 applet 和 载 入 它 
的 服务 器 之 外 的 任何 服务 器 进行 通信 ， 因 此 ， 这 并 未 打开 一 个 安全 漏 
洞 。 但 是 ， 它 骏 露 了 一 个 根本 的 问题 : 如 果 揪 件 是 可 以 脚本 化 的 ， 我 
们 不 仅 要 无 条 件 相 信 Web 浏 贤 絮 的 安全 架构 ， 还 要 相信 插件 的 安全 架 
构 。 实 际 上 ，Java 和 Flash 插 件 看 上 去 具有 健壮 的 安全 性 ， 并 旦 不 会 为 
客户 端 JavaScript 引 来 安全 问题 。 然 而 ，ActiveX 脚 本 化 有 着 更 加 粳 糕 
的 历史 遗留 问题 。IE 浏 宽 右 已 经 能 够 访问 各 种 各 样 的 脚本 化 ActiveX 控 
件 ， 而 这 些 控件 是 Windows 操 作 系 统 的 一 部 分 ， 并 且 在 过 去 ， 操 作 系 
统 还 存在 很 多 可 被 控件 利用 的 安全 漏洞 。 


13.6.4” 跨 站 脚本 


跨 站 脚本 (Cross-site scripting) ， 或 者 叫做 XSS， 这 个 术语 用 来 表示 
一 类 安全 问题 ， 也 就 是 攻击 者 问 目 标 Web 站 点 注入 HTML 标 签 或 者 脚 
本 。 防 止 XSS 攻 击 是 服务 器 端 Web 开 发 者 的 一 项 基本 工作 。 然 而 ， 客 
户 端 JavaScript 程 序 员 也 必须 意识 到 或 者 能 够 预防 跨 站 脚本 。 


如 果 Web 页 面 动 态 地 产生 文档 内 容 ， 并 且 这 些 文档 内 容 是 基于 用 户 提 
交 的 数据 的 ， 而 并 没有 通过 从 中 移 除 任何 区 入 的 HTML 标 签 来 “ 消 
毒 ” 的 话 ， 那 么 这 个 Web 页 面 很 容易 遭 到 路 站 脚本 攻击 。 来 看 一 个 小 例 
Re 它 使 用 JavaScript 通 过 用 户 的 名 字 来 向 用 户 
| 对 -: 


<script> 


var name=decodeURIComponent (window.1location.search.substring(1))||""; 


document .write("Hello"+name); 


</script> 


这 两 行 脚本 使 用 window.location.search 来 获得 它们 自己 的 URL 中 
以 “?” 开 始 的 部 分 。 它 使 用 document.write0O 来 向 文档 添加 动态 生成 的 内 
容 。 这 个 页 面 专 门 通过 如 下 的 一 个 URL 来 调用 : 


http://www.example.com/greet.html?David 


这 么 使 用 的 时 候 ， 它 会 显示 文本 "Hello David"。 但 考虑 一 下 ， 当 用 下 
面 的 URL 来 调用 它 ， 会 发 生 什么 情况 : 


http://www.example.com/greet.html?%3Cscript%3Ealert('David' )%3C/script%3E 


只 用 这 个 URL， 脚 本 会 动态 地 生成 男 一 个 脚本 (%3C 和 %3E 是 一 个 尖 
括号 的 编码 ) 。 在 这 个 例子 中 ， 注 入 的 脚本 只 显示 一 个 对 话 框 ， 这 还 
是 相对 较 好 的 情况 。 但 是 ， 如 果 考 虑 以 下 的 情况 : 


http://siteA/greet.html?name=%3Cscript src=siteB/evil.]js%3E%3C/script%3E 


之 所 以 叫做 跨 站 脚本 攻击 ， 就 是 因为 它 涉及 多 个 站 点 。 站 点 B (或 者 
站 点 C) 包含 一 个 专门 构造 的 到 站 点 A 的 链接 (就 像 上 面 的 那个 ，， 它 
会 注入 一 个 来 目 站 点 B 的 脚本 。 脚 本 eval.js 驻 留 在 恶意 站 点 B 中 ， 但 现 
在 ， 它 租 入 到 站 点 A 中 ， 并 且 可 以 对 站 点 A 的 内 容 进行 任何 想 要 的 操 
作 。 它 可 能 损坏 这 个 页 面 或 者 使 其 不 能 正常 工作 (例如 ， 启 动 下 一 市 
所 要 介绍 的 拒绝 服务 攻击 ) 。 这 可 能 会 对 站 点 A 的 用 户 带 来 不 少 坏 
处 。 更 危险 的 是 ， 恶 意 脚本 可 以 读 取 站 点 A 所 存储 的 cookie (可 能 是 统 
计数 据 或 者 其 他 的 个 人 验证 信息 ) ， 然 后 把 数据 发 送 回 站 点 B。 注 入 
的 脚本 甚至 可 以 户 独 用 户 击 键 并 将 数据 发 送 回 站 点 B 。 


通常 ， 防 止 XSS 攻 击 的 方式 是 ， 在 使 用 任何 不 可 信 的 数据 来 动态 的 创 
建文 档 内 容 之 前 ， 从 中 移 除 HTML 标 签 。 可 以 通过 添加 如 下 一 行 代码 
0 <script> 标签 两 边 的 尖 插 号， 从 而 修复 前 面 给 出 的 greet.html 文 


name=name.replace(/</g,"&]1t;").replace(/>/g,"&gt;,"); 


上 面 的 科 单 代码 替换 把 字符 串 中 所 有 的 尖 括 号 替换 成 它们 对 应 的 
HTML 实 体 ， 也 就 是 说 将 字符 串 中 任意 HTML 标 签 进 行 转 义 和 过 小 删 
除 (deactivate) 处 理 。 正 8 定义 了 一 个 更 加 微妙 的 toStaticHTML() 方 
法 ， 可 以 移 除 <script> 标 签 《和 其 他 潜在 的 可 执行 内 容 ) 而 不 修改 不 
可 执行 的 HTML 。toStaticHTML0O 是 不 标准 的 ， 但 在 JavaScript 核 心 代 
码 中 自己 实现 一 个 HTML 安 全 函数 也 非常 简单 。 


HTML5 的 内 容 安 全 策略 则 更 进一步 ， 它 为 <iframe 元 素 定 义 了 一 个 
sandbox 必 性。 在 实现 之 后 ， 它 允许 显示 不 可 信 的 内 容 ， 并 目 动 禁用 脚 
本 [e) 


跨 站 脚本 使 得 一 个 有 害 的 漏洞 能 够 立足 于 Web 的 架构 之 中 。 深 入 理解 
这 些 跨 站 脚本 的 知识 是 值得 的 ， 但 是 更 深入 的 讨论 超出 了 本 书 的 范 

。 有 很 多 在 线 资源 可 以 帮助 你 预防 跨 站 脚本 市 来 的 危险 。 其 中 一 个 
最 重要 的 参考 资料 出 目 原始 CERT Advisory: 
http:/www.cert.org/advisories/CA-2000-02.html ° 


13.6.5 ”拒绝 服务 攻击 


这 里 描述 的 同 源 策 略 和 其 他 的 安全 限制 可 以 很 好 地 预防 恶意 代码 毁坏 

数据 或 者 防止 侵犯 隐私 这 种 问题 。 人 然而， 它们 并 不 能 防止 另外 一 种 攻 

击 : 拒绝 服务 攻击 ， 这 种 攻击 手法 非常 又 力 。 如 果 访 问 了 局 用 

JavaScript 功 能 的 一 个 恶意 Web 站 点 ， 这 个 站 点 可 以 使 用 一 个 alert0 对 话 

占用 浏览 器 ， 或 者 用 一 个 无 限 循 环 或 没有 意义 的 计算 来 
CPU“。 


某 些 浏览 絮 可 以 检测 运行 时 间 很 长 的 脚本 ， 并 且 让 用 户 选 择 终止 它 
们 。 但 是 恶意 脚本 可 以 使 用 window.setInterval0 这 样 的 方法 来 占用 
CPU， 并 通过 分 配 很 多 的 内 存 来 攻击 你 的 系统 。Web 浏 唤 器 并 没有 通 
用 的 办 法 来 防止 这 种 笨重 的 攻击 手法 。 实 际 上 ， 由 于 没有 人 会 返回 一 
个 湿 用 这 种 脚本 的 网 站 ， 因 此 这 在 Web 上 不 是 一 个 常见 的 问题 。 


13.7 客户 端 框 洋 


一 些 Web 开 发 者 发 现 基于 客户 端 框 淋 或 类 库 来 创建 它们 的 Web 应 用 非 
常 便捷 。 从 某 种 意义 上 讲 类 库 也 是 框架 ， 它 们 对 Web 浏 览 紫 提供 的 标 
准 和 专用 API 进 行 了 封闭， 同上 提供 更 高 级 别 的 API， 用 以 更 高 效 地 进 
行 客户 并 编程 开发 。 一 旦 使 用 一 个 框架 ， 就 要 用 框架 定义 的 API 来 写 


代码 ， 使 用 框架 的 一 个 明显 的 好 处 是 高 级 的 API 可 以 用 更 简 涪 的 代码 
完成 更 复杂 的 功能 。 此 外 ， 完 善 的 框架 也 会 帮 有 我 们 处 理 上 文 提 到 的 很 
多 兼容 性 、 安 全 性 和 可 访问 性 问题 。 

第 19 章 会 介绍 jQuery，jQuery 是 当前 最 流行 的 框架 之 一 。 如 果 你 决定 
在 你 的 项 目 中 使 用 jQuery， 还 应 该 阅读 第 19 章 的 内 容 ; 理解 底层 API 会 
帮助 你 成 为 更 加 优秀 的 Web 开 发 者 ， 即 使 你 很 少 直接 使 用 它们 。 


除了 jQuery 以 外 ， 还 有 一 些 其 他 的 JavaScript 框 架 一 一 远 超过 在 这 里 列 
出 的 框架 。 其 中 有 些 开 源 框架 非常 有 名 且 广 泛 使 用 : 


Prototype 


Prototype 类 库 (http://prototypejs.org) 和 jQuery 类 似 ， 是 专门 针对 DOM 
和 Ajax 实现 的 一 套 实用 工具 ， 此 外 还 为 语言 核心 扩展 了 很 多 实用 工 
具 ，Scriptaculous (http://script.aculo.us) 类 库 是 基于 Prototype 来 实现 
的 ， 可 以 用 来 做 动画 和 各 种 视觉 特效 。 


Dojo 


Dojo (http://dojotoolkit.org) 是 一 个 大 型 的 框架 ， 它 宣称 自己 “ 深 不 可 
测 ”。 它 包含 一 个 种 类 繁多 的 UI 组 件 集 合 、 包 管理 系统 、 数 据 抽 象 层 


等 。 
于 
YUI 


YUI (http://developer.yahoo.com/yui/) 是 Yahoo! 使 用 的 一 个 著名 框架 ， 
是 Yahoo! 的 工程 师 团队 开发 的 ， 已 经 应 用 在 包 仿 Yahoo! 主 页 在 内 的 诸 
多 项 目 中 。YUI 和 Dojo 一 样 庞 大 ， 是 一 个 无 所 不 包 的 类 库 ， 包 括 语言 
工具 、DOM 工 具 ，UI 组 件 等 。 目 前 已 经 有 两 个 不 兼容 版 本 的 YUI 存 
在 ， 分别 为 YUI2 和 YUI3。 


Closure 


Closure 类 库 (http://code.google.com/closure/library/) 是 Google 应 用 于 
Gmail、Google Docs 和 其 他 Web 应 用 的 客户 端 类 库 。 这 个 类 库 是 打算 
和 Closure 编 译 器 (http://code.google.com/closure/compiler/) 配合 使 用 
的 ， 剔 除 没有 用 的 类 库 函 数 。 因 为 没有 用 的 代码 会 在 部 署 之 前 被 移 


除 ，Closure 类 库 的 设计 者 不 需要 保持 特性 集合 的 紧 浴 ， 所 以 Closure 包 
含 一 个 庞大 的 实用 工具 集 。 


GWT 


GWT， 即 Google Web Toolkit (http://code.google.com/webtoolkit/) ， 是 
一 个 完全 不 同类 型 的 客户 问 框 架 。 它 用 JAVA 定 义 了 人 Web 应 用 接口 ， 并 
提供 编译 器， 将 JAVA 程序 翻译 成 兼容 的 客户 端 JavaScript。GWT 在 一 
些 Google 产 品 中 使 用 ， 但 是 不 如 它们 目 己 的 Closure 类 库 使 用 得 那么 广 
了 这” 


[利用 HTML 表 单 提交 的 方式 和 服务 器 端 CGI 脚本 进行 通信 的 交互 式 
Web 页 面 ， 是 原始 的 “Web 应 用 ”， 可 以 不 用 JavaScript 来 实现 。 但 是 ， 
我 们 不 会 在 本 书 中 讨论 这 种 Web 应 用 类 型 。 


[2] .Unobtrusive JavaScript 是 一 种 将 JavaScript 从 HIML 结 构 中 抽 离 的 设 
计 概 念 ， 避 免 在 HIML 标 签 中 夹杂 一 堆 onchange、onclick 等 属性 去 挂 
载 JavaScript 事 件 ， 让 HTMEL 与 Javascript 分 离 ， 依 MVC 的 原则 将 功能 权 
责 区 分 清楚 ， 使 HTML 也 变 得 结构 化 容易 阅读 。 


[3]. 有 了 时 我 们 会 看 到 诸如 这 种 代码 : 


< script src="core.js" > 
config={...}; 
< /script> 


看 起 来 这 段 代码 定义 了 一 些 配 置 项 ， 由 core.js 来 读 取 ， 这 是 一 种 
将 页 面 参数 传 入 库 文 件 的 方法 ， 在 JavaScript 库 的 开发 中 非常 常见 ， 其 
中 <script> 和 </script> 之 间 的 代码 是 一 段 纯 文 本 ， 在 core.js 执 行 时 读 
人 浏 顺 大 不 会 目 动 执行 < script> 标签 之 
间 的 代码 。 


[4]. 这 些 类 库 文件 通常 放 在 Google 提 供 的 CDN 上 。 
[5]_Steven Souder 著 名 的 ControlJS 框 染 束 是 利用 了 script 元 素 的 这 一 特性 


来 控制 JavaScript 代码 的 执行 ， 更 多 信息 请 阅读 : 
http://stevesouders.com/controljs/ ° 


[6]. 作 者 在 这 里 的 表述 很 模糊 ， 所 谓 “ 不 会 出 现在 浏览 右 中 ?是 指 文档 的 
文本 内 容 已 经 载 入 ， 但 是 并 未 被 浏览 万 引擎 解析 为 DOM 树 ， 而 DOM 
树 的 生成 是 受 JavaScript 代 码 执行 的 影响 的 ，JavaScript 代 码 会 “阻塞 ”页 
面 UI 的 渲染 。 


[7]. 某 些 浏 览 如 能 够 防范 拒绝 服务 攻击 和 侦 然 的 无 限 循 环 ， 如 来 脚本 或 
事件 处 理 程序 运行 时 间 太 长 ， 它 会 提示 用 户 。 这 束 给 用 户 一 个 选择 中 
止 运行 脚本 的 机 会 。 

[8] 值 得 微软 称赞 的 是 ，IE9 现 在 同时 支持 <canvas> 元素 和 
addEventListener() 方 法 。 


[9] .根据 2011 年 第 四 季度 的 统计 ，Yahool 已 经 不 再 将 浏览 器 划分 为 A 级 
和 C 级 ， 而 是 统一 给 出 一 个 测试 基准 ， 根 据 这 次 更 新 ， 可 以 明显 感觉 
到 测试 基准 向 移动 终端 倾斜 。 


[10] 作者 在 这 里 的 提示 非 党 重要， 我 们 不 能 基于 浏 蜗 咽 写 出 一 个 “服务 
郁 ”， 网 络 中 的 浏览 右 和 浏览 亏 之 间 无 法 直接 进行 通信 。 


[严格 讲 这 些 服务 器 来 自 于 不 同 的 域 、 端 口 或 协议 ， 更 详细 内 容 请 
参 忠 13.6.2° 


第 14 章 “Window 对 象 


第 13 草 介绍 了 Window 对 象 及 其 在 客户 端 JavaScript 中 所 扮演 的 核心 角 
色 : 它 是 客户 端 JavaScript 程 序 的 全 局 对 象 。 本 章 介 绍 Window 对 象 的 属 
性 和 方法 ， 这 些 属性 定义 了 许多 不 同 的 API， 但 是 只 有 一 部 分 实际 上 和 
浏览 絮 窗 口 相关 。Window 对 象 是 以 窗口 命名 的 。 本 章 介 绍 以 下 方面 : 


“14.1 广 展示 如 何 使 用 setTimeout() 和 setInterval() 来 注册 一 个 函数 ， 并 在 
指定 的 时 间 后 调用 它 。 


location 属 性 来 获取 当前 显示 文档 的 URL 和 载 入 新 


14.3 太 介绍 history 属 性 ， 并 展示 如 何在 历史 记 杂 中 同 前 和 问 后 移动 。 


-14.4 节 展示 如 何 使 用 navigator 属 性 来 获取 浏览 器 厂商 和 版 本 信息 ， 以 及 
如 何 使 用 screen 属 性 来 查询 和 窒 口 尺寸 。 


14.5 广 展示 如 何 用 alert()、promptO 和 confirm() 方 法 来 显示 人 简单 的 文本 对 
话 框 ， 以 及 如 何 用 showModalDialog0 显 示 HTML 对 话 框 。 


“14.6 广 讲解 如 何 注册 onerror 处 理 方法 ， 这 个 方法 在 未 捕获 的 JavaScript 
异常 发 生 时 调用 。 
:14.7 节 讲解 HTML 元 素 的 ID 和 name 作 为 Window 对 象 的 属性 来 使 用 。 


14.8 玫 是 一 个 很 长 的 厂 ， 讲 解 如 何 打开 和 关闭 浏 贤 亏 窗口 ， 以 及 如 何 
编写 可 以 在 多 个 窗口 磐 套 窗 体 中 工作 的 JavaScript 代 码 。 


14T 计 阿 名 


setTimeout() 和 setInterval() 可 以 用 来 注册 在 指定 的 时 间 之 后 单 次 或 重复 

调用 的 范 数 。 因 为 它们 都 是 客户 端 JavaScript 中 重要 的 全 局 钞 数 ， 所 以 

0 但 作为 通用 函数 ， 其 实 不 会 对 窗口 做 什么 
情 。 


Window 对 象 的 setTimeout() 方 法 用 来 实现 一 个 函数 在 指定 的 毫秒 数 之 后 
运行 。setTimeout() 返 回 一 个 值 ， 这 个 值 可 以 传递 给 clearTimeout() 用 于 


取消 这 个 函数 的 执行 。 


setInterval0 和 setTimeoutO 一 样 ， 只 不 过 这 个 函数 会 在 指定 毫秒 数 的 间 
隔 里 重复 调用 : 


setInterval(updateclock,60000);// 每 60 秒 调用 一 次 updateClock() 


和 setTimeout() 一 样 ，setInterval0 也 返回 一 个 值 ， 这 个 值 可 以 传递 给 
clearInterval()， 用 于 取消 后 续 函 数 的 调用 。 


例 14-1 定 义 的 应 用 函数 会 在 等 竺 指定 的 时 间 之 后 ， 开 始 重复 调用 某 个 画 
数 ， 然 后 又 过 了 一 段 时 间 之 后 取消 函数 调用 。 该 例子 演示 了 
setTimeout()、setInterval() 和 clearInterval() 的 用 法 。 


例 14-1: 定时 器 应 用 函数 


/* 


* 安 排 画 数 f( ) 在 未 来 的 调用 模式 


* 在 等 待 了 若干 毫秒 之 后 调用 f( ) 


* 如 果 设 置 了 interval 并 没有 设置 end 参 数 ， 则 对 f( ) 调 用 将 不 会 停止 


* 如 果 没 有 设置 nterval 和 end， 只 在 若干 毫秒 后 调用 f( ) 一 次 


2 
~ 
pp 
ot 
I 


E 了 f( )， 才 会 从 start=0 的 时 刻 开始 


* 注 意 ， 调 用 invoke( ) 不 会 阻塞 ， 它 会 立即 返 区 


function invoke(f,start,interval,end)t 


if(!start)start=0;// 默 认 设置 为 0 毫秒 


if(arguments.length<=2)// 单 次 调用 模式 


setTimeout(f, start );// 若 干 毫秒 后 的 单 次 调用 模式 


else{f// 多 次 调用 模式 


setTimeout(repeat,start);// 在 若干 毫秒 后 调用 repeat() 


function repeat(){// 在 上 一 行 所 示 的 setTimeout ( ) 中 调用 


var h=setInterval(f, interval) ;// 循 环 调用 f() 


// 在 end 毫 秒 后 停止 调用 ， 前 提 是 end 已 经 定义 了 


if(end)setTimeout(function(){clearIinterval(h);},end); 
} 
} 


} 


由 于 历史 原因 ，setTimeout() 和 setInterval() 的 第 一 个 参数 可 以 作为 字符 
串 传 入 。 如 果 这 么 做 ， 那 这 个 字符 串 会 在 指定 的 超时 时 间或 间 阳 之 后 
进行 求 值 “相当 于 执行 eval0) 。 除 前 两 个 参数 之 外 ，HTML5 规 范 〈 除 
IE 之 外 的 所 有 浏览 器 ) 还 介 许 setTimeout() 和 setInterval0 传 入 额外 的 参 
数 ， 并 在 调用 函数 时 把 这 些 参数 传递 过 去 。 然 而， 如 果 需 要 支持 下 的 
话 ， 束 不 要 应 用 此 特性 了 。 


如 果 以 0 毫秒 的 超时 时 间 来 调用 setTimeout0 ， 那 么 指定 的 函数 不 会 立刻 
执行 。 相 反 ， 会 把 它 放 到 队列 中 ， 等 到 前 面 处 于 等 待 状态 的 事件 处 理 
程序 全 部 执行 完成 后 ， 再 “立即 ?调用 它 由。 

14.2 浏览 硕 定 位 和 导航 


Window 对 和 象 的 location 属 性 引用 的 是 Location 对 象 ， 它 表示 该 窗口 中 当 
前 显示 的 文档 的 URL， 并 定义 了 方法 来 使 窗口 载 入 新 的 文档 。 


Document 对 象 的 location 属 性 也 引用 到 Location 对 象 : 


window,1Location===document .Location// 总 是 返回 true 


Document 对 象 也 有 一 个 UREL 必 性， 是 文档 首次 载 入 后 保存 该 文档 的 
URL 的 静态 字符 串 。 如 果 定 位 到 文档 中 的 片段 标识 符 (如 #table-of- 
contents) ，Location 对 象 会 做 相应 的 更 新 ， 而 document.URE 属 性 却 不 


会 改变 。 
14.2.1 解析 URL 


Window 对 和 象 的 location 属 性 引用 的 是 Location 对 象 ， 它 表示 该 窗口 中 当 
前 显示 的 文档 的 URL。Location 对 象 的 href 属 性 是 一 个 字符 串 ， 后 者 包 
含 UREL 的 完整 文本 。Location 对 象 的 toString() 方 法 返回 href 属 性 的 值 ， 
此 在 会 隐 式 调用 toString0 的 情况 下 ， 可 以 使 用 location 人 代替 


]ocation.href 。 


这 个 对 象 的 其 他 属性 一 一 protocol，host，hostname，port，pathname 和 
Search， 分 别 表 示 URL 的 各 个 部 分 。 它 们 称 为 “URL 分 解 ” 属 性 ， 同 时 被 
Link 对 象 通过 HTML 文 档 中 的 <a>> 和 <area> 元 素 创 建 ) 支持 。 参 阅 
本 书 第 四 部 分 的 Location 和 Link 项 获取 详细 信息 。 


Location 对 和 象 的 hash 和 search 属 性 比较 有 趣 。 如 果 有 的 话 ，hash 属 性 返回 
URL 中 的 “片段 标识 符 ” 部 分 。search 属 性 也 类 似 ， 它 返回 的 是 问号 之 后 
的 URL， 这 部 分 通常 是 某 种 类 型 的 查询 字符 串 。 一 般 来 说 ， 这 部 分 内 
容 是 用 来 参数 化 URL 并 在 其 中 骸 入 参数 的 。 虽 然 这 些 参 数 通 常用 于 运 
行 在 服务 器 上 的 脚本 ， 但 在 启用 JavaScript 的 页 面 中 当然 也 可 以 使 用 它 
们 。 例 14-2 展 示 了 一 个 通用 函数 urlArgs() 的 定义 ， 可 以 用 这 个 函数 将 参 
数 从 URL 的 search 属 性 中 提取 出 来 。 该 例子 用 到 了 
decodeURIComponentOD， 后 者 是 在 客户 端 JavaScript 定 义 的 全 局 函数 。 
(参见 本 书 第 三 部 分 中 的 Global 获取 详细 内 容 。) 


例 14-2: 提取 URL 的 搜索 子 符 串 中 的 参数 


* 这 个 函数 


解析 来 


URL 的 查询 


串 中 的 name=value 参 数 对 


* 它 将 name=value 对 存储 在 一 个 对 


2 
ay 
是 
和 
| 

pe! 


返回 该 对 象 


* 这 样 来 使 


全 


*var args=urlArgs();// 从 URL 中 解析 参数 


*var q=args.q||"";// 如 王 


参数 定义 了 的 话 就 使 


参数 ;否则 使 用 一 个 默认 值 
*var n=args.n?parseInt(args.n):10; 
*/ 
function urlArgs(){ 
var args={};// 定 义 一 个 空 对 象 
var query=location.search.substring(1);// 查 找到 查询 串 ， 并 去 掉 '?' 


var pairs=query.split("&&");// 根 4 


四 "& "符号 将 查询 字符 串 分 隔 


for(var i=0;i<pairs.length;i++){// 对 ] 


每 个 片段 


var pos=pairs[i].index0f('=');// 查 找 "'name=value" 


if(pos==-1)continue;// 如 果 没 有 找到 的 话 ， 就 跳 过 


var name=pairs[i].substring(0,pos);// 提 取 name 


var value=pairs[i].substring(pos+1);// 提 取 value 


value=decodeURIComponent (value);// 对 value 进 行 解码 


args[name]=value;// 存 储 为 


Es 


属性 


a 


return args;// 返 回 解析 后 的 参数 


} 


14.2.2 载 入 新 的 文档 


Location 对 象 的 assign() 方 法 可 以 使 窗口 载 入 并 显示 你 指定 的 URL 中 的 文 

档 。replace() 方 法 也 类 似 ， 但 它 在 载 入 新 文档 之 前 会 从 浏 宽 历史 中 把 当 
前 文档 删除 。 如 果 脚 本 无 条 件 地 载 入 一 个 新 文档 ，replace() 方 法 可 能 是 

比 assgin() 方 法 更 好 的 选择 。 否 则 , “后退” 按钮 会 把 浏览 器 弟 回 到 原始 

文档 ， 而 相同 的 脚本 则 会 再 次 载 入 新 文档 。 如 宁 检 测 到 用 户 的 浏览 器 

不 文 持 某 些 特性 来 显示 功能 齐全 的 版 本 ， 可 以 用 location.replace() 来 载 

入 静态 的 HTML 版 本 。 


// 如 果 浏 览 器 不 支持 XMLHttpRequest 对 象 


// 则 将 其 重 定向 到 一 个 不 需要 Aj ax 的 静态 页 画 


If(!XMLHttpRequest )Location,.replace("Sstaticpage.htm1”")， 


注意 ， 在 这 个 例子 中 传 入 replace0 的 是 一 个 相对 URL。 相 对 UREL 是 相对 
于 当前 页 面 所 在 的 目 孙 来 解析 的 ， 丈 像 将 它们 用 于 一 个 超 链 接 中 。 


除了 assgin() 和 replace0 方 法 ，Location 对 象 还 定义 了 reload0 方 法 ， 后 者 
可 以 让 浏览 器 重新 载 入 当前 文档 。 


使 浏览 絮 跳 转 到 新 页 面 的 一 种 更 传统 的 方法 是 直接 把 新 的 URL 赋 给 
location 属 性 : 


location="http://www.oreilly .com";// 在 此 网 站 购买 书 ! 


还 可 以 把 相对 UREL 赋 给 location， 它 们 会 相对 当前 UREL 进 行 解析 : 


location="page2.html";// 载 入 下 一 个 页 面 


纯粹 的 斤 段 标识 符 是 相对 URL 的 一 种 类 型 ， 它 不 会 让 浏览 秦 载 入 新 文 
档 ， 但 只 会 使 它 深 动 到 文档 的 某 个 位 置 。#top 标 识 符 是 个 特殊 的 例子 : 
如 果 文 档 中 没有 元 素 的 ID 是 "top"， 它 会 让 浏览 器 跳 到 文档 开始 处 。 


location="#top";// 跳 转 到 文档 的 顶部 


Location 对 象 的 URL 分 解 属性 是 可 写 的 ， 对 它们 重新 赋值 会 改变 URL 的 
位 置 ， 并 且 导 致 浏览 器 载 入 一 个 新 的 文档 (如 果 改 变 的 是 hash 属 性 ， 则 
在 当前 文档 中 进行 跳 转 ) : 


location.search="?page="+(pagenum+1);// 载 入 下 一 个 页 面 


14.3 浏览 历史 


Window 对 象 的 history 属 性 引用 的 是 该 窗口 的 History 对 象 。History 对 象 
是 用 来 把 窗口 的 浏 贤 历 史 用 文档 和 文档 状态 列表 的 形式 表示 。History 
对 象 的 length 属 性 表示 浏 哎 历 史 列 表 中 的 元 素数 量 ， 但 出 于 安全 的 因 
素 ， 脚 本 不 能 访问 已 保存 的 URL。 (如 有 果 人 允许， 则 任意 脚本 都 可 以 舌 
探 你 的 浏览 历史 。) 


History 对 象 的 back0 和 forward(0) 方 法 与 浏览 器 的 “后 退 ” 和 “前 进 ” 按 钮 一 
样 : 它们 使 浏览 需 在 浏览 历史 中 前 后 路 转 一 格 。 第 三 个 方法 一 一 go0) 接 
受 一 个 整数 参数 ， 可 以 在 历史 列表 中 向 前 〈 正 参数 ) 或 向 后 〈 负 参 
数 ) 跳 过 任意 多 个 页 。 


history.go(-2);// 后 退 两 个 历史 记录 ， 相 当 于 单 击 “ 后 退 “ 按 钮 两 次 


如 果 窗 口 包 含 多 个 子 窗口 (比如 <iframe > 元 素 一 一 见 14.8.2 节 )， 子 窗口 
的 浏览 历史 会 按时 间 顺 序 穿 插 在 主 窗口 的 历史 中 。 这 意味 着 在 主 窗口 


调用 history.back() (举例 ) 可 能 会 导致 其 中 一 个 子 窗口 往 回 跳 转 到 前 一 
个 显示 的 文档 ， 但 主 窗口 保留 当前 状态 不 变 。 


现代 Web 应 用 可 以 不 通过 载 入 新 文档 而 动态 地 改变 自身 内 容 ( 见 第 15 章 
和 第 18 章 ) 。 这 么 做 可 能 希望 用 户 能 用 “后 退 " 和 “前 进 ” 按 钮 在 这 些 动 态 
创建 的 应 用 状态 之 间 进 行 跳 转 。HTML5 将 这 种 技术 标准 化 ， 请 参照 
22.2 节 。 


HTML5 之 前 的 历史 管理 是 个 更 复杂 的 难题 。 应 用 程序 必须 要 在 窗口 浏 
唤 历 史 中 创 建 一 个 新 的 条 目 来 管理 自身 的 历史 记录 ， 用 历史 条 目 关 联 
目 身 的 状态 信息 ， 判 断 什 么 时 候 用 户 使 用 了 “后退” 按钮 来 移动 到 不 同 
的 历史 条 目 ， 联 合 那 个 条 目 获取 状态 信息 ， 并 且 重 新 创建 应 用 程序 之 
前 的 状态 。 一 种 方式 是 用 隐藏 的 <iframe> 来 保存 状态 信息 并 在 浏览 器 
的 历史 中 创建 条 目 。 为 了 创建 新 的 历史 条 目 ， 需 要 用 Document 对 象 的 
open() 和 write() 方 法 ( 见 15.10.2 市 ) 动态 地 把 一 个 新 文档 写 入 这 个 隐藏 
的 窗 体 。 不 管 怎样 ， 文 档 内 容 应 该 包含 重新 创建 应 用 状态 所 需要 的 状 
态 信 息 。 当 用 户 单 击 “ 后 退 ” 按 钮 ， 隐 泸 的 窗 体 的 内 容 会 改变 。 在 
HTML5 之 前 ， 没 有 生成 事件 来 通知 你 这 个 改变 ， 因 此 ， 为 了 检测 用 户 
是 否 单 击 了 “后 退 ” 按 钮 ， 可 能 要 用 setInterval() ( 见 14.1 节 ) 每 秒 对 隐藏 
的 窗 体 检测 两 到 三 次 ， 来 看 它 是 否 改 变 了 。 


在 实际 工作 中 ， 在 那些 需要 以 前 的 HTML5 历 史 管 理 的 项 目 中 ， 开 发 者 
通常 会 使 用 一 些 现成 的 解决 方案 。 很 多 JavaScript 框 架 都 实现 了 这 种 功 
能 。 比 如 ，jQuery 有 history 插 件 ， 另 外 也 有 些 单独 的 管理 历史 记录 的 类 
库 。RSH (Really Simple History) 是 其 中 一 个 比较 流行 的 示例 ， 可 以 
在 这 里 找到 ，http://code.google.com/p/reallysimplehistory/。22.2 广 解释 
如 何 用 HTML5 进 行 历史 管理 。 


14.4 ”浏览 器 和 屏幕 信息 

脚本 有 时候 需要 获取 和 它们 所 在 的 Web 浏 览 器 或 浏览 器 所 在 的 桌面 相关 
的 信息 。 本 节 介 绍 Window 对 和 象 的 navigator 和 screen 属 性 。 它 们 分 别 引 用 
的 是 Navigator 和 Screen 对 象 ， 而 这 些 对 象 提供 的 信息 允许 脚本 来 根据 环 
境 定制 自己 的 行为 。 


14.4.1 。 Navigator 对象 


Window 对 和 象 的 navigator 属 性 引用 的 是 包含 浏览 器 厂商 和 版 本 信息 的 
Navigator 对 象 。Navigator 对 象 的 命名 是 为 了 纪念 Netscape 之 后 Navigator 
浏览 器 [2， 不 过 所 有 其 他 的 浏览 器 也 支持 它 (IE 还 支持 
clientInformation 属 性 ， 它 作为 navigator 的 厂商 中 立 同义词 。 遗 憾 的 是 ， 
其 他 浏览 器 并 不 文 持 这 一 更 直观 的 属性 命名 ) 


过 去 ，Navigator 对 象 通常 被 脚本 用 来 确定 它们 是 在 正中 还 是 在 Netscape 
中 运行 。 这 种 浏览 器 嗅 探 方法 有 问题 ， 因 为 它 要求 随 着 新 浏览 器 和 现 
有 浏览 器 的 新 版 本 的 引入 而 不 断 地 调整 。 如 今 ， 有 一 种 更 好 的 功能 测 
试 方法 (参见 13.4.3 节 ) ， 只 需要 测试 所 需要 的 功能 ( 即 ， 方 法 或 属 
性 ) ， 而 不 是 假设 特定 的 浏览 器 版 本 及 其 功能 。 


然而 ， 浏 览 器 串 探 有 时 候 仍然 有 价值 。 这 样 的 一 种 情况 是 ， 当 需要 解 
决 存 在 于 某 个 特定 的 浏览 希 的 特定 版 本 中 的 特殊 的 bug 时 。Navigator 对 
象 有 4 个 属性 用 于 提供 关于 运行 中 的 浏览 万 的 版 本 信息 ， 并 且 可 以 使 用 
这 些 属性 进行 浏览 絮 咒 探 。 


appName 


Web 浏 宽 器 的 全 称 。 在 于 中， 这 就 是 "Microsoft Internet Explorer"。 在 
Firefox 中 ， 该 属性 束 是 "Netscape"。 为 了 兼容 现存 的 浏 贤 如 咒 探 代码 ， 
其 他 浏 斋 怖 通常 也 取 值 为 "Netscape"。 


app Version 

此 属性 通常 以 数字 开始 ， 并 跟着 包含 浏览 器 厂商 和 版 本 信息 的 详细 字 
符 串 。 字 符 串 前 面 的 数字 通常 是 4.0 或 5.0， 表 示 它 是 第 4 或 第 5 代 兼 容 的 
浏览 厦 。appVersion 字 符 串 没有 标准 的 格式 ， 所 以 ， 没 有 办 法 直接 用 它 
来 判断 浏 咒 癸 的 类 型 。 


userAgent 


浏览 器 在 它 的 USER-AGENTHTTP 头 部 中 发 送 的 字符 串 。 这 个 属性 通常 
包含 appVersion 中 的 所 有 信息 ， 并 且 负 名 也 可 能 包含 其 他 的 细节 。 和 
appVersion 一 样 ， 它 也 没有 标准 的 格式 。 由 于 这 个 属性 包含 绝 大 部 分 信 
已 ， 因 此 浏 抠 右 噢 探 代码 通常 用 它 来 嗅 探 。 


platform 


在 其 上 运行 浏览 器 的 操作 系统 〈 并 且 可 能 是 硬件 ) 的 字符 串 。 


Navigator 属 性 的 复杂 性 正 说 明了 浏 质 器 嗅 探 对 于 处 理 客户 端 兼 容 性 问 
题 是 没有 太 大 帮助 的 。 在 Web 的 早期 ， 人 们 写 了 大 量 的 浏览 絮 特 定 代码 
用 于 测试 类 似 于 navigator.appName 的 属性 。 在 开发 新 浏览 器 的 时 候 ， 浏 
唤 器 厂商 发 现 为 了 让 现 有 网 站 显示 正确 ， 它 们 需要 把 appName 设 置 

为 "Netscape"。 类 似 的 做 法 使 得 appVersion 的 起 始 数 字 失 去 了 意义 ， 而 
现在 的 浏览 絮 唱 探 代 码 必 须要 依赖 于 比 之 前 复杂 很 多 的 
navigator.userAgent 字 符 串 。 例 14-3 展 示 了 如 何 用 正则 表达 式 (摘自 
jQuery) 从 navigator.userAgent 中 抽取 浏览 器 名 称 和 版 本 号 的 方法 。 


Cua 


例 14-3: 使 用 navigator.userAgent 来 进行 浏 贤 絮 虽 探 


// 为 客户 端 嗅 探 定义 browser .name 和 browser .version， 这 里 使 用 了 jQuery 1.4.1 中 的 代码 


//name 和 number 都 是 字符 串 ， 对 于 不 同 的 浏览 器 输出 的 结果 也 是 不 一 样 的 ， 检 测 结果 如 下 : 


// 


//"webkit":Safari 或 Chrome; 版 本 号 是 Webkit 的 版 本 号 


//"opera":0pera; 版 本 号 就 是 软件 的 版 本 号 


//"mozilla" :Firefox 或 者 其 他 基于 gecko 内 核 的 浏览 器 ;版 本 号 是 Gecko 的 版 本 


//"msie" :IE; 版 本 号 就 是 软件 的 版 本 


// 


// 比 如 Firefox 3.6 返 回 : {name:"mozilla",version:"1.9.2"} 


Var browser=(function(){ 


Var s=navigator.userAgent.toLowerCase(); 


Var match=/(webkit)[\/]([\w.]+)/.exec(s)|| 


/(opera)(?:.*version)?[\/]([\w.]+)/.exec(s)|| 


/(msie)([\w.]+)/.exec(s)|| 
!/compatible/.test(s)&&/(mozilla)(?:.*?rv:([\w.]+))?/.exec(s)|| 

[]; 

return{name:match[1]||"",version:match[2]||"e"}; 

}()); 

除了 神 吕 器 厂商 和 版 本 信息 的 属性 之 外 ，Navigator 对 象 还 包含 一 些 太 
项 的 属性 和 方法 。 以 下 是 一 些 标准 化 的 属性 以 及 广泛 应 用 但 未 标准 化 
的 属性 : 

onLine 


navigator.onLine 属 性 (如 果 存 在 的 话 ) 表示 浏览 器 当前 是 否 连 接 到 网 
0 (用 第 20 章 的 


geolocation 


Geolocation 对 和 象 定义 用 于 确定 用 户 地 理 位 置信 息 的 接口 。 参 见 22.1 廊 的 
更 多 细节 。 


javaEnabled() 
一 个 非 标准 的 方法 ， 当 浏览 右 可 以 运行 Java 小 程序 时 返回 true。 
cookieEnable() 


非 标 准 的 方法 ， 如 果 浏 顺 右 可 以 保存 永久 的 cookie 时 ， 返 回 true。 当 
cookie 配 置 为 “ 视 具体 情况 而 定 * 时 可 能 会 返回 不 正确 的 值 。 


14.4.2” Screen 对象 


Window 对 和 象 的 screen 属 性 引用 的 是 Screen 对 象 。 它 提供 有 关 窗 口 显 示 的 
大 小 和 可 用 的 颜色 数量 的 信息 。 属 性 width 和 和 height 指 定 的 是 以 像素 为 单 


位 的 窗口 大 小 。 属 性 availWidth 和 availHeight 指 定 的 是 实际 可 用 的 显示 
大 小 ,， 写 们 排除 了 像 蝎 面 任务 栏 这 样 的 特性 所 占用 的 空间 。 属 性 
colorDepth 指 定 的 是 显示 的 BPP (bits-per-pixel) 值 ， 典 型 的 值 有 16、24 
和 32。 


window.screen 属 性 和 它 引 用 的 Screen 对 象 都 是 非 标 准 但 广泛 实现 的 。 可 
以 用 Screen 对 象 来 确定 Web 应 用 是 否 运行 在 一 个 小 屏幕 的 设备 上 ， 比 如 
上 网 本 。 如 果 屏 幕 空 间 有 限 ， 可 能 要 选择 用 更 小 的 字体 和 图 片 等 。 


14.5 “对 话 框 


Window 对 象 提 供 了 3 个 方法 来 向 用 户 显 示人 简单 的 对 话 框 。alertO 回 用户 
显示 一 条 消息 并 等 每 用 户 天 闭 对 话 框 。confirm() 也 显示 一 条 消 轧 ， 要 求 
用 户 单 击 * 确 定 ? 或 "取消 ? 按 钮 ， 并 返回 一 个 布尔 值 。promptO 同 样 也 显 
示 一 条 消息 ， 等 待 用 户 输入 字符 串 ， 并 返回 那个 字符 串 。 下 面 的 代码 
全 用 了 这 3 种 方法 : 


dof{ 


var name=prompt("What is your name?");// 得 到 一 个 字符 串 输 入 


var correct=confirm("You entered'"+name+"'.\n"+// 得 到 一 个 布尔 值 


"Click Okay to proceed or Cancel to re-enter."); 


}while( !correct) 


alert("Hello, "+name);// 输 出 一 个 纯 文本 消息 


尽管 alert()、confirm() 和 prompt0) 方 法 都 很 容易 使 用 ， 但 是 恨 好 的 设计 还 
是 需要 有 市 制 地 使 用 它们 ， 要 尽量 做 到 这 一 点 。 像 这 样 的 对 话 框 并 非 
Web 的 常见 功能 ， 大 多 数 用 户 会 发 现 这 些 对话 框 会 破坏 它们 的 浏览 体 
验 。 如 今 ， 对 这 些 方法 唯一 常见 的 应 用 就 是 调试 JavaScript 程 序 员 常 
芝 在 代码 中 搬入 一 个 alert0 方 法 ， 用 来 查看 某 个 变量 的 输出 结果 是 什 
人 O 


注意 ， 这 些 对 话 框 中 显示 的 文本 是 纯 文 本 ， 而 不 是 HTML 格 式 的 文本 。 
只 能 使 用 空 格 、 换 行 符 和 各 种 标点 符号 来 格式 化 这 些 对 话 框 。 


方法 confirmn(0 和 promptO 都 会 产生 阻塞 ， 也 束 是 说 ， 在 用 户 关 抒 它 们 所 
它们 不 会 返回 。 这 就 意味 着 在 弹出 一 个 对 话 框 
代码 就 会 停止 运行 。 如 果 当 前 正在 载 入 文档 ， 也 会 停止 载 入 ， 直 
到 用 户 用 要 求 的 输入 进行 响应 为 止 。 在 入 多 数 的 浏览 句 里 ，alert() 方 法 
0 并 等 待 用 户 关闭 对 话 框 ， 但 并 不 总 是 这 样 。 完 整 细节 
参考 第 四 部 了 i alert() ~、 Window. ee ee prompt() 


方法 S 


除了 Window 的 alert0、confirm0 和 prompt0 方 法 ， 还 有 个 更 复杂 的 方法 

showModalDialog()， 显 示 一 个 包含 HTML 格 式 的 “ 模 态 对 话 框 ”| 小 ， 可 

以 给 它 传 入 参数 ， 以 及 从 对 话 框 里 返回 值 。showModalDialog() 在 浏 宽 
铬 当前 窗口 中 显示 一 个 模 态 窗口 。 第 一 个 参数 用 以 指定 提供 对 话 框 

HTML 内 容 的 URL。 第 二 个 参数 是 一 个 任意 值 (数组 和 对 象 均 可 ) ， 这 

Ce 对 话 框 里 的 脚本 中 可 以 通过 window.dialogArguments 属 性 的 值 访 

问 。 第 三 个 参数 是 一 个 非 标准 的 列表 ， 包 含 以 分 号 隔 开 的 name=value 

对 ， 如 果 提 供 了 这 个 参数 ， 可 以 配置 对 话 框 的 尺寸 或 其 他 属性 。 

用 "dialogwidth" 和 "dialogheight" 来 设置 对 话 框 窗口 的 大 小 ， 

用 "resizable=yes" 来 允许 用 户 改 变 窗口 大 小 。 


用 这 个 方法 显示 的 窗口 是 “ 模 态 的 "，showModalDialog0 这 个 方法 直到 
窗口 关闭 之 前 不 会 返回 。 当 窗口 关闭 后 ，window.returnValue 属 性 的 值 
束 古 此 方法 返回 的 值 。 对 话 框 的 HTML 内 容 往 往 必 须 包 含 用 来 设置 
ee “确认 ”按钮 ， 如 果 需 要 则 调用 window.close() (参见 14.8.1 
了 


例 14-4 是 一 个 适合 用 于 showModalDialog0 的 HTML 文 件 。 代 码 顶 部 的 注 
释 包 含 调用 showModalDialog() 的 样 例 ， 而 图 14-1 显 示 了 通过 示例 代码 
创建 的 对 话 框 。 注 意 对 话 框 里 显示 的 大 量 文本 都 来 自 
showModalDialog() 的 第 二 个 参数 ， 而 不 是 写 死 在 HTML 里 。 
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图 14-1 


使 用 showModalDialog() 方 法 显示 出 的 对 话 框 


例 14-1: 使 用 showModalDialog0 的 HTML 文件 


这 个 HTML 文 件 并 不 是 独立 的 ， 


这 个 文件 由 showModalDialog( ) 所 调用 


它 希 望 window.dialogArguments 是 一 个 由 字符 串 组 成 的 数组 


数组 的 第 一 个 元 素 将 放置 在 对 i 


舌 框 的 项 间 


剩 下 的 每 个 元 素 是 每 行 的 输入 框 的 标识 


当 单 击 0key 按 钮 的 时 候 ， 返 回 


使 用 诸如 这 样 的 代码 来 调用 : 


Var p=showModalDialog( 


一 个 数组 ， 这 个 数组 是 由 每 个 输入 框 的 值 组 成 


"multiprompt.html", 


["Enter 3D point coordinates", "x","y","z"], 


"dialogwidth:400;dialogheight:300;resizable:yes"); 


<form> 


<fieldset id="fields"></fieldset><1-- 对 话 框 的 


E 文 部 分 - - > 


<div style="text-align:center"><!-- 关 闭 这 个 对 话 框 的 按钮 - - > 


<button onclick="okay()">0Okay</button> 


< !- -设置 返 


起 


值 和 关闭 事件 - - > 


<button onclick="cancel()">Cancel</button> <!-- 关 闭 时 不 带 任 何 返 回 值 - - > 


</div> 


<script>// 创 建 对 话 框 的 主体 部 分 ， 并 在 fieldset 中 显示 出 


var args=dialogArguments ; 


Var text="<Jlegend> "+args[9]+"</ Jegend>"， 


for(var i=1;i<args.length;i++) 


text+="<label>"+args[i]+":<input id='f"+i+"'> 


</label> <br>"; 


document .getElementById("fields").innerHTML=text;// 直 接 关 闭 这 个 对 话 术 


function cancel( ) {window.close( );}// 读 取 输 入 框 的 值 ， 然 后 设置 一 个 返 


function okay(){ 


一 个 数组 


window.returnValue=[];// 返 


for(var i=1;i<args.length;i++)// 设 置 输入 框 的 元 素 


EE， 不 设置 返 


值 ， 


window.returnvValue[i-1]=document.getElementById("f"+i).value; 


window.close( );// 关 闭 对话 框 ,使 showModalDialog( ) 返 


回 


后 关闭 


值 


} 
</script> 


</form> 


14.6 ”错误 处 理 


Window 对 象 的 onerror 属 性 是 一 个 事件 处 理 程序 ， 当 未 捕获 的 异常 传播 
到 调用 栈 上 时 就 会 调用 它 ， 并 把 错误 消 明 输出 到 浏览 絮 的 JavaScript 控 
制 台 上 。 如 果 给 这 个 属性 赋 一 个 函数 ， 那 么 只 要 这 个 窗口 中 发 生 了 
JavaScript 错 误 ， 就 会 调用 该 函数 ， 即 它 成 了 窗口 的 错误 处 理 程序 。 


由 于 历史 原因 ，Window 对 象 的 onerror 事 件 处 理 函 数 的 调用 通过 三 个 字 
符 串 参数 ， 而 不 是 通过 通常 传递 的 一 个 事件 对 象 。 (其 他 客户 端 对 象 
的 onerror 处 理 程序 所 需要 的 错误 条 件 是 不 一 样 的 ， 但 是 它们 都 是 正 稼 
的 事件 处 理 程序 ， 回 这 个 函数 只 须 传 入 一 个 事件 对 象 。) 
window.onerror 的 第 一 个 参数 生 朱 述 错误 的 一 条 消 轧 。 第 二 个 参数 是 一 
个 字符 串 ， 它 存放 引发 错误 的 JavaScript 代 码 所 在 的 文档 的 URL。 第 三 
个 参数 是 文档 中 发 生 错误 的 行 数 。 


除了 这 三 个 参数 之 外 ，onerror 处 理 程序 的 返回 值 也 很 重要 。 如 果 onerror 
处 理 程序 返回 false， 它 通知 浏览 器 事件 处 理 程序 已 经 处 理 了 错误 ,不 
需要 其 他 操作 。 换 句 话 说 ， 浏 贤 器 不 应 该 显示 它 上 自己 的 错误 消息 。 站 
憾 的 是 ， 由 于 历史 原因 ，Firefox 里 的 错误 处 理 程序 必须 返回 true 来 表示 
它 已 经 处 理 了 错误 。 


onerror 处 理 程序 是 早期 JavaScript 的 遗物 ， 那 时 语言 核心 不 包含 try/catch 
异常 处 理 语 句 。 现 代 代 码 已 经 很 少 使 用 它 。 但 是 ， 在 开发 阶段 ， 你 可 
J 当 有 错误 发 生 时 ， 来 显 式 地 通知 


// 在 一 个 对 话 框 中 弹出 错误 消息 ， 但 不 超过 三 次 


window.onerror=function(msg,url,1ine)t{ 


if(onerror .num++<onerror .max){ 


alert("ERROR:"+msg+" An"+uUrl+":"+1ine)， 
return true; 

} 

onerror .max=3; 


onerror .num=0; 


14.7 ”作为 Window 对 象 属性 的 文档 元 素 


如 果 在 HTML 文 档 中 用 id 属 性 来 为 元 素 命 名 ， 并 且 如 果 Window 对 象 没 
有 此 名 字 的 属性 ，Window 对 象 会 赋予 一 个 属性 ， 它 的 名 字 是 id 属性 的 
值 ， 而 它们 的 值 指 向 表示 文档 元 素 的 HTMLElement 对 象 。 


我 们 已 经 说 过 ， 在 客户 端 JavaScript 中 ，Window 对 象 是 以 全 局 对 象 的 形 
式 存 在 于 作用 域 链 的 最 上 层 ， 这 了 驶 意味 着 在 HTML 文 档 中 使 用 的 id 属性 
会 成 为 可 以 被 脚本 访问 的 全 局 变量 。 如 采 文 档 包 合 一 个 <button 
id="okay"/> 元 素 ， 可 以 通过 全 局 变量 okay 来 引用 此 元 么 。 


但 是 ， 有 一 个 重要 的 警告 : 如 果 Window 对 象 已 经 具有 此 名 字 的 属性 ， 
这 了 束 不 会 发 后。 比如 ，id 是 "history"、"location" 或 "navigator" 的 元 素 ， 
束 不 会 以 全 局 变量 的 形式 出 现 ， 因 为 这 些 ID 已 经 占用 了 。 同 样 ， 如 果 
HTML 文 档 包 售 一 个 id 为 "x" 的 元 素 ， 并 且 还 在 代码 中 声明 并 赋值 给 全 
局 变量 x， 那 么 显 式 声明 的 变量 会 隐藏 隐 式 的 元 素 变量 。 如 采 脚 本 中 的 
变量 声明 出 现在 命名 元 素 之 前 ， 那 这 个 变量 的 存在 就 会 蛆 止 元 素 获 取 
它 的 window 属 性 。 而 如 有 果 脚 本 中 的 变量 声明 出 现在 命名 元 素 之 后 ， 那 
么 变量 的 显 式 赋值 会 履 善 该 属性 的 隐 式 值 。 


在 15.2 节 中 ， 你 会 学 到 通过 document.getElementById0 方 法 ， 用 HTML 
的 id 属性 来 查找 文档 元 素 。 见 下 面 的 例子 : 


var ui=["input", "prompt", "heading"];// 数 组 中 存放 要 查找 的 元 素 id 


ui.forEach(function(id){// 用 每 个 id 查 找 对 应 的 元 素 


ui[id]=document .getElementById(id);// 将 其 存放 在 一 个 属性 中 


运行 完 这 段 代 码 之 后 ，ui.input、ui.prompt 和 ui.heading 会 引用 文档 元 
素 。 脚 本 可 以 用 全 局 变 : 量 input 和 heading 来 代 闪 ui. input 和 ui.heading。 但 
记得 14.5 和 里 的 Window 对 象 有 个 方法 的 名 字 是 promptO0， 所 以 脚本 中 不 
能 用 全 局 变量 prompt 代 替 ui.prompt。 


元 素 ID 作 为 全 局 变量 的 隐 式 应 用 是 Web 浏 贤 絮 演化 过 程 中 遗留 的 怪 辛 。 

它 主要 是 出 于 与 已 有 Web 页 面 后 向 兼容 性 的 考虑 。 但 这 里 并 不 推荐 使 用 
这 种 做 法 一 一 浏览 器 厂商 可 以 在 任何 时 候 为 Window 对 象 定义 新 属性 ， 

而 这 些 新 属性 都 会 破坏 使 用 了 此 属性 名 的 隐 式 定义 的 代码 。 反 之 ， 用 

document. 上 式 碍 找 元 素 。 如 有 果 给 它 一 个 更 简单 的 名 
字 ， 这 种 用 法 会 变 得 更 加 简便 。 


var$=function(id){return document.getElementById(id);}; 

ui.prompt=$("prompt"); 

很 多 客户 器 类 库 都 定义 了 $ 芳 数 ， 类 似 上 面 一 样 来 通过 ID 查 找 元素 。 
(我 们 会 在 第 19 章 里 看 到 jQuery 的 $ 范 数 作为 通用 的 元 素 选 择 方法 ， 基 
于 ID、 标 签名 、class 属 性 或 其 他 标准 ， 返 回 一 个 或 多 个 元 素 。) 
假设 ID 并 没有 被 Window 对 象 使 用 的 话 ， 那 么 任何 有 id 属性 的 HTML 元 


素 都 会 成 为 全 局 变量 的 值 。 以 下 HTML 元 素 如 果 有 name 属 性 的 话 ， 也 
会 这 样 表现 : 


<a><applet><area> <embed><form><frame><frameset><iframe><img><object> 


id 元 素 在 文档 中 必须 是 唯一 的 : 两 个 元 素 不 能 有 相同 的 id。 但 是 ， 这 对 
name 属 性 无 效 。 如 果 上 面 的 元 素 有 多 于 一 个 有 相同 的 name 属 性 〈 或 者 


一 个 元 素 有 name 属 性 ， 而 另 一 个 元 素 有 相同 值 的 id 属性 ) ， 具 有 该 名 
尔 的 隐 式 全 局 变量 会 引用 一 个 类 数组 对 象 ， 这 个 类 数组 对 象 的 元 素 是 
所 有 命名 的 元 素 。 


有 name 或 id 属 性 的 <iframe>> 元素 是 个 特殊 的 例子 。 为 它们 隐 式 创建 的 
变量 不 会 引用 表示 元 素 自 身 的 Element 对 象 ， 而 是 引用 表示 <iframe > 
元 素 创 建 的 嵌 苔 浏览 絮 窗 体 的 Window 对 腿 。 我 们 会 在 14.8.2 闻 再 次 谈 
论 它 。 


14.8 ”多 窗口 和 窗 体 


一 个 Web 浏 哆 姨 窗口 可 能 在 蜗 面 上 包含 多 个 标签 页 。 每 一 个 标签 页 都 是 
独立 的 “浏览 上 下 文 ”(browsing context) ， 每 一 个 上 下 文 都 有 独立 的 
Window 对 和 象 ， 而 且 相 互 之 间 互 不 干扰 。 每 个 标签 页 中 运行 的 脚本 通常 
并 不 知道 其 他 标签 页 的 存在 ， 更 不 用 说 和 其 他 标签 页 的 Window 对 象 进 
行 交 互 操 作 或 者 操作 其 文档 内 容 了 。 如 有 果 Web 浏 览 絮 不 支持 多 标签 页 ， 
或 者 把 标签 页 关 掉 了 ， 可 能 在 某 一 时 刻 桌 面 上 会 有 很 多 打开 的 Web 浏 览 
器 窗口 。 而 使 用 标签 页 ， 每 个 桌面 窗口 中 的 Window 对 象 都 是 独立 的 ， 
也 就 是 说 彼此 就 是 完全 独立 的 ， 和 其 他 桌面 窗口 没有 任何 联系 。 


但 是 窗口 并 不 总 是 和 其 他 窗口 完全 没关系 。 一 个 窗口 或 标签 页 中 的 脚 
本 可 以 打开 新 的 窗口 或 标签 页 ， 当 一 个 脚本 这 样 做 时 ， 这 样 多 个 窗口 
或 窗口 与 另 一 个 窗口 的 文档 之 间 就 可 以 互 操作 (可 以 参照 13.6.2 市 中 讲 
解 的 同 源 策 略 约束 ) 。14.8.1 市 介绍 关于 窗口 打开 和 关闭 的 更 多 内 容 。 


HTML 文 档 经 常 使 用 <iframe> 来 幅 套 多 个 文档 。 由 <iframe> 所 创建 
的 般 套 浏览 上 下 文 是 用 它 上 自己 的 window 对 象 所 表示 的 。 废 弃 的 < 
frameset> 和 <frame>> 元 素 同 样 创建 了 一 个 父 套 的 浏览 上 下 文 ， 每 一 个 
<frame> 都 由 一 个 独立 的 window 对 象 表示 。 对 于 客户 端 JavaScript 来 
说 ， 窗 口 、 标 位 页 、iframe 和 框架 都 是 浏览 上 下 文 ， 对 于 JavaScript 来 
说 ， 它 们 都 是 window 对 象 。 和 相互 独立 的 标签 页 不 同 ， 藤 套 的 浏览 上 
下 文 之 间 并 不 是 相互 独立 的 。 在 一 个 窗 体 中 运行 的 JavaScript 程 序 总 是 
可 以 看 到 它 的 祖先 和 子孙 窗 体 ， 尽 管 脚 本 查看 这 些 窗 体 中 的 文档 受到 
同 源 策略 的 限制 。14.8.2 厄 会 讲 到 髓 套 的 窗 体 。 


因为 Window 是 客户 病 JavaScript 的 全 局 对 象 ， 每 个 窗口 或 窗 体 都 包含 独 
过 的 JavaScript 执 行 上 下 文 。 不 过 ， 在 一 个 窗口 中 的 JavaScript 人 代码， 如 
果 有 同 源 视 略 的 限制 ， 则 可 以 使 用 另外 一 个 窗口 中 定义 的 对 象 、 属 性 


和 方法 。 与 此 相关 的 细节 会 在 14.8.3 节 中 详细 讨论 。 当 由 于 同 源 策略 的 
限制 导致 窗口 之 间 无 法 直接 交互 时 ，HTML5 提 供 一 个 基于 事件 的 消 忆 
传输 API， 可 以 用 于 间接 的 通信 。 这 在 22.3 节 中 会 有 详细 讨论 。 


14.8.1 打开 和 关闭 窗口 


使 用 Window 对 象 的 open0 方 法 可 以 打开 一 个 新 的 浏览 器 窗口 (或 标签 
页 ， 这 通常 和 浏览 器 的 配置 选项 有 关 ) 。Window.open0 载 入 指定 的 
URL 到 新 的 或 已 存在 的 窗口 中 ， 并 返回 代表 那个 窗口 的 Window 对 象 。 
它 有 4 个 可 选 鬼 参数。 


open() 的 第 一 个 参数 是 要 在 新 窗口 中 显示 的 文档 的 URL。 如 果 这 个 参数 
省 略 了 (也 可 以 是 空 字符 串 ) ， 那 么 会 使 用 空 页 面 的 URL 
about:blank ° 


open() 的 第 二 个 参数 是 新 打开 的 窗口 的 名 字 。 如 果 指 定 的 是 一 个 已 经 存 
在 的 窗口 的 名 字 〈 并 且 脚 本 允许 跳 转 到 那个 窗口 ) ， 会 直接 使 用 已 存 
在 的 窗口 。 否 则 ， 会 打开 新 的 窗口 ， 并 将 这 个 指定 的 名 字 赋 值 给 它 。 
如 果 省 略 此 参数 ， 会 使 用 指定 的 名 字 "_blank" 打 开 一 个 新 的 、 未 命名 的 
窗口 。 


需要 注意 的 是 ， 脚 本 是 无 法 通过 简单 地 猜测 窗口 的 名 字 来 操控 这 个 窗 
口中 的 Web 应 用 的 ， 只 有 设置 了 “人 允许 导航 ” (allowed to navigate) 

HTML5 规 范 中 的 术语 ) 的 页 面 才 可 以 这 样 。 宽 泛 地 讲 ， 当 且 仅 当 窗 
口 包含 的 文档 来 自 相 同 的 源 或 者 是 这 个 脚本 打开 了 那个 窗口 或 者 递 
归 地 打开 了 窗口 中 打开 的 窗口 ) ， 脚 本 才 可 以 只 通过 名 字 来 指定 存在 
的 窗口 。 还 有 ， 如 果 其 中 一 个 窗口 是 内 般 在 另 一 个 窗口 里 的 窗 体 ， 那 
么 在 它们 的 脚本 之 间 束 可 以 相互 导航 。 这 种 情况 下 ， 可 以 使 用 保留 的 
名 字 "_top"”( 顶 级 祖先 窗口 ) 和 "_parent”( 直 接 父 级 窗口 ) 来 获取 彼此 
的 浏览 上 下 文 。 


窗口 名 字 


和 窗口 的 名 字 是 非常 重要 的 ， 因 为 它 允 许 open() 方 法 引用 已 存在 的 窗口 ， 
并 同时 可 以 作为 <a> 和 <formn> 元 素 上 HTML target 属 性 的 值 ， 用 来 表 
示 引 用 的 文档 (或 表单 提交 结果 ) 应 该 显示 在 命名 的 窗口 中 。 这 个 
target 属 性 的 值 可 以 设置 为 "_blank"、"_parent" 或 "_top"， 从 而 使 引用 的 
文档 显示 在 新 的 空白 窗口 、 父 窗口 / 窗 体 或 顶层 窗口 中 。 


Window 对 象 如 果 有 name 属 性 ， 就 用 它 保 存 名 字 。 该 属性 是 可 写 的 ， 并 
且 脚 本 可 以 随意 设置 它 。 如 果 传 递 给 window.open0 一 个 除 "_ blank" 之 外 
的 名 字 ， 通 过 该 调用 创建 的 窗口 将 以 该 名 字 作 为 name 属 性 的 初始 值 。 
如 果 <iframe> 元 素 有 name 属 性 ， 表 示 该 ifame 的 Window 对 象 会 用 它 作 
为 name 属 性 的 初始 值 。 


open0 的 第 三 个 可 选 参数 是 一 个 以 逗号 分 隔 的 列表 ， 包 含 大 小 和 各 种 属 
性 ， 用 以 表明 新 窗口 是 如 何 打开 的 。 如 果 省 略 这 个 参数 ， 那 么 新 窗口 
驶 会 用 一 个 稚 认 的 大小， 而 且 带 有 一 整 组 标准 的 UI 组 件 ， 即 染 单 栏 、 
状态 栏 、 工 具 栏 等 。 在 标签 式 浏览 右 中 ， 会 创建 一 个 新 的 标签 。 


一 方面 ， 如 果 指 定 这 个 参数 ， 就 可 以 指定 窗口 的 尺寸 ， 以 及 它 包含 
的 一 组 属性 。 ( 显 式 指定 窗口 尺寸 更 像 是 创建 新 窗口 ， 而 不 是 新 标 
签 。) 例如 ， 要 打开 允许 改变 大 小 的 浏览 器 窗口 ， 并 且 包 含 状态 栏 、 
工具 栏 和 地 址 栏 ， 就 可 以 这 样 写 : 


Var w=window.open("smallwin.html","smallwin", 


"width=400, height=350, status=yes,resizable=yes"); 


第 三 个 参数 是 非 标准 的 ，HTML5 规 范 也 主张 浏 贤 器 应 该 急 略 它 。 参 见 
第 四 而 部 分 中 的 Window.open0 宜 看 在 此 参数 中 可 以 指定 什么 由 窑 。 注 
意 ， 当 指定 第 三 个 参数 时 ， 所 有 没有 显 式 指定 的 功能 都 会 名 上 略 。 出 于 
各 种 安全 原因 ， 浏 贤 絮 包含 对 可 能 定 的 功能 的 限制 。 例 如 ， 通常 不 
允许 指定 一 个 太 小 的 或 者 位 于 屏幕 之 外 的 窗口 ， 并 且 一 些 浏览 器 不 人 允 
许 创建 一 个 没有 状态 栏 的 窗口 。 


open() 的 第 四 个 参数 只 在 第 二 个 参数 命名 的 是 一 个 存在 的 窗口 时 才 有 
用 。 它 是 一 个 布尔 值 ， 声 明了 由 第 一 个 参数 指定 的 URL 是 应 用 蔡 换 挥 
窗口 浏览 历史 的 当前 条 目 (true) ， 还 是 应 该 在 窗口 浏览 历史 中 创建 一 
个 新 的 条 目 (false) ， 后 者 是 默认 的 设置 。 


open() 的 返回 值 是 代表 命名 或 新 创建 的 窗口 的 Window 对 象 。 可 以 在 自 
己 的 JavaScript 代 码 中 使 用 这 个 Window 对 象 来 引用 新 创建 的 窗口 ， 就 像 
使 用 隐 式 的 Window 对 象 window 来 引用 运行 代码 的 窗口 一 样 : 


var w=window.open() ;// 打 个 新 的 空白 窗 


w.alert("About to visit http://example.com");// 调 用 alert( ) 方 法 


==] 


w.location="http://example.com";// 设 置 它 的 lJocation 属 性 


| 这 
HT 


在 由 window.open() 方 法 创建 的 窗口 中 ，opener 属 性 引用 的 是 打开 它 的 脚 
本 的 Window 对 象 。 在 其 他 窗口 中 ，opener 为 null: 


w.opener!==null;//true， 对 于 由 w 创 建 的 任意 


w.open() .opener===w;//true， 对 于 任意 窗口 w 


Window.open0) 是 广告 商用 来 在 你 浏览 网 页 时 采用 的 “页 面 之 前 弹 

出 ”或 “页 面 之 后 弹出 ”窗口 的 一 种 方法 。 由 于 对 于 这 种 烦人 的 弹出 窗口 
的 滥用 ， 因 此 大 部 分 浏览 絮 都 增加 了 弹出 窗口 过 滤 系 统 。 通 常 ，open() 
方法 只 有 当 用 户 手 动 单 击 按钮 或 者 链接 的 时 候 才 会 调用 。JavaScript 代 
码 和 党 试 在 浏 贤 器 初始 载 入 (或 抒 载 ) 时 开启 一 个 弹出 窗口 时 ， 通 常会 
失败 。 将 上 面 的 代码 精 贴 到 浏览 器 的 JavaScript 控 制 台 里 进行 测试 ， 可 
能 会 由 于 同样 的 原因 而 失败 。 


天 闭 窗口 


就 像 方 法 open() 打 开 一 个 新 窗口 一 样 ， 方 法 close() 将 关闭 一 个 窗口 。 如 
果 已 经 创建 了 Window 对 象 w， 可 以 使 用 如 下 的 代码 将 它 关 掉 : 


w,Close()， 


运行 在 那个 窗口 中 的 JavaScript 代 码 则 可 以 使 用 下 面 的 代码 关闭 : 


window.close(); 


注意 ， 要 显 式 地 使 用 标识 符 window， 这 样 可 以 避免 混 消 Window 对 象 的 
close() 方 法 和 Document 对 象 的 close() 方 法 一 一 如 果 正 在 从 事件 处 理 程序 
调用 close()， 这 很 重要 。 


大 多 数 浏览 器 只 允许 自动 关闭 由 自己 的 JavaScript 代 码 创建 的 窗口 。 如 
果 要 关闭 其 他 窗口 ， 可 以 用 一 个 对 话 框 提示 用 户 ， 要 求 他 对 关闭 窗口 
的 请 求 进行 确认 (或 取消 ) 。 在 表示 窗 体 而 不 是 顶级 窗口 或 标签 页 上 
的 Window 对 象 上 执行 close0 方 法 不 会 有 任何 效果 ， 它 不 能 关闭 一 个 窗 
体 (反之 可 以 从 它 包 含 的 文档 中 删除 iframe) 。 


即使 一 个 窗口 关闭 了 ， 代 表 它 的 Window 对 象 仍 然 存 在 。 已 关闭 的 窗口 
会 有 个 值 为 true 的 closed 属 性 ， 它 的 document 会 是 null， 它 的 方法 通常 也 
\ 会 再 工作 。 


14.8.2” 窗 体 之 间 的 关系 


我 们 已 经 知道 ，Window 对 象 的 方法 open0 返 回 代表 新 创建 的 窗口 的 

Window 对 和 象 。 而 且 这 个 新 窗口 具有 opener 属 性 ， 该 属性 可 以 打开 它 的 

原始 窗口 。 这 样 ， 两 个 窗口 束 可 以 相互 引用 ， 彼 此 都 可 以 读 取 对 方 的 

属性 或 是 调用 对 方 的 方法 。 窗 体 也 是 这 样 的 。 窗 口 或 窗 体 中 运行 的 代 

人 下 面 介 绍 的 属性 引用 到 目 己 的 窗口 或 窗 体 ， 以 及 蔚 套 的 
窗 o 


任何 窗口 或 窗 体 中 的 JavaScript 代 码 都 可 以 将 目 己 的 窗口 和 窗 体 引 用 为 
window 或 self。 窗 体 可 以 用 parent 属 性 引用 包含 它 的 窗口 或 窗 体 的 
Window 对 和 象 : 


parent.history.back(); 


如 果 一 个 窗口 是 顶级 窗口 或 标签 ， 而 不 是 窗 体 ， 那 么 其 parent 属 性 引用 
的 束 是 这 个 窗口 本 身 : 


parent==self;// 只 有 顶级 窗口 才 会 返回 true 


如 果 一 个 寄 体 包含 在 另 一 个 窗 体 中 ， 而 后 者 又 包含 在 顶级 窗口 中 ， 那 
么 该 窒 体 就 可 以 使 用 parent.parent 来 引用 顶级 窗口 。top 属 性 是 一 个 通用 
的 快捷 方式 ， 无 论 一 个 窗 体 被 髓 套 了 儿 层 ， 它 的 top 属 性 引用 的 都 是 指 
癌 包 含 它 的 顶级 窗口 。 如 果 一 个 Window 对 象 代表 的 是 一 个 顶级 窗口 ， 
那么 它 的 top 属 性 引用 的 就 是 窗口 本 身 。 对 于 那些 顶级 窗口 的 直接 子 窗 
体 ，top 属 性 就 等 价 于 parent 属 性 。 


parent 和 top 属性 允许 脚本 引用 它 的 窗 体 的 祖先 。 有 不 止 一 种 方法 可 以 引 
用 窗口 或 窗 体 的 子孙 窗 体 。 窗 体 是 通过 < iframe> 元 素 创 建 的 。 可 以 用 
获取 其 他 元 素 的 方法 来 获取 一 个 表示 <iframe> 的 元 素 对 象 。 假 定 文档 
里 有 <iframe id="f1">>。 那 么 ， 表 示 该 iframe 的 元 素 对 象 束 是 : 


var iframeElement=document.getElementById("f1"); 


<iframe 记 元 素 有 contentWindow 属 性 ，3 引 用 该 窗 体 的 Window 对 象 ， 所 
以 此 窗 体 的 Window 对 象 就 是 : 


var childFrame=document.getElementById("f1").contentwindow; 


可 以 进行 反 疝 操作 从 表示 窗 体 的 Window 对 象 来 获取 该 窗 体 的 < 
iframe 元 素 用 Window 对 象 的 frameElement 属 性 。 表 示 顶 级 窗口 的 


Window 对 象 的 frameElement 属 性 为 null， 窗 体 中 的 Window 对 象 的 
frameElement 属 性 不 是 null: 


Var elt=document .getElementById("f1"); 
var win=elt.contentwindow; 


win.frameElement===elt// 对 于 帧 来 说 永远 是 true 


window.frameElement===nul1// 对 于 顶级 说 永远 是 true 


尽管 如 此 ， 通 常 不 需要 使 用 getElementById() 方 法 和 contentWindow 属 性 
来 获取 窗口 中 子 窗 体 的 引用 。 每 个 Window 对 象 都 有 一 个 frames 属 性 ， 
它 引 用 自身 包含 的 窗口 或 窗 体 的 子 窗 体 。frames 属 性 引用 的 是 类 数组 对 
象 ， 并 可 以 通过 数字 或 窗 体 名 进行 索引 。 要 引用 窗口 的 第 一 个 子 窗 

体 ， 可 以 用 frames[0]。 要 引用 第 二 个 子 窗 体 的 第 三 个 子 窗 体 ， 可 以 用 
frames[1].frames[2]。 窗 体 里 运行 的 代码 可 以 用 parent.frames[1]3 引 用 兄弟 
窗 体 。 注 意 frames[] 数 组 里 的 元 素 是 Window 对 象 ， 而 不 是 <iframe> 元 


力 、\、 


如 果 指 定 < iframe> 元 素 的 name 或 id 属性 ， 那 么 除了 用 数字 进行 索引 之 
外 ， 还 可 以 用 名 字 来 进行 索引 。 例 如 ， 名 字 为 "f" 的 帧 应 该 用 
frames["f1"] 或 frames.f1。 


刚刚 在 14.7 方 中 讲 到 ，<iframe>> 以 及 其 他 元 素 的 name 和 ID 都 可 以 目 动 
通过 Window 对 和 象 的 属性 来 应 用 ， 而 <iframe> 元 际 和 其 他 的 元 素 有 所 
不 同 : 对 于 窗 体 来 说 ， 通 过 Window 对 象 的 属性 引用 的 <iframe> 是 指 
窗 体 中 的 Window 对 象 ， 而 不 是 元 素 对 象 。 也 就 是 说 ， 可 以 通过 窗 体 的 
名 字 "fl1" 来 代替 frames.fL。 实 际 上 ，HTML5 规 范 指 出 frames 属 性 是 一 个 
自 引 用 (self-referential) 的 属性 ， 就 像 window 和 self 一 样 。 而 这 个 
Window 对 象 看 起 来 像 一 个 由 窗 体 组 成 的 数组 。 也 就 是 说 可 以 通过 
windo w[0] 来 获取 第 一 个 子 窗 体 的 引用 ， 可 以 通过 window.length 或 
length 查 询 窗 体 的 编号 。 但 是 这 里 我 们 使 用 frames 来 代 禁 window 会 比较 
清 蜥 一些， 尽管 这 种 方法 有 些 传统 。 需 要 注意 的 是 ， 当 前 的 浏览 器 不 
会 让 frame==window， 但 在 frame 和 window 不 相等 的 情况 下 ， 可 以 通过 
子 徐 体 的 索引 或 名 字 来 获取 其 他 对 象 的 引用 。 


可 以 使 用 <iframe> 的 元 素 的 name 或 id 属 性 作为 JavaScript 代 码 中 的 引用 
标识 。 但 如 果 使 用 name 属 性 的 话 ， 所 指定 的 name 同 样 也 会 成 为 代表 这 

个 窗 体 的 Window 对 象 的 name 属 性 。 以 这 种 方式 给 出 的 名 字 可 以 用 做 一 
个 链接 的 target 属 性 ， 而 且 它 可 以 用 做 window.open() 的 第 二 个 参数 。 


14.8.3 ”交互 窗口 中 的 JavaScript 


每 个 窗口 和 窗 体 都 是 它 上 自身 的 JavaScript 执 行 上 下 文 ， 以 Window 作 为 全 
局 对 象 。 但 是 如 果 一 个 窗口 或 突 体 中 的 代码 可 以 应 用 到 其 他 窗口 或 窗 
体 (并 且 同 源 策略 没有 阻止 它 ) ， 那 么 一 个 窗口 或 窗 体 中 的 脚本 就 可 
以 和 其 他 窗口 或 窗 体 中 的 脚本 进行 交互 。 


设想 一 个 Web 页面 里 有 两 个 <iframe> 元 素 ， 分 别 叫 "A" 和 "B"， 并 假设 
这 些 窗 体 所 包含 的 文档 来 自 于 相同 的 一 个 服务 器 ， 并 且 包 含 交互 脚 
本 。 窗 体 A 里 的 脚本 定义 了 一 个 变量 i: 


Var i=3; 


这 个 变量 只 是 全 局 对 象 的 一 个 属性 ， 也 是 window 对 象 的 一 个 属性 。 窗 
体 A 中 的 代码 可 以 用 标识 符 来 引用 变量 ， 或 者 用 window 对 象 显 式 地 引 


用 这 个 变量 : 


window.i 


由 于 窗 体 B 中 的 脚本 可 以 引用 窗 体 A 的 Window 对 象 ， 因 此 它 也 可 以 引用 
那个 Window 对 象 的 属性 : 


parent .A.i=4;// 改 变 窗 体 A 中 的 变量 i 的 值 


我 们 知道 ， 定 义 函 数 的 关键 字 function 可 以 声明 一 个 变量 ， 就 像 关 键 字 
var 所 做 的 那样 。 如 果 窗 体 B 中 的 脚本 声明 了 一 个 ( 非 舱 套 的 函数 f， 
这 个 函数 在 窗 体 B 中 有 是 全 局 变量 ， 并 且 窗 体 B 中 的 代码 可 以 用 fO 调 用 f。 
但 是 窗 体 A 中 的 代码 必须 将 f 作 为 窗 体 B 的 Window 对 象 的 {属性 来 引用 : 


parent.B.f();// 调 用 窗 体 B 中 定义 的 一 个 函数 


如 有 果 窗 体 A 中 的 代码 需要 很 频 尝 地 使 用 这 个 函数 ， 则 可 以 将 这 个 函数 赋 
这 样 就 可 以 经 常 使 用 这 个 变量 来 引用 窗 体 中 
| : 


Var f=parent.B.f; 


现在 襟 体 A 中 的 代码 就 可 以 像 窗 体 B 中 的 代码 那样 调用 函数 f0 了 。 


当 采 用 这 种 方式 在 窗 体 或 窗口 间 共 享 画 数 时 ， 牢 记 词 法 作用 域 的 规则 
非常 重要 。 函 数 在 定义 它 的 作用 域 中 执行 ， 而 不 是 在 调用 它 的 作用 域 
中 执行 。 就 上 面 那个 例子 来 说 ， 如 果 画 数 条 | 用 了 全 局 变量 ， 那 么 将 在 
窗 体 B 的 属性 中 查找 这 些 变 量 ， 即 使 函数 是 由 窗 体 A 调用 的 。 

要 记 住 构造 函数 也 是 函数 ， 所 以 当 用 构造 函数 和 相关 的 原型 对 象 定义 
一 个 类 〈 见 第 9 章 ) 时 ， 那 个 类 只 在 一 个 单独 的 窗口 中 定义 。 假 设 在 例 
子 9-6 中 的 窗口 包含 窗 体 A 和 窗 体 B， 并 且 包 含 Set 类 。 


顶级 窗口 中 的 脚本 可 以 创建 新 的 Set 对 象 ， 类 似 这 样 : 


Var s=new Set(); 


相反 ， 每 个 窗 体 中 的 代码 必须 显 式 地 用 父 级 窗口 的 属性 来 引用 Set() 构 


Var s=new parent .Set()， 


男 外 ， 每 个 窗 体 中 的 代码 还 可 以 定义 目 己 的 变量 来 引用 构造 函数 ， 这 
样 束 更 方便 了 : 


Var Set=top.Set();var S=new Set(); 


和 用 户 定义 的 类 不 同 ， 内 置 的 类 (比如 String，Date 和 RegExp) 都 会 在 
所 有 的 窗口 中 自动 预定 义 。 但 是 要 注意 ， 每 个 窗口 都 有 构造 芳 数 的 一 
个 独立 副本 和 构造 范 数 对 应 原型 对 象 的 一 个 独立 副本 。 例 如 ， 每 个 窗 
口 都 有 目 己 的 StringO 构 造 函 数 和 String.prototype 对 象 的 副本 。 因 此 ， 如 
采编 写 一 个 操作 JavaScript 字 符 串 的 新 方法 ， 并 且 通 过 把 它 赋 值 给 当前 
窗口 中 的 String.prototype 对 象 而 使 它 成 为 String 类 的 一 个 方法 ， 那 么 该 


窗口 中 的 所 有 字符 串 就 都 可 以 使 用 这 个 者 方法 。 但 是 ， 别 的 窗口 中 定 
义 的 字符 串 不 能 使 用 这 个 新 方法 。 


事实 上， 每 个 window 都 有 上 自己 的 原型 对 象 ， 这 意味 着 instanceof 探 作 符 
不 能 跨 窗口 工作 。 例 如 ， 当 用 instanceof 来 比较 窗 体 B 的 一 个 字符 串 和 窗 
体 A 的 String(0) 构 造 钞 数 时 ， 结 有 果 会 为 false。7.10 节 介绍 了 决定 跨 窗口 数 
组 的 类 型 时 的 相关 困难 。 


WindowProxy 对 象 


我 们 已 经 讲 过 很 多 次 ，Window 对 象 是 客户 端 JavaScript 的 全 局 变量 。 但 
是 从 技术 上 来 看 ， 并 不 是 这 样 的 。Web 浏 览 器 每 次 同窗 口 或 窗 体 中 载 入 
新 的 内 容 ， 它 都 会 开始 一 个 新 的 JavaScript 执 行 上 下 文 ， 包含 一 个 新 创 
建 的 全 局 对 象 。 但 是 当 多 个 窗口 或 窗 体 在 使 用 时 ， 有 一 个 重要 的 概 

念 ， 尺 管 窗 体 或 窗口 载 入 了 新 的 文档 ， 但 是 引用 窗 体 或 窗口 的 Window 
对 象 还 仍然 是 一 个 有 效 的 引用 。 


所 以 客户 端 JavaScript 有 两 个 重要 的 对 象 。 客 户 问 全 局 对 象 处 于 作用 域 
链 的 顶级 ， 并 且 是 全 局 变量 和 画 数 所 定义 的 地 方 。 事 实 上， 全 局 对 象 
会 在 窗口 或 窒 体 载 入 新 内 容 时 被 替换 。 我 们 称 为 “window 对 象 " 的 对 象 
实际 上 不 是 全 局 对 象 ， 而 是 全 局 对 象 的 一 个 代理 。 每 当 查 询 或 设置 
Window 对 和 象 的 属性 时 ， 就 会 在 窗口 或 窗 体 的 当前 全 局 对 象 上 查询 或 设 
置 相同 的 属性 。HTML5 规 范 称 这 个 代理 对 象 为 WindowProxy， 但 在 本 
书 中 我 们 会 继续 使 用 名 词 Window 对 象 。 


由 于 它 的 代理 行为 ， 除 了 有 更 长 的 生命 周期 之 外 ， 代 理 对 象 表现 得 像 
真正 的 全 局 对 象 。 如 果 可 以 比较 两 个 对 象 ， 那 么 区 分 它们 会 很 困难 。 
但 是 事实 上 ， 没 有 办 法 可 以 引用 到 真正 的 客户 端 全 局 对 象 。 全 局 对 象 
处 于 作用 域 链 的 顶端 ， 但 是 window、self、top、parent 以 及 窗 体 的 属性 
全 部 返回 代理 对 象 。window.open0 方 法 也 返回 代理 对 象 。 其 至 顶级 函 
数 里 this 关 键 字 的 值 都 是 代理 对 象 ， 而 不 是 真正 的 全 局 对 象 4 。 


[1]jQuery 的 作者 John Resig 曾 经 写 过 一 篇 文章 来 解释 这 个 “队列 *， 详 情 
请 参照 : http://ejohn.org/blog/how-javascript-timers-work/。 


[2] Netscape Navigator (网 景 浏览 器 ) 是 一 个 著名 的 Web 浏 览 器 ， 更 多 
信息 可 阅读 : http://en.wikipedia.org/wiki/Netscape_Navigator ° 


[3]. 模 仿 对 话 框 束 是 指 那 种 “显示 出 来 束 不 可 以 扣 先 位 于 其 下 面 的 对 话 
框 ” 的 对 话 框 。 


[4 最 后 一 点 对 于 ES3 和 ES5 规 范 稍 有 违 痛 ， 但 客户 端 JavaScript 是 需要 
文 持 这 种 多 重 执行 上 下 文 的 。 


第 15 章 ”脚本 化 文档 

客户 端 JavaScript 的 存在 使 得 静态 的 HTML 文 档 变 成 了 交互 式 的 Web 心 
用 。 脚 本 化 web 页面 内 容 是 JavaScript 的 核心 目标 。 本 章 一 一 本 书 中 最 
重要 的 章 和 之 一 阐述 了 它 是 如 何 做 到 的 。 

第 13 革 和 第 14 划 解释 了 每 一 个 Web 浏 览 器 窗口 、 标 签 页 和 框架 由 一 个 
Window 对 和 象 所 表示 。 每 个 Window 对 象 有 一 个 document 属 性 引用 了 
Document 对 象 。Document 对 象 表示 窗口 的 内 容 ， 它 就 是 本 章 的 主题 。 
尽管 如 此 ，Document 对 象 并 非 独 立 的 ， 它 是 一 个 巨大 的 API 中 的 核心 对 
象 ， 叫 做 文档 对 象 模型 (Document Object Model，DOM) ， 它 代表 和 
操作 文档 的 内 容 。 

本 章 开 始 部 分 解释 DOM 的 基本 架构 ， 然 后 进一步 解释 以 下 内 容 : 

:如 何在 文档 中 查询 或 选取 单独 的 元 素 。 


-如 何 将 文档 作为 节点 树 来 毛 历 ， 如 何 找到 任何 文档 元 素 的 祖先 、 兄 第 
和 后 代 元 素 。 


:如何 查询 和 设置 文档 元 素 的 属性 。 

如何 查 询 、 设 置 和 修改 文档 内 容 。 

-如何 通 过 创建 、 插 入 和 删除 节点 来 修改 文档 结构 。 
如何 与 HIML 表 单一 起 工作 。 


本 章 最 后 一 节 池 盖 其 他 各 种 文档 特性 ， 包 含 referrer 属 性 、write() 方 法 和 
查询 当前 文档 中 选取 的 文档 文本 的 技术 等 。 


15.1 DOM 概 览 


文档 对 象 模 型 (DOM) 是 表示 和 操作 HTML 和 XML 文档 内 容 的 基础 

API。API 不 是 特别 复杂 ， 但 是 需要 理解 大 量 的 架构 细节 。 首 先 ， 应 该 
理解 HTML 或 XML 文 档 的 般 套 元 素 在 DOM 树 对 象 中 的 表示 。HTML 文 
档 的 树 状 结构 包含 表示 HTML 标 签 或 元 素 (如 <body>、<p>) 和 表 


示 文 本 字符 串 的 和 点 ， 它 也 可 能 包含 表示 HTML 注 释 的 节点 。 考 虑 以 下 
简单 的 HTML 文档 ; 

<html> 

<head> 

<title>Sample Document</title> 

</head> 

<body> 

<h1i>An HTML Document</hi> 

<p>This is a<i>simple</i>document. 


</html> 


图 15-1 是 此 文档 DOM 表 示 的 树 状 图 。 


"Sample Document" 


"AnHTML Document’ 


图 15-1 HTML 文档 的 树 状 表示 


如 果 还 未 熟悉 计算 机 编程 中 的 树 状 结构 ， 借 用 家 谱 图 来 形容 是 比较 有 
用 的 方法 。 在 一 个 节点 之 上 的 直接 市 点 十 其 父 太 上 ， 在 其 下 一 层 的 直 
接 太 上 太 是 其 子 节 上 护 。 在 同一 层 上 具有 相同 父 节 扩 的 节 扩 是 见 第 玉 态 。 
在 一 个 太 点 之 下 的 所 有 层级 的 一 组 节点 是 其 后 代 市 点 。 一 个 节点 的 任 
何 父 节点 、 和 祖父 厄 点 和 其 上 层 的 所 有 市 点 是 祖先 节点 。 


图 15-1 中 的 每 个 方 框 是 文档 的 一 个 厄 点 ， 它 表示 一 个 Node 对 象 。 我 们 

将 在 后 续 儿 市 中 讨论 Node 的 属性 和 方法 ， 并 且 可 以 在 第 四 部 分 查找 这 
些 属性 和 方法 。 注 意 ， 图 15-1 包 含 3 种 不 同类 型 的 节点 。 树 形 的 根部 是 
Document 玉 点 ， 它 代表 整个 文档 。 代 表 HTML 元 系 的 节点 是 Element 
点 ， 代 表 文 本 的 和 点 是 TextT 点 。Document、Element 和 Text 是 Node 的 
子 类 ， 在 第 四 部 分 中 它们 有 自己 的 条 目 。Document 和 Element 是 两 个 重 
要 的 DOM 类 ， 本 章 大 部 分 内 容 将 前 述 它 们 的 属性 和 方法 。 


图 15-2 展 示 了 Node 及 其 在 类 型 层次 结构 中 的 子 类 型 。 注 意 ， 通 用 的 
Document 和 Element 类 型 与 HTMLDocument 和 HTMLElement 类 型 之 间 是 
有 严格 的 区 别 的 。 Document 类 型 代表 一 个 HTML 或 XML 文 要 ，Element 
类 型 代表 该 文档 中 的 一 个 元 素 。HTMLDocument 和 HTMLElement 子 类 
只 是 针对 于 HTML 文 档 和 元 素 。 此 书 中 ， 我 们 经 常 使 用 通用 类 名 
Document 和 Element， 其 至 在 指 代 HTML 文 档 时 也 不 例外 。 在 第 四 部 分 
中 也 是 如 此 HTMLDocument 和 HTMLElement 类 型 的 属性 和 方法 记录 
于 Document 和 Element 参 考 页 中 。 


HTMLHeadElement 
HTMLBodyElement 
HTMLDocument 
HTMLTitleElement 
CharacterData HTMLParagraphElement 


到 
He 


图 15-2 文档 节点 的 部 分 层次 结构 


值得 注意 的 是 ， 在 图 15-2 中 有 HTMLElement 的 很 多 子 类 型 代表 HTML 元 
素 的 具体 类 型 。 每 个 类 型 定义 多 个 JavaScript 属 性 ， 它 们 对 应 具体 的 元 
素 或 元 素 组 (参照 15.4.1 节 ) 的 HTML 属 性 。 有 些 具 体 元 素 类 也 定义 额 
外 的 属性 和 方法 ， 它 们 并 不 是 简单 地 映射 HTML 语 法 。 第 四 部 分 涵盖 这 
些 类 型 及 其 额外 的 特性 。 


最 后 ， 请 注意 图 15-2 也 展示 了 到 目前 为 止 还 未 提 及 的 一 些 和 点 类 型 。 
Comment 世 点 代表 HTMEL 或 XML 的 注释 。 由 于 注释 基本 上 是 文本 字符 
串 ， 因 此 它们 很 像 表 示 文 档 中 显示 文本 的 TextT 点 。CharacterData 通 各 
是 Text 和 Comment 的 祖先 ， 它 定义 这 两 种 节点 所 共享 的 方法 。Attr 世 点 
类 型 代表 XML 或 HTML 属 性 ， 但 它 几 乎 从 不 使 用 ， 因 为 和 文档 节点 不 
同 ，Element 类 型 定义 了 将 属性 当做 “名 / 值 ? 对 使 用 的 方法 。 
DocumentFragment 类 〈 未 在 图 15-2 上 显示 ) 在 实际 文档 中 并 不 存在 的 一 
种 世上 点 : 它 代 表 一 系列 没有 和 常规 父 玉 点 的 蔬 点 。 对 一 些 文 档 操 作 来 说 
DocumentFragment 非 常 有 用 ，15.6.4 广 泣 新 这 部 分 内 容 。DOM 也 定义 了 
二 些 不 经 锁 使 用 的 类 型 ， 如 像 代表 doctype 声 明和 XML 人 处 理 指令 等 类 

型 o 


15.2 ”选取 文档 元 素 

大 多 数 客户 端 JavaScript 程 序 运行 时 总 是 在 操作 一 个 或 多 个 文档 元 素 。 
当 这 些 程序 启动 时 ， 可 以 使 用 全 局 变量 document 来 引用 Document 寺 
象 。 但 是 ， 为 了 操作 文档 中 的 元 素 ， 必 须 通 过 某 种 方式 获得 或 选取 这 
些 引 用 文档 元 素 的 Element 对 象 。DOM 定 义 许多 方式 来 选取 元 素 ， 查 询 
文档 的 一 个 或 多 个 元 素 有 如 下 方法 : 

:用 指定 的 id 属 性 ; 

:用 指定 的 name 属 性 ; 

:用 指定 的 标签 名 字 ; 

:用 指定 的 CSS 类 ，; 

:匹配 指定 的 CSS 选 择 器 。 

随后 几 世 解释 每 一 种 元 素 选 取 技术 。 

15.2.1 通过 ID 选取 元 素 

任何 HIML 元 素 可 以 有 一 个 id 属性 ， 在 文档 中 该 值 必须 唯一 ， 即 同一 个 
文档 中 的 两 个 元 素 不 能 有 相同 的 ID。 可 以 用 Document 对 象 的 


getElementBy1d() 方 法 选取 一 个 基于 唯一 ID 的 元 素 。 此 方法 我 们 在 第 13 
章 和 第 14 章 都 已 经 使 用 过 了 : 


Var section1i=document.getElementById("section1"); 


这 是 最 简单 和 常用 的 选取 元 素 的 方法 。 如 果 想 要 操作 某 一 组 指定 的 文 
档 元 素 ， en 性 值 ， 并 使 用 TD 查找 这 些 Element 对 象 。 
0 通过 ID 碍 找 多 个 元 素 ， 会 发 现 例 15-1 中 的 getElementsO 函 数 非 
党 有 用 : 


例 15-1: 通过 ID 查找 多 个 元 素 


pA 


* 国 数 接受 任意 多 的 字符 串 参 数 


* 每 个 参数 将 当做 元 素 的 id 传 给 document .getElementById() 


* 返 回 一 个 对 象 ， 它 把 这 些 id 映 射 到 对 应 Element 对 象 


* 如 任何 一 个 id 对 应 的 元 素 未 定义 ， 则 抛 出 一 个 Error 对 象 


function getElements(/*ids,...*/){ 


var elements={};// 开 始 是 一 个 空 map 映 射 对 象 


for(var i=0;i<arguments.length;i++){// 循 环 每 个 参数 


var id=arguments[i];// 参 数 是 元 素 的 id 


var elt=document .getElementById(id);// 查 找 元 素 


if(elt==null)// 如 果 未 定义 


昼 
入 


throw new Error("No element with id:"+id);// 抛 H 


elements[id]=elt;//id 和 元 素 之 间 映 射 


} 


return elements;// 对 于 元 素 映 射 返回 id 


} 


在 低 于 IE 8 版 本 的 浏览 絮 中 ，getElementBy1Id() 对 匹配 元 素 的 有 D 不 区 分 
大 小 写 ， 而 且 也 返回 匹配 name 属 性 的 元 素 。 


15.2.2 ”通过 和 名字 选取 元 素 


HTML 的 name 属 性 最 初 打 算 为 表单 元 际 分 配 名 字 ， 在 表单 数据 提交 到 
服务 器 时 使 用 该 属性 的 值 。 类 似 id 属性 ，name 是 给 元 素 分 配 名 字 ， 但 
是 区 别 于 id，name 属 性 的 值 不 是 必须 唯一 : 多 个 元 素 可 能 有 同样 的 名 
字 ， 在 表单 中 ， 单 选 和 复 选 按钮 通常 是 这 种 情况 。 而 且 ， 和 id 不 一 样 的 
是 name 属 性 只 在 少数 HTML 元 素 中 有 有效， 包括 表单 、 表 单元 素 、< 
iframe> 和 <img> 元 素 。 


基于 name 属 性 的 值 选取 HTML 元 素 ， 可 以 使 用 Document 对 象 的 
getElementsByName() 方 法 。 


var radiobuttons=document ,getE1LementSsByName("favorite_color"); 


getElementsByName0 定 义 在 HIMLDocument 类 中 ， 而 不 在 Document 类 
中 ， 所 以 它 只 和 守 对 HTML 文 档 可 用 ， 在 XML 文 档 中 不 可 用 。 它 返回 一 
个 NodeList 对 象 ， 后 者 的 行为 类 似 一 个 包含 若干 Element 对 象 的 只 读数 
组 。 在 正中 ，getElementsByName0 也 返回 id 属性 匹配 指定 值 的 元 兹 。 为 
了 兼容 ， 应 该 小 心 谍 导 ， 不 要 将 同样 的 字符 串 同时 用 做 名 字 和 ID 。 


在 14.7 节 中 我 们 看 到 ， 为 某 些 HTML 元素 设置 name 属 性 值 将 自动 为 
Window 对 象 中 创建 对 应 的 属性 ， 对 Document 对 象 也 类 似 。 为 <form 
>、<img>、<iframe>、<applet>、<embed>> 或 <object> 元 素 

(其 中 只 有 <object> 元 素 没 有 后 备 对 象 ， 设 置 name 属 性 值 ， 即 在 
Document 对 象 中 创建 以 此 name 属 性 值 为 名 字 的 属性 (当然 ， 假 设 此 文 
档 还 没有 该 名 字 的 属性 ) 。 


如 果 给 定 的 名 字 只 有 一 个 元 素 ， 自 动 创建 的 文档 属性 对 应 的 该 值 是 元 
素 本 映 。 如 果 有 多 个 元 素 ， 该 文档 属性 的 值 是 一 个 NodeList 对 象 ， 它 表 
现 为 一 个 包含 这 些 元 素 的 数组 。 如 14.7 节 所 示 ， 为 若干 命名 <iframe > 
元 素 所 创建 的 文档 属性 比较 特殊 : 它们 指 代 这 些 框架 的 Window 对 象 而 
不 是 Element 对 象 。 


这 就 意味 着 有 些 元 素 可 以 作为 Document 属 性 仅 通 过 名 字 来 选取 : 


// 针 对 <form name="shipping_address"> 元 素 ， 得 到 Element 对 象 


var form=document ,shipping_address 


在 14.7 节 介绍 了 为 什么 不 要 用 为 窗口 对 象 自 动 创 建 的 属性 ， 这 同样 适用 
于 为 文档 对 象 自 动 创建 的 属性 。 如 果 需 要 查找 命名 的 元 素 ， 最 好 显 式 
地 调用 getElementsByName0 来 查找 它们 。 


15.2.3 ”通过 标签 名 选取 元 素 


Document 对 象 的 getElementsByTagName() 方 法 可 用 来 选取 指定 类 型 ( 标 
签名 ) 的 所 有 HTML 或 XML 元 素 。 例 如 ， 如 下 代码 ， 在 文档 中 获得 包 
含 所 有 <span> 元 素 的 只 读 的 类 数组 对 象 : 


var Spans=document .getElementsByTagName("span"); 


类 似 于 getElementsByName()，getElementsByTagName() 返 回 一 个 
NodeList 对 象 《关于 NodeList 类 ， 见 本 节 的 补充 信息 ) 。 在 NodeList 中 
返回 的 元 素 按照 在 文档 中 的 顺序 排序 的 ， 所 以 可 用 如 下 代码 选取 文档 
中 的 第 一 个 入 > 元 系 : 


var firstpara=document.getElementsByTagName("p")[0]; 


HTML 标 签 是 不 区 分 大 小 写 的 ， 当 在 HIML 文 档 中 使 用 
getElementsByTagName() 时 ， 它 进行 不 区 分 大 小 写 的 标签 名 比较 。 例 
如 ， 上 还 的 变量 span 将 包含 所 有 写成 <SPAN > 的 span 标 签 。 


给 getElementsByTagName() 传 递 通 配 从 参数 “*” 将 获得 一 个 代表 文档 中 
所 有 元 素 的 NodeList 对 象 。 


Element 类 也 定义 getElementsByTagName() 方 法 ， 其 原理 和 Document 版 
本 的 一 样 ， 但 是 它 只 选取 调用 该 方法 的 元 素 的 后 代 元 素 。 因 此 ， 要 得 
找 文档 中 第 一 个 <p> 元 素 里 面 的 所 有 <span> 元 素 ， 代 码 如 下 : 


var firstpara=document.getElementsByTagName("p")[0]; 


var firstParaSpans=firstpara.getElementsByTagName("span"); 


由 于 历史 的 原因 ，HTMLDocument 类 定义 一 些 快 捷 属 性 来 访问 各 种 各 
样 的 太 点 。 例 如 ，images、forms 和 links 等 属性 指 问 行 为 类 似 只 读数 组 
的 <img>>、<form>> 和 <a> (但 只 包含 那些 有 href 属 性 的 <a> 标 

签 ) 元 素 集合 。 这 些 属 性 指 代 HTMLCollection 对 象 ， 它 们 很 像 NodeList 
对 象 ， 但 是 除 此 之 外 它们 可 以 用 元 素 的 ID 或 名 字 来 索引 。 早 些 时 候 ， 
我 们 已 经 看 到 用 如 下 的 表达 式 来 引用 一 个 命名 的 <form > 元素: 


document .shipping_address 


用 document.forms 属 性 也 可 以 更 具体 地 引用 命名 (或 有 ID 的 ) 表单 ， 如 
下 : 


document .forms.shipping_address,; 


HTMLDocument 也 定义 ambeds 和 plugins 属 性 ， 它 们 是 同义词 ， 都 是 
HTMLCollection 类 型 的 <embed> 元 素 的 集合 。anchors 是 非 标准 属性 ， 
它 指 代 有 一 个 name 属 性 的 <a> 元 素 而 并 不 是 一 个 href 属 性 。scripts 在 


HTML5 中 是 标准 属性 ， 它 是 HTMLCollection 类 型 的 <script> 元素 的 集 
合 ， 但 是 在 写本 书 的 时 候 ， 它 还 未 普遍 实现 。 


HTMLDocument 对 象 还 定义 两 个 属性 ， 它 们 指 代 特殊 的 单个 元 素 而 不 
是 元 到 的 集合 。document.body 是 一 个 HTML 文 档 的 <body> 元 素 ， 
document.head 是 <head> 元 素 。 这 些 属性 总 是 会 定义 ， 如 果 文 档 源 代 
码 未 显 式 地 包含 <head> 和 <body>> 元 素 ,， 浏览 器 将 隐 式 地 创建 它 
们 。Document 类 的 documentElement 属 性 指 代 文档 的 根 元 素 。 在 HTML 
文档 中 ， 它 忌 是 指 代 <html>> 元 素 。 


节点 列表 和 HTML 集合 


getElementsByName() 和 getElementsByTagName() 都 返回 NodeList 对 和 象 ， 
而 类 似 document.images 和 document.forms 的 属性 为 HTMLCollection 对 


O 〇 


这 些 对 象 都 是 只 读 的 类 数组 对 象 ( 见 7.11 方 ) 。 它 们 有 length 必 性， 也 
可 以 像 真正 的 数组 一 样 索引 (只 是 读 而 不 是 写 ) 。 可 以 对 一 个 NodeList 
或 HTMLCollection 的 内 容 用 如 下 标准 的 循环 进行 迭代 : 


亚 


for(var i=0;i<document.images.length;i++)// 循 环 所 有 的 医 


document .images[i].style.display="none";//. 隐 藏 它们 


不 能 直接 在 NodeList 和 HTML 焦 合 上 调用 Array 的 方法 ， 但 可 以 间接 地 
使 用 : 


var content=Array.prototype.map.call(document .getElementsByTagName("p"), 


function(e){return e.innerHTML;}); 


HTMLCollection 对 象 也 有 额外 的 命名 属性 ， 也 可 以 通过 数字 和 字符 串 
来 索引 。 


由 于 历史 的 原因 ，NodeList 和 HITMLCollection 对 象 也 都 能 当做 函数 : 以 
数字 或 字符 串 为 参数 调用 它 就 如 同 使 用 数字 或 字符 串 索 引 它 们 一 般 。 
不 鼓励 使 用 这 种 怪异 的 方式 。 


NodeList 和 HTMLCollection 接 口 都 不 是 为 像 JavaScript 这 样 的 动态 语言 
设计 的 。 它 们 都 定义 了 item() 方 法 ， 期 望 输入 一 个 整数 ， 并 返回 此 索引 
处 的 元 素 。 在 JavaScript 中 根本 没有 必要 调用 此 方法 ， 因 为 简单 地 使 用 
数组 索引 残 能 替代 。 类 似 地 ，HTMLCollection 定 义 了 namedItem() 方 
法 ， 它 返回 指定 属性 名 的 值 ， 但 在 JavaScript 程 序 中 可 以 用 数组 索引 或 
利 规 属性 来 访问 。 


NodeList 和 HTMLCollection 对 象 不 是 历史 文档 状态 的 一 个 静态 快照 ， 而 
通常 是 实时 的 ， 并 且 当 文档 变化 时 它们 所 包含 的 元 素 列表 能 随 之 改 

变 ， 这 是 其 中 一 个 最 重要 和 令 人 惊讶 的 特性 。 假 设 在 一 个 没有 <div> 
元 素 的 文档 中 调用 getElementsByTagName('div”))， 此 时 返回 值 是 一 个 
length 为 0 的 NodeList 对 象 。 如 果 再 在 文档 中 插入 一 个 新 的 <div> 元 

素 ， 此 元 素 将 自动 成 为 NodeList 的 一 个 成 员 ， 并 且 它 的 length 属 性 变 成 
1 O 


通常 ，NodeList 和 HTMILCollection 的 实时 性 非常 有 用 。 但 是 ， 如 果 要 在 
和 欠 代 一 个 NodeList 对 象 时 在 文档 中 添加 或 删除 的 元 素 ， 首 先 会 需要 对 
NodeList 对 象 生成 一 个 静态 的 副本 : 


var snapshot=Array.prototype.slice.call(nodelist, 0); 


15.2.4 ”通过 CSS 类 选取 元 素 


HTML 元 系 的 class 属 性 值 是 一 个 以 空格 阳 开 的 列表 ， 可 以 为 空 或 包含 多 
个 标识 符 。 它 描述 一 种 方法 来 定义 多 组 相关 的 文档 元 素 : 在 它们 的 
class 属 性 中 有 相同 标识 符 的 任何 元 到 属于 该 组 的 一 部 分 。 在 JavaScript 
中 class 是 保留 字 ， 所 以 客户 端 JavaScript 使 用 className 必 性 来 保存 
HTML 的 jclass 属 性 值 。class 属 性 通常 与 CSS 样 式 表 一 起 使 用 ， 对 某 组 内 
的 所 有 元 素 应 用 相同 的 样式 ， 在 第 16 章 中 将 再 次 看 到 它 。 尽 管 如 此 ， 
HTML 定 义 了 getElementsByClassName() 方 法 ， 它 基于 其 class 属 性 值 中 
的 标识 符 来 选取 成 组 的 文档 元 素 。 


类 似 getElementsByTagName0， 在 HIML 文 要 和 HTML 元 么 上 都 可 以 调 
用 getElementsByClassName()， 它 的 返回 值 是 一 个 实时 的 NodeList 对 
象 ， 包 含 文档 或 元 素 所 有 匹配 的 后 代 节 点 。getElementsByClassName() 
只 需要 一 个 字符 串 参 数 ， 但 是 该 字符 串 可 以 由 多 个 空格 隔 开 的 标识 符 
组 成 。 只 有 当 元 素 的 class 属 性 值 包含 所 有 指定 的 标识 符 时 才 匹 配 ， 但 
是 标识 符 的 顺序 是 无 天 紧要 的 。 注 意 ，class 属 性 和 
getElementsByClassName() 方 法 的 类 标识 从 之 间 都 是 用 空格 隅 开 的 ， 而 
不 是 逗号 。 如 下 是 使 用 getElementsByClassName0 的 一 些 例子 : 


// 查 找 其 class 属 性 值 中 包含 "warning" 的 所 有 元 素 


var warnings=document .getElementsByClassName("warning");// 查 找 以 "log" 命 名 


有 "error" 和 "fatal" 类 的 元 素 的 所 有 后 代 


var log=document .getElementById("]10g"); 


Var fatal=log.getElementsByClassName("fatal error"); 


如 今 的 web 浏 贤 器 依赖 于 文档 开头 处 对 <!IDOCTYPE > 声明 的 严格 程度 
来 选择 “怪异 模式 ”或 “标准 模式 ”方式 显示 HTML 文 档 。 怪 异 模式 是 为 了 
问 后 兼容 性 而 存在 的 ， 其 中 一 个 怪异 行为 束 古 在 class 属 性 中 和 CSS 样 式 
表 中 的 类 标识 符 不 区 分 大 小 写 。getElementsByClassName() 方 法 使 用 样 
式 表 的 匹配 算法 。 如 果 文 档 以 怪异 模式 泻 染 ， 该 方法 将 执行 不 区 分 大 
小 写 的 字符 串 比 较 ; 否则 ， 该 比较 区 分 大 小 号。 


在 写本 书 这 段 时 间 内 ， 除 了 正 8 及 其 较 低 的 版 本 ， 
getElementsByClassName() 在 所 有 当前 的 浏 贤 器 中 都 实现 了 。IE 8 确实 
支持 querySelectorAll0 方 法 ， 下 一 太 会 介绍 它 ， 而 
getElementsByClassName() 方 法 是 可 以 在 其 之 上 实现 的 。 


15.2.5 ”通过 CSS 选 择 器 选取 元 素 


css 样式 表 有 一 种 非常 强大 的 语法 ， 那 就 是 选择 器 ， 它 用 来 描述 文档 中 
的 若干 或 多 组 元 素 。CSS 选 择 器 语法 的 全 部 细节 介绍 超出 了 本 书 的 范围 
HL， 但 是 这 里 有 一 些 例子 来 说 明基 本 的 语法 。 元 素 可 以 用 ID、 标 签名 
或 类 来 描述 


#nav//id="nav" 的 元 素 


div// 所 有 <div> 元 素 


.Warning// 所 有 在 class 属 性 值 中 包含 了 "warning" 的 元 素 


更 一 般 地 ， 元 于 可 以 基于 属性 值 来 选取 : 


p[lang="fr"]// 所 有 使 用 法 语 的 段落 ， 如 : <p lang="fr"> 


*[name="x"]// 所 有 包含 name="x" 属 性 的 元 素 


这 些 基本 的 选择 胡可 以 组 合 使 用 : 


span.fatal,error// 其 class 中 包含 "fatal" 和 "error'" 的 所 有 < span> 元 素 


span[lang="fr"].warning// 所 有 使 用 法 语 的 且 其 class 中 包含 "warning" 的 <span> 元 素 


选择 器 可 以 指定 文档 结构 


#10g span//id="1og" 元 素 的 后 代 元 素 中 的 所 有 < span > 元 素 


#1og> span//id="1og" 元 素 的 子 元素 中 的 所 有 < span > 元素 


body>>h1i:first-child//<body> 的 子 元 素 中 的 第 一 个 <h1i> 元 素 


选择 妖 可 以 组 合 起 来 选取 多 个 或 多 组 元 素 : 


div,#10g// 所 有 <div>> 元 素 ， 以 及 id="log" 的 元 素 


如 你 所 见 ，CSS 选 择 器 可 以 使 用 上 述 所 有 方法 选取 元 素 : 通过 ID、 和 名 
字 、 标 签名 和 类 名 。 与 CSS3 选 择 圳 的 标准 化 一 起 的 另 一 个 称 做 “选择 器 
API” 的 W3C 标 准 定 义 了 获取 匹配 一 个 给 定 选 择 器 的 元 于 的 JavaScript 方 
法 上 。 该 API 的 关键 是 Document 方 法 querySelectorAl10。 它 接受 包含 一 
个 CSS 远 择 器 的 字符 串 参 数 ， 返 回 一 个 表示 文档 中 匹配 选择 右 的 所 有 元 
素 的 NodeList 对 象 。 与 前 面 描述 的 选取 元 素 的 方法 不 同 ， 
querySelectorAl10 返 回 的 NodeList 对 象 并 不 是 实时 的 : 它 包含 在 调用 时 
刻 选 择 器 所 匹配 的 元 素 ， 但 它 并 不 更 新 后 续 文 档 的 变化 。 如 果 没 有 匹 
配 的 元 素 ，querySelectorAl10 将 返回 一 个 空 时 NodeList 对 象 。 如 采 选 择 
句 字 符 串 非法 ，querySelectorAl10 将 抛 出 一 个 异常 。 


除了 querySelectorAl10， 文 档 对 象 还 定义 了 querySelector0) 方 法 。 与 
querySelectorAll() 的 工作 原理 类 似 ， 但 它 只 是 返回 第 一 个 匹配 的 元 于 
(以 文档 顺序 ) 或 者 如 有 果 没 有 匹配 的 元 素 就 返回 null 。 


这 两 个 方法 在 ElementT 点 中 也 有 定义 〈 并 且 也 在 DocumentFragmentT 
点 中 ， 见 15.6.4 节 ) 。 在 元 素 上 调用 时 ， 指 定 的 选择 器 仍然 在 整个 文档 
中 进行 匹配 ， 然 后 过 滤 出 结果 集 以 便 它 只 包含 指定 元 素 的 后 代 元 素 。 
这 看 起 来 是 违反 常规 的 ， 因 为 它 意味 着 选择 器 字符 串 能 包含 元 素 的 祖 
和 而 不 仅仅 是 上 述 所 匹配 的 元 么 。 


注意 ，CSS 定 义 了 ":first-line" 和 ":first-letter" 等 伪 元 素 。 在 CSS 中 ， 它 们 
匹配 文本 世上 点 的 一 部 分 而 不 是 实际 元 素 。 如 果 和 querySelectorAl10) 或 
querySelector0) 一 起 使 用 它们 是 不 匹配 的 。 而 且 ， 很 多 浏 唤 硕 会 拒绝 返 
人 因为 这 会 泄露 用 户 的 浏览 历史 
记录 。 


所 有 当前 的 浏览 器 都 支持 querySelector() 和 querySelectorAll() 方 法 。 但 是 
注意 ， 这 些 方法 的 规范 并 不 要 求 支持 CSS3 选 择 器 : 鼓励 浏览 融 文 持 和 
在 样式 表 中 一 样 的 选择 器 集合 。 当 前 的 浏 硕 露 除了 正 都 文 持 CSS3 选 择 
器 。 了 IE 7 和 8 支持 CSS2 选 择 器 。 (期 望 IE 9 能 支持 CSS3 选 择 器 。) 


querySelectorAl110 是 终极 的 选取 元 素 的 方法 : 它 是 一 种 非常 强大 的 技 
术 ， 通 过 它 客户 端 JavaScript 程 序 能 够 选择 它们 想 要 操作 的 元 素 。 邓 运 
的 是 ， 甚 至 在 没有 querySelectorAll0 的 原生 支持 的 浏览 器 中 也 可 以 使 用 
CSS 选 择 器 。jQuery 库 〈 见 第 19 章 ) 使 用 这 种 基于 CSS 选 择 器 的 查询 作 
为 它 的 核心 编程 范式 。 基 于 jQuery 的 Web 应 用 程序 使 用 一 个 轻便 的 、 跨 
浏 唤 器 的 、 和 querySelectorAl0 等 效 的 方法 ， 命 名 为 $0。 


jQuery 的 CS S 选 择 器 匹配 代码 已 经 作为 一 个 独立 的 标准 库 提出 来 并 发 布 
了 ， 命 名 为 Sizzle。 它 已 经 被 Dojo 和 其 他 一 些 客户 端 库 所 采纳 中。 使 用 
一 个 类 似 Sizzle 的 库 (或 一 个 包含 Sizzle 的 库 ) 的 好 处 就 是 在 老式 浏览 
妖 中 选取 元 素 也 能 正常 工作 ， 并 保证 一 个 基准 的 选择 句 集 合 在 所 有 的 
浏 硕 需 中 都 能 运行 。 


15.2.6 document.alll| 


在 DOM 标 准 化 之 前 ，IE 43| 入 了 document.all[] 集 合 来 表示 所 有 文档 中 
的 元 素 (除了 Text 节 点 ) 。document.all[] 已 经 被 标准 的 方法 (如 
getElementBylId() 和 getElementsByTagName()) 等 所 取代 ， 现 在 已 经 废弃 
不 应 该 再 使 用 了 。 但 是 ， 在 引入 之 时 它 是 革命 性 的 ， 它 在 以 各 种 方式 
使 用 的 已 有 代码 中 仍然 可 以 看 到 : 


document .al1[9]// 文 档 中 第 一 个 元 素 


document .all["navbar"]//id 或 name 为 "navbar" 的 元 素 (或 多 个 元 素 ) 


document .all.navbar// 同 上 


document .all.tags("div")// 文 档 中 所 有 的 <div>> 元 素 


document .all.tags("p")[90]// 文 档 中 第 一 个 <p>> 元 素 


15.3 ”文档 结构 和 遍历 


一 旦 从 文档 中 选取 了 一 个 元 素 ， 有 时 需要 查找 文档 中 与 之 在 结构 上 相 
关 的 部 分 〈 父 亲 、 兄 弟 和 子女 ) 。 文 档 从 概念 上 可 以 看 做 是 一 棵 节点 
对 象 树 ， 如 图 15-1 所 示 。 节 点 类 型 定义 了 遍历 该 树 所 需 的 属性 ， 我 们 将 
在 广 15.3.1 中 介绍 。 男 一 个 API 人 允许 文 档 作 为 元 素 对 象 树 来 人 遍历 。15.3.2 
节 介 绍 这 个 新 的 (通常 也 更 容易 使 用 的 ) API。 


15.3.1 ”作为 节点 树 的 文档 


Document 对 象 、 它 的 Element 对 象 和 文档 中 表示 文本 的 Text 对 象 都 是 
Node 对 象 。Node 定 义 了 以 下 重要 的 属性 : 


parentNode 


该 节点 的 父 节 点 ， 或 者 针对 类 似 Document 对 象 应 该 是 null， 因 为 它 没有 


区 


父 届 点 。 
childNodes 


只 读 的 类 数组 对 象 (NodeList 对 象 ) ， 它 是 该 节点 的 子 节 点 的 实时 表 
不 2? 


firstChild 、 lastChild 


该 和 点 的 子 世 点 中 的 第 一 个 和 最 后 一 个 ， 如 果 该 所 点 没有 子 和 点 则 为 
null ° 


nextSibling ~ previoursSibling 


该 节点 的 兄弟 节点 中 的 前 一 个 和 下 一 个 。 具 有 相同 父 节 点 的 两 个 节点 
为 兄 第 节点 。 市 点 的 顺序 反映 了 它们 在 文档 中 出 现 的 顺序 。 这 两 个 属 
性 将 节点 之 间 以 双向 链表 的 形式 连接 起 来 。 


nodeType 


该 节操 的 类 型 。9 代 表 Document 廊 点 ，1 代 表 lement 太 点 ，3 代 表 Text 闻 
点 ，8 代 表 CommentT 点 ，11 代 表 DocumentFragmentT 点 。 


nodeValue 

Text 广 点 或 Comment 闻 点 的 文本 内 容 。 
nodeName 

元 素 的 标签 名 ， 以 大 写 形式 表示 。 


使 用 这 些 Node 属 性 ， 可 以 用 以 下 类 似 的 表达 式 得 到 文档 的 第 一 个 于 市 
点 下 面 的 第 二 个 子 市 点 的 引用 : 


document.childNodes[0].childNodes[1] 


document .firstChild.firstcChild,.nextSibling 


假设 上 述 提 到 的 文档 代码 如 下 : 


<html><head> <title>Test</title></head> <body>Hello World!</body> </html> 


那么 第 一 个 子 节 点 下 面 的 第 二 个 子 太 点 束 是 <body> 元 素 ， 它 的 
nodeType 为 1，nodeName 为 "BODY"。 


但 请 注意 ， 该 API 对 文档 文本 的 变化 及 其 敏感 。 例 如 ， 如 有 果 修 改 了 文 
档 ， 在 <html> 和 <head> 标 签 之 间 插入 一 个 新 行 ， 那 么 表示 该 独行 的 
Text 广 所 束 是 文档 的 第 一 个 于 证 点 下 面 的 第 一 个 于 市 各 ， 并 且 <head> 
元 素 束 是 第 二 个 子 世 点 而 不 是 <body> 元 素 了 。 


15.3.2 ”作为 元 素 树 的 文档 


当 将 主要 的 兴趣 点 集中 在 文档 中 的 元 素 上 而 非 它 们 之 间 的 文本 《和 它 
们 之 则 的 空白 ) 上 时 ， 我 们 可 以 使 用 另外 一 个 更 有 用 的 API。 它 将 文档 
看 做 是 Element 对 象 树 ， 名 略 部 分 文档 : Text 和 Comment 节 点 。 


该 API 的 第 一 部 分 是 Eleament 对 象 的 children 必 性。 类似 ChildNodes， 它 
也 是 一 个 NodeList 对 象 ， 但 不 同 的 是 children 列 表 只 包含 Element 对 象 。 
children 并 非 标 准 属性 ， 但 是 它 在 所 有 当前 的 浏览 姻 中 都 能 工作 。IE 已 
经 实现 有 一 段 很 长 的 时 间 了 ， 其 他 大 多 数 浏 览 絮 也 已 如 法 炮制 。 最 后 
采纳 它 的 主流 浏览 右 是 Firefox 3.5。 


注意 ，Text 和 CommentT 点 没有 children 属 性 ， 它 意味 着 上 述 
Node.parentNode 属 性 不 可 能 返回 Text 或 Comment 节 点。 任何 Element 的 
parentNode 总 是 另 一 个 Element， 或 者 追 济 到 树 根 的 Document 或 
DocumentFragment 人 点 。 


基于 元 素 的 文档 退 历 API 的 第 二 部 分 是 Element 属 性 ， 后 阁 类 似 Node 对 
象 的 子 属性 和 兄弟 属性 : 


firstElementChild,lastElementChild 


类 似 firstChild 和 和 lastChild， 但 只 代表 子 Element 。 
nextElementSibling,previousElementSibling 

类 似 nextSibling 和 previousSibling， 但 只 代表 兄 第 Element。 
childElementCount 

子 元 系 的 数量 。 返 回 的 值 和 children.length 值 相等 。 


子 元 素 和 兄弟 元 素 的 属性 是 标准 属性 ， 并 在 除了 IE 和 之 外 的 浏览 器 中 
都 已 实现 。 


由 于 逐个 元 素 的 文档 抽 历 的 API 并 未 完全 标准 化 ， 我 们 仍然 可 以 通过 像 
例 15-2 中 可 移植 的 过 历久 数 那样 来 实现 这 种 功能 : 


例 15-2: 可 移植 的 文档 刀 历 函数 


* 返 回 元 素 e 的 第 n 层 祖先 元 素 ， 如 果 不 存在 此 类 祖先 或 祖先 不 是 Element， 


* (例如 Document 或 者 DocumentFragment) 则 返回 null 


* 如 果 n 为 9， 则 返回 e 本 身 。 如 果 n 为 1 (或 省 略 ) ， 则 返回 其 父 元 素 


* 如 果 n 为 2， 则 返回 其 祖父 元 素 ， 依 次 类 推 


*/ 


function parent(e,n){ 


if(n===undefined)n=1; 


while(n--&&e)e=e.parentNode; 


if(!el|le.nodeType!==1)return null,; 


return e; 
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* 返 回 元 素 e 的 第 n 个 兄 


率 
Hl 


* 如果 n 为 正 ， 返 回 后 续 的 第 n 个 兄弟 元 素 


* 如 果 n 为 负 ， 返 回 前 面 的 第 n 个 兄弟 元 素 


ba 


* 如 果 n 为 零 ， 返 回 e 本 身 


的 


function sibling(e,n){ 


while(e 义 &n1==0){// 如 果 e 未 定义 ， 即 刻 返 


C 


if(n>>0){// 查 找 后 续 的 兄弟 元 素 


if(e.nextElementSibling)e=e.nextElementSibling; 


elsef 


for(e=e.nextSibling;e&&e.nodeType!==1;e=e.nextSibling)/* 空 循环 */，; 


else{// 查 找 前 面 的 兄弟 元 素 


if(e.previousElementSibing)e=e.previousElementSibling; 


elsef 


for(e=e.previousSibling;e&S&e.nodeType!==1;e=e.previousSib1ing)/v* 空 循环 */ 


n+ 十 


return e; 


下 


* 返 回 元 素 e 的 第 n 代 子 元 素 ， 如 果 不 存在 则 为 null 


* 负 值 n 代 表 从 后 往 前 计数 。0 表 示 第 一 个 子 元 素 ， 而 -1 代表 最 后 一 个 ，-2 代 表 倒 数 第 二 个 ， 依 次 类 推 


*/ 


function child(e,n)t{ 


if(e.children){// 如 果 children 数 组 存在 


if(n<0)n+=e.children.length;// 转 换 负 的 n 为 数组 索引 


if(n<0)return null;// 如 果 它 仍然 为 负 ， 说 明 没 有 子 元 素 


return e.children[n];// 返 回 指定 的 子 元 素 


Ls 


// 如 果 e 没 有 children 数 组 ， 找 到 第 一 个 子 元 素 并 向 前 数 ， 或 找到 最 后 一 个 子 元 素 并 往 回 数 


if(n>=0){//n 非 负 : 从 第 一 个 子 元 素 向 前 数 


// 找 到 元 素 e 的 第 一 个 子 元 素 


if(e.firstElementChild)e=e.firstElementChild; 


elsef 


for(e=e.firstChild;e&&e.nodeType!==1;e=e.nextSibling)/* 空 循环 */，; 


return sibling(e,n);// 返 回 第 一 个 子 元 素 的 第 n 个 兄弟 元 素 


else{//n 为 负 ， 从 最 后 一 个 子 元 素 往 回 数 


if(e.lastElementChild)e=e.lastElementChild; 


elsef 


for(e=e.lastchild;e&&e.nodeType!==1;e=e.previousSibling)/* 空 循环 */，; 


yl 
中 


return sibling(e,n+1);//+1 来 转化 最 后 1 个 子 元 素 为 最 后 1 个 兄 并 


自 定义 Element 的 方法 


所 有 当前 的 浏览 器 (包含 下 8， 除 了 IE 7 及 其 更 早 的 版 本 ) 都 实现 了 
DOM， 故 类 似 Element 和 HTMLDocument il- 等 类 型 都 像 String 和 Array 一 
样 是 类 。 它 们 不 是 构造 范 数 〈 将 在 本 章 后 面 看 到 如 何 创 建新 的 Element 
对 象 ) ， 但 它们 有 原型 对 象 ， 可 以 用 自 定 义 方法 扩展 它 : 


EJLement .prototype.next=function( ){ 


if(this.nextElementSibling)return this.nextElementSibling;var sib=this.nextSibling; 


while(sib&&sib.nodeType!==1)sib=sib.nextSibling;return sib; 


}; 


Au 函数 并 没有 定义 为 Element 的 方法 是 因为 这 种 技术 在 正 7 中 不 
寺 。 


尽管 如 此 ， 如 果 和 希望 将 正 专 有 的 特性 在 除了 正之 外 的 其 他 浏览 右 中 得 
以 实现 ， 这 种 扩展 DOM 类 型 的 能 力 是 非常 有 用 的 。 从 上 面 注意 到 ， 
Element 的 非 标 准 children 必 性 由 下 首先 引入 ， 并 已 经 被 其 他 浏 贤 右 所 采 
。 类 似 Firefox 3.0 不 文 持 它 的 浏 斋 邵 中 可 以 使 用 以 下 代码 模拟 此 属 


// 在 不 包含 此 


TE 


性 的 非 TE 浏 览 器 中 模拟 Element .children 属 性 


测 


// 注 意 ， 返 回 值 为 静态 数组 ， 而 不 是 实时 的 NodeList 对 象 


if(!document .documentElement .children){ 
Element.prototype. defineGetter ("children", function()f 

var kids=[]; 

for(var c=this.firstChild;cl=null;c=c.nextsibling) 

if(c.nodeType===1)kids.push(c); 

return kids; 

}); 

} 

defineGetter “方法 (在 6.7.1 广 中 介绍 ) 完全 是 非 标准 的 ， 但 它 用 来 
移植 类 似 的 代码 非常 完 

15.4 属性 

HTML 元 素 由 一 个 标签 和 一 组 称 为 属性 (attribute) 的 名 / 值 对 组 成 。 例 


如 ，<a> 元 素 定 义 了 一 个 超 链接 ， 它 的 href 属 性 值 作为 链接 的 目的 地 
址 。HTML 元 素 的 属性 值 在 代表 这 些 元 素 的 HIMLElement 对 象 的 属性 


(property) 中 是 可 用 的 。DOM 还 定义 了 另外 的 API 来 获取 或 设置 XML 
属性 值 和 非 标准 的 HTIML 属 性 。 详 细 信息 见 以 下 各 节 。 


15.4.1 HTML 属 性 作为 Element 的 属性 


表示 HTML 文 档 元 素 的 HTMLElement 对 象 定义 了 读 / 写 属性 ， 它 们 映射 
了 元 素 的 HTML 属 性 。HTMLElement 定 义 了 通用 的 HTTP 属 性 (如 id、 
标题 lang 和 dir) 的 属性 ， 以 及 事件 处 理 程序 属性 (如 onclick) 。 特 定 的 
Element 子 类 型 为 其 元 素 定 义 了 特定 的 属性 。 例 如 ， 查 询 一 张 图 片 的 
URL， 可 以 使 用 表示 <img> 元 素 的 HTMLElement 对 象 的 src 属 性 : 


var image=document ,getEJementById("myimage" ) ， 


var imgurl=image.src;//src 属 性 是 图 片 的 URL 


image .id==="myimage"// 判 定 要 查找 图 片 的 id 


同样 地 ， 可 以 为 一 个 <form> 元 到 设置 表单 提交 的 属性 ， 代 码 如 下 : 


var f=document .forms[0];// 文 档 中 第 一 个 <form> 


f.action="http://www.example.com/submit.php";// 设 置 提交 至 的 URL 


f.method="POST";//HTTP 请 求 类 型 


HTML 属 性 名 不 区 分 大 小 写 ， 但 JavaScript 属 性 名 则 大 小 写 敏 感 。 从 
HTMEL 属 性 名 转换 到 JavaScript 必 性 名 应 该 采用 小 写 。 但 是 ， 如 果 属 性 
名 包 舍 不止 一 个 单词 ， 则 将 除了 第 一 个 单词 以 外 的 单词 的 首 字母 大 
写 ， 例 如 : defaultChecked 和 tabIndex 。 


有 些 HTML 属 性 名 在 JavaScript 中 是 保留 字 。 对 于 这 些 属 性 ， 一 般 的 规 
则 是 为 属性 名 加 前 缀 "html"。 例 如 ，HTML 的 for 属 性 (<lable>> 元 素 ) 
在 JavaScript 中 变 为 htmlFor 属 性 。"class" 在 JavaScript 中 是 保留 字 (但 还 
未 使 用 ) ， 它 是 HTML 非 常 重要 的 class 必 性， 是 上 面 规则 的 一 个 例外 : 


在 JavaScript 代 码 中 它 变 为 className。 我 们 将 在 第 16 章 中 再 次 见 到 
className 属 性 。 


表示 HTML 属 性 的 值 通 常 是 字符 串 。 当 属性 为 布尔 值 或 数值 (例如 ，< 
input> 元 素 的 defaultChecked 和 maxLength 属 性 ) ， 属 性 也 是 布尔 值 或 数 
值 ， 而 不 是 字符 串 。 事 件 处 理 程序 属性 值 总 是 为 Function 对 象 (或 
nul) 。HTML5 规 范 定义 了 一 个 新 的 属性 (如 <input> 和 相关 元 素 的 
form 属 性 ) 用 以 将 元 素 ID 转 换 为 实际 的 Element 对 象 。 最 后 ， 任 何 
HTML 元 素 的 style 属 性 值 是 CSSStyleDeclaration 对 象 ， 而 不 是 字符 串 。 
我 们 将 在 第 16 章 中 看 到 关于 这 个 重要 属性 的 更 多 信息 。 


注意 ， 这 个 基于 属性 的 API 用 来 获取 和 设置 属性 值 ， 但 没有 定义 任何 从 
元 素 中 删除 属性 的 方法 。 奇 怪 的 是 ，delete 操 作 符 也 无 法 完成 此 目的 。 
下 一 节 摘 述 一 种 可 以 实现 此 目的 的 方法 。 


15.4.2 ”获取 和 设置 非 标准 HTML 属 性 


如 上 所 述 ，HTMLElement 和 其 子 类 型 定义 了 一 些 属性 ， 它 们 对 应 于 元 
素 的 标准 HTML 属 性 。Element 类 型 还 定义 了 getAttribute() 和 
setAttribute() 方 法 来 查询 和 设置 非 标 准 的 HTML 必 性， 也 可 用 来 查询 和 
设置 XML 文档 中 元 素 上 的 属性 。 


var image=document ,Images[0]， 


var width=parseInt(image.getAttribute("WIDTH"”) ) ， 


image.setAttribute("class", "thumbnail"); 


上 述 代码 给 出 了 这 些 方法 和 前 面 的 基于 属性 的 API 之 间 两 个 重要 的 区 
别 。 百 先 ， 属 性 值 都 被 看 做 是 字符 串 。getAttribute() 不 返回 数值 、 布 尔 
值 或 对 象 。 其 次 ， 方 法 使 用 标准 属性 名 ， 甚 至 当 这 些 名 称 为 JavaScript 
保留 字 时 也 不 例外 。 对 HTML 元 素来 说 ， 属 性 名 不 区 分 大 小 写 。 


Element 类 型 还 定义 了 两 个 相关 的 方法 ，hasAttribute0 和 
removeAttribute()， 它 们 用 来 检测 命名 属性 是 否 存 在 和 完全 删除 属性 。 
当 属 性 为 布尔 值 时 这 些 方法 特别 有 用 : 有 些 属性 (如 HTML 的 表单 元 素 


0 在 一 个 元 素 中 是 否 存 在 十 重 点 关 键 ， 而 其 值 却 无 天 紧 


如 采 操 作 包 含 来 目 其 他 命名 空间 中 属性 的 XML 文档 ， 可 以 使 用 这 4 个 方 
法 的 命名 空间 版 本 : getAttributeNS()、setAttributeNSO、 
hasAttributeNSO 和 removeAttributeNSO。 这 些 方法 需要 两 个 属性 名 字符 
串 作为 参数 ， 而 不 是 一 个 。 第 一 个 是 标识 命名 空间 的 URI， 第 二 个 通常 
是 属性 的 本 地 和 名字， 在 命名 空间 中 是 无 效 的 。 但 特别 地 ， 
setAttributeNS() 的 第 二 个 参数 应 该 是 属性 的 有 效 名 字 ， 它 包含 命名 空间 
i 。 可 以 在 本 书 的 第 四 部 分 中 阅读 更 多 天 于 命名 空间 识别 的 属性 
和 法 o 


15.4.3 ”数据 集 属性 


有 时 候 在 HIML 元 素 上 绑 定 一 些 哲 外 的 信息 也 是 很 有 帮助 的 ， 当 
JavaScript 选 取 这 些 元 素 并 以 某 种 方式 操纵 这 些 信息 时 就 是 很 典型 的 情 
况 。 有 时 可 以 通过 给 class 属 性 添加 特殊 的 标识 符 来 完成 。 其 他 时 候 针 
对 更 复杂 的 数据 ， 客 户 端 程序 员 会 借助 使 用 非 标准 的 属性 。 如 上 所 

述 ， 可 以 使 用 getAttribute0 和 setAttribute0) 来 读 和 写 非 标准 属性 的 值 。 但 
为 此 而 付出 的 代价 是 文档 将 不 再 是 合法 有 歼 的 HIML 。 


HTML5 提 供 了 一 个 解决 方案 。 在 HTML5 文 档 中 ， 任 意 以 "data-" 为 前 级 
的 小 写 的 属性 名 字 都 是 合法 的 。 这 些 “ 数 据 集 属性 ”将 不 会 对 其 元 素 的 
表现 产生 影响 ， 它 们 定义 了 一 种 标准 的 、 附 加 额外 数据 的 方法 ， 并 不 
征 在 文档 合法 性 上 做 出 让 步 。 


HTML5 还 在 Element 对 象 上 定义 了 dataset 属 性 。 该 属性 指 代 一 个 对 象 ， 
它 的 各 个 属性 对 应 于 去 掉 前 缀 的 data- 属 性 。 因 此 dataset.x 应 该 保存 data- 
x 属性 的 值 。 带 连 字 符 的 属性 对 应 于 字 峰 命名 法 属性 名 : data-jquery-test 
属性 就 变 成 dataset.jqueryTest 属 性 。 


看 一 个 更 具体 的 例子 ， 假 设 文档 包含 如 下 标记 : 


<span class="sparkline"data-ymin="QO"data-ymax="10"> 


111223455435677421 


</span> 


火花 线 (sparkline) 是 个 小 图 案 一 一 通常 是 一 条 线 一 一 设计 用 来 在 文本 
人 9 为 了 生成 二 条 火花 线 ， 也 许可 以 同 如 下 代码 提取 上 述 dataset 
早 性 的 值 : 


// 假 设 ES5 的 Array .map( ) 方 法 (或 类 似 能 工作 的 方法 ) 有 定义 


var sparklines=document.getElementsByClassName("sparkline"); 


for(var i=0;i<sparklines.length;i++){ 


var dataset=sparklines[i].dataset,; 


var ymin=parseFloat(dataset .ymin); 


Var ymax=parseFloat(dataset .ymax); 


var data=sparklines[i].textContent.split("").map(parseFloat); 


drawSparkline(sparklines[i],ymin,ymax,data);// 该 方法 未 实现 


人 在 写 本 书 的 这 段 时 间 中 ，dataset 属 性 还 没有 在 当前 的 浏览 带 中 实现 ， 上 
述 代 码 应 该 写成 这 样 : 


var sparklines=document.getElementsByClassName("sparkline"); 
for(var i=0;i<sparklines.length;i++){ 
Var elt=sparklines[i]; 


var ymin=parseFloat(elt.getAttribute("data-ymin")); 


var ymin=parseFloat(elt.getAttribute("data-ymax")); 


Var points=elt.getAttribute("data-points"); 


Var data=elt.textContent.split("").map(parseFloat); 


drawSparkline(elt,ymin,ymax, data);// 该 方法 未 实现 


} 


注意 ，dataset 属 性 是 (或 将 是 ， 当 实现 以 后 ) 元 素 的 data- 属 性 的 实时 、 
0 Wi 一 个 属性 就 等 同 于 设置 或 移 除 对 应 元 素 
Jdata- 属 性 。 


上 壕 例 子 中 的 drawSparkline() 函 数 是 虚构 的 ， 但 例 21-13 给 出 了 用 < 
canvas> 元 于 绘 制 类 似 火花 线 的 标记 代码 。 


15.4.4 ”作为 Attr 节 点 的 属性 


还 有 一 种 使 用 Element 的 属性 的 方法 。Node 类 型 定义 了 attributes 属 性 。 
针对 非 Element 对 象 的 任何 节点 ， 该 属性 为 null。 对 于 Element 对 象 ， 
attributes 属 性 是 只 读 的 类 数组 对 象 ， 它 代表 元 素 的 所 有 属性 。 类 似 
NodeLists，attributes 对 象 也 是 实时 的 。 它 可 以 用 数字 索引 访问 ， 这 意味 
着 可 以 枚 举 元 素 的 所 有 属性 。 并 且 ， 它 也 可 以 用 属性 名 索引 : 


document .body ,attributes[0]//<body> 元 素 的 第 一 个 属性 


4 


[还 


document .body.attributes.bgcolor//<body> 元 素 的 bgcolor 属 性 


[还 


document .body .attributes["ONLOAD"]//<body> 元 素 的 onLload 属 性 


当 索 引 attributes 对 象 时 得 到 的 值 是 Attr 对 象 。Attr 对 象 一 类 特殊 的 
Node， 但 从 来 不 会 像 Node 一 样 去 用 。Attr 的 name 和 value 属 性 返回 该 属 
性 的 名 字 和 值 。 


15.5 “元 素 的 内 容 


再 看 一 下 图 15-1， 并 问 目 己 一 个 问题 : <p> 元 素 的 “内 容 ” 是 什么 ? 回 
答 这 个 问题 也 许 有 3 个 方法 : 


.内 容 是 HTML 字符 串 "This is a<i> simple </i> document" 。 


:内容 是 纯 文本 字符 串 "This is a simple document"。 


.内 容 是 一 个 Text 节 点 、 一 个 包含 了 一 个 Text 子 节点 的 Element 节 点 和 另 
外 一 个 Text 节 点 。 


每 一 种 回答 部 有 效 ， 并 且 各 有 和 干 秋 。 后 面 儿 市 解释 如 何 使 用 HTML 表 
示 、 纯 文本 表示 和 元 素 内 容 的 树 状 表示 。 


15.5.1 ”作为 HTML 的 元 素 内 容 


读 取 Element 的 innerHTMEL 属 性 作为 字符 串 标 记 返 回 那个 元 素 的 内 容 。 
在 元 素 上 设置 该 属性 调用 了 Web 浏 贤 絮 的 解析 器 ， 用 新 字符 串 内 容 的 解 
析 展 现形 式 蔡 换 元 素 当 前 内 容 。 (不 要 管 它 的 名 字 ， 除 了 在 HTML 元 于 
上 ，innerHTML 也 可 以 在 XML 元 素 上 使 用 。) 


Web 浏 览 器 很 擅长 解析 HTML， 通 常设 置 innerHTMIL 效率 非常 高 ， 甚 至 

在 指定 的 值 需要 解析 时 效率 也 是 相当 不 错 。 但 注意 ， 对 innerHTML 属 

ne 因为 它 既 要 序列 
坚 析 。 


innerHTML 是 在 正 4 中 引入 的 。 虽 然 所 有 的 浏览 絮 都 支持 它 已 经 有 很 长 
一 段 时 间 了 ， 但 随 着 HTML5 的 到 来 它 才 变 得 标准 化 。HTML5 说 
innerHTML 应 该 在 Document 世 点 以 及 Element 万 点 上 工作 正常 ， 但 这 还 
未 被 普遍 地 文 持 。 


HTML5 还 标准 化 了 outerHTML 属 性 。 当 查询 outerHITML 时 ， 返 回 的 
HTMEL 或 XML 标记 的 字符 串 包 含 被 查询 元 素 的 开头 和 结尾 标签 。 当 设 
置 元 素 的 outerHTML 时 ， 元 素 本 身 被 新 的 内 容 所 替换 。 只 有 ElementT 
点 定义 了 outerHTML 属性，Document 节 点 则 无 。 在 写本 书 的 这 段 时 间 
里 ，outerHTML 在 除了 Firefox 的 所 有 当前 浏览 器 中 都 支持 。 〈 见 本 章 后 
面 的 例 15-5， 基 于 innerHTML 实 现 outerHTML 。) 


IE 引 入 的 男 一 个 特性 是 insertAdjacentHTML0O 方 法 ， 它 将 在 HTML5 中 标 
准 化 ， 它 将 任意 的 HTML 标 记 字符 串 插入 到 指定 的 元 素 “ 相 邻 * 的 位 置 。 


标记 是 该 方法 的 第 二 个 参数 ， 并 且 “ 相 邻 * 的 精确 含义 依赖 于 第 一 个 参 
数 的 值 。 第 一 个 参数 为 具有 以 下 值 之 一 的 字符 

串 : "beforebegin"、"afterbegin"、"beforeend" 和 "afterend"。 这 些 值 对 应 
的 插入 点 如 图 15-3 所 示 。 


|<div id= target >|This is the element contentl</div>| 


beforebegin afterbegin beforeend afterend 


图 15-3 insertAdjacentHTML() 的 插入 点 


insertAdjacentHTML() 在 当前 版 本 的 Firefox 中 不 支持 。 本 章 后 面 的 内 
容 ， 例 15-6 展 示 了 如 何 用 innerHTML 属 性 实现 insertAdjacentHTMLO， 
也 展示 了 如 何 写 出 不 需要 一 个 字符 串 参 数 来 指定 插入 点 的 HTML 插 入 方 


法 9 
15.5.2” 帮 为 纯 文本 的 元 素 内 容 
有 了 时 需要 查询 纯 文本 形式 的 元 素 内 容 ， 或 者 在 文档 中 插入 纯 文 本 (不 


必 转 义 HTML 标 记 中 使 用 的 尖 插 号 和 改 符 号 ) 。 标 准 的 方法 是 用 Node 
的 textContent 属 性 来 实现 : 


var para=document .getElementsByTagName("p")[90];// 文 档 中 第 一 个 <p> 


var text=para.textContent;// 文 本 是 "This is a simple document." 


para.textCcontent="Hello World!1";// 修 改 段 落 内 容 


textContent 属 性 在 除了 下 的 所 有 当前 的 浏览 右 中 都 文 持 。 在 下 中， 可 以 
用 Element 的 innerText 属 性 来 代替 。 微 软 在 正 4 中 引入 了 innerText 属 性 ， 
它 在 除了 Firefox 的 所 有 当前 浏览 右 中 都 文 持 。 


textContent 和 innerText 属 性 非常 相似 ， 通 常 可 以 互相 替换 使 用 。 不 过 要 
(在 JavaScript 中 字符 串 " 是 假 值 ) 和 未 定义 的 属性 之 间 的 
xX. 别 |; 


* 一 个 参数 ， 返 回 元 素 的 textContent 或 innerText 


* 两 个 参数 ， 用 valLue 参 数 的 值 设 置 元 素 的 textContent 或 innerText 


function textContent(element,value)t{ 


var content=element.textcontent;// 检 测 textCcontent 是 否 有 定义 


if(value===undefined){// 没 传递 value， 因 此 返回 当前 文本 


if(content!==undefined)return content,; 


else return element .InnerText ， 


else{f// 传 递 了 value， 因 此 设置 文本 


if(content!==undefined)element.textContent=value; 


else element.innerText=value,; 


textContent 属 性 就 是 将 指定 元 素 的 所 有 后 代 TextP 点 简单 地 串联 在 一 
起 。innerText 没 有 一 个 明确 指定 的 行为 ， 但 是 和 textContent 有 一 些 不 
同 。innerText 不 返回 < script> 元 素 的 内 容 。 它 忽略 多 余 的 空 日 ， 并 试 


图 保留 表格 格式 。 同 时 ，innerText 针 对 某 些 表格 元 素 (如 <table>、< 
tbody> 和 <tr>) 是 只 读 的 属性 。 


<script> 元素 中 的 文本 


内 联 的 < script> 元 素 (也 就 是 那些 没有 src 属 性 的 ) 有 一 个 text 属 性 用 
来 获取 它们 的 文本 。 济 贤 器 不 显示 <script> 元 素 的 内 容 ， 并 有 HTML 
解析 絮 忽 上 略 脚 本 中 的 尖 括 号 和 星 号 。 这 使 得 < script> 元 素 成 为 应 用 程 
序 用 来 嵌入 任意 文本 内 容 的 一 个 理想 的 地 方 。 人 简单 地 将 元 素 的 type 属 性 
设置 为 某 些 值 (如 "text/x-custom-data") ， 就 标明 了 脚本 为 不 可 执行 的 
JavaScript 人 代码。 如 果 这 样 做 ，JavaScript 解 释 器 将 包 略 该 脚本 ， 但 该 元 
素 将 仍然 存在 于 文档 树 中 ， 它 的 text 属 性 还 将 返回 数据 给 你 。 


15.5.3” 作 为 Text 节 点 的 元 素 内 容 


男 一 种 方法 处 理 元 素 的 内 容 来 是 当做 一 个 子 节 点 列表 ， 每 个 子 节 点 可 
能 有 它 自 己 的 一 组 子 节点 。 当 考虑 元 素 的 内 容 时 ， 通 常 感 兴趣 的 是 它 
的 Text 节 点。 在 XML 文档 中 ， 你 也 必须 准备 好 处 理 CDATASection 节 点 
它 是 Text 的 子 类 型 ， 代 表 了 CDATIA 段 的 内 容 。 


例 15-3 展 示 了 一 个 textContent0 函 数 ， 它 递归 地 明 历 元 素 的 子 节 点 ， 然 
后 连接 后 代 节 点 中 所 有 的 Text 节 点 的 文本 。 为 了 理解 代码 ， 回 想 一 下 
nodeValue 属 性 (定义 在 Node 类 型 中 ) ， 它 保存 Text 节 点 的 内 容 。 


例 15-3: 查找 元 素 的 后 代 中 节点 中 的 所 有 TextF 点 


// 返 回 元 素 e 的 纯 文 本 内 容 ， 递 归 进 入 其 子 元 素 


// 该 方法 的 效果 类 似 于 textcontent 属 性 


function textContent(e){ 


var child, type,s="";//s 保 存 所 有 子 节 点 的 文本 


for(child=e.firstChild;child!=null;child=child.nextSibling){ 


type=child.nodeType; 


if(type===3| |type===4)//Text 和 CDATASection 节 点 


s+=child.nodeValue; 


else if(type===1)// 递 归 Element 节 点 


S+=textContent(child)， 


return s; 


nodeValue 属 性 可 以 读 / 写 ， 设置 它 可 以 改变 Text 或 CDATASection 廊 点 所 

显示 的 内 容 。Text 和 CDATASection 都 是 CharacterData 的 子 类 型 ， 可 以 在 

第 四 部 分 查看 相关 信息 。CharacterData 定 义 了 data 属 性 ， 它 和 nodeValue 

， 5 同 。 以 下 函数 通过 设置 data 属 性 将 Text 记 点 的 内 容 转换 成 大 写 
区 工 \: 


// 递 归 地 把 n 的 后 代 子 节点 中 的 所 有 Text 市 点 内 容 转换 为 大 写 形式 


function upcase(n){ 


if(n.nodeType==3| |n.nodeTyep==4)// 如 果 n 是 Text 或 CDATA 节 点 


n.data=n.data.toUpperCase( );//.… 转 换 为 大 写 


else// 和 否则 ， 递 归 进 入 其 子 节 点 


for(var i=0;i<n.childNodes.length;i++) 


upcase(n.childNodes[i]); 


CharacterData 还 定义 了 一 些 在 Text 或 CDATASection 广 点 中 不 太 和 常用 的 方 
法 来 添加 、 删 除 、 插 入 和 替换 文本 。 除 了 修改 已 存在 Text 世 点 的 内 容 ， 
还 可 以 在 Element 中 插入 全 新 的 Text 节 点 或 用 新 Text 节 点 来 替 换 已 有 节 
点 。 创 建 、 插 入 和 删除 节点 就 是 下 一 节 的 主题 。 


15.6 创建、 揪 入 和 删除 和 点 


我 们 已 经 看 到 用 HIML 和 纯 文本 字符 串 如 何 来 查询 和 修改 文档 内 容 ， 也 
已 经 看 到 我 们 能 够 遍历 Document 来 检查 组 成 Document 有 的 每 个 Element 和 
Text 廊 点。 在 每 个 节点 级 别 修改 文档 也 是 有 可 能 的 。Document 类 型 定 
义 了 创建 Element 和 Text 对 象 的 方法 ，Node 类 型 定义 了 在 节点 树 中 插 

入 、 删 除 和 替换 的 方法 。 例 13-4 展 示 了 节点 的 创建 和 插入 ， 这 里 复制 了 
这 个 简短 的 示例 : 


// 从 指定 的 URL， 异 步 加 载 和 执行 脚本 


function loadasync(url){ 


var head=document .getElementsByTagName ("head")[0];// 查 找 文档 的 <head> 标 签 


var s=document.createElement ("script");// 创 建 一 个 <script>> 元 素 


Ss .Src=url;// 设 置 它 的 src 属 性 值 


head.appendchild(s);// 将 该 <script>> 插 入 到 head 中 


} 

以 下 小 节 包 含 了 节点 创建 、 播 入 和 删除 的 更 多 细节 和 具体 例子 ， 也 包 
含 在 操作 多 个 节点 时 的 一 种 捷径 : 使 用 DocumentFragment 。 

15.6.1 创建 节点 

如 以 上 代码 所 示 ， 创 建新 的 Element 节 点 可 以 使 用 Document 对 象 的 


createElement() 方 法 。 给 方法 传递 元 素 的 标签 名 : 对 HTML 文 档 来 说 该 
名 字 不 区 分 大 小 写 ， 对 XML 文档 则 区 分 大 小 写 。 


Text 节 点 用 类 似 的 方法 创建 : 
var newnode=document .createTextNode("text node content"),; 


Document 也 定义 了 一 些 其 他 的 工厂 方法 ， 如 不 经 常 使 用 的 
createComment(。 在 15.6.4 坟 中 使 用 了 createDocumentFragment() 方 法 。 
在 使 用 了 XML 命名 空间 的 文档 中 ， 可 以 使 用 createElementNSO 来 同时 指 
定 命 名 空间 的 URI 和 待 创建 的 Element 的 标签 名 字 。 


另 一 种 创建 新 文档 节点 的 方法 是 复制 已 存在 的 节点 。 每 个 节点 有 一 个 
cloneNode() 方 法 来 返回 该 节点 的 一 个 全 新 副本 。 给 方法 传递 参数 true 也 
能 够 递归 地 复制 所 有 的 后 代 世 点 ， 或 传递 参数 false 只 是 执行 一 个 浅 复 
制 。 在 除了 IE 的 其 他 浏览 器 中 ，Document 对 象 还 定义 了 一 个 类 似 的 方 
法 叫 importrNode()。 如 果 给 它 传递 男 一 个 文档 的 一 个 节点 ， 它 将 返回 一 
个 适合 本 文档 插入 的 地 点 的 副本 。 传 递 rue 作 为 第 二 个 参数 ， 该 方法 将 
递归 地 导入 所 有 的 后 代 节 点 。 


15.6.2 插入 厄 点 


一 旦 有 了 一 个 新 节点 ， 就 可 以 用 Node 的 方法 appendChild() 或 
insertBefore() 将 它 插 入 到 文档 中 。appendChild0) 是 在 需要 插入 的 Element 
世态 上 滑 用 的 ， 它 插入 指定 的 市 点 使 其 成 为 那个 节点 的 最 后 一 个 子 方 


insertBefore() 束 像 appendChild() 一 样 ， 除 了 它 接 受 两 个 参数 。 第 一 个 参 
数 束 是 待 插入 的 节点 ， 第 二 个 参数 是 已 存在 的 节点 ， 新 节点 将 插入 该 
节点 的 前 面 。 该 方法 应 该 是 在 新 廊 点 的 父 市 点 上 调用 ， 方 法 的 第 二 个 
参数 必须 是 该 父 广 点 的 子 节 点 。 如 采 传 递 null 作 为 第 二 个 参数 ， 
insertBefore() 的 行为 类 似 appendChild()， 它 将 节点 插入 在 最 后 。 


这 是 一 个 在 数字 索引 的 位 置 插 入 节点 的 简单 画 数 。 它 同时 展示 了 
appendChild0 和 insertBefore() 方 法 : 


// 将 child 节 点 插入 到 parent 中 ， 使 其 成 为 第 n 个 子 节点 


function insertAt(parent,child,n)t{ 


if(n<0||n>parent.childNodes.length)throw new Error("invalid index"); 


else if(n==parent.childNodes.1length)parent.appendchild(child); 


else parent.insertBefore(child,parent.childNodes[n]); 


如 果 调 用 appendChild() 或 insertBefore() 将 已 存在 文档 中 的 一 个 三 点 再 次 
搬入， 那个 方 点 将 目 动 从 它 当 前 的 位 置 删 除 并 在 新 的 位 置 重新 搬入 : 
没有 必要 显 式 删除 该 节点 。 例 15-4 展 示 了 一 个 函数 ， 基 于 表格 指定 列 中 
单元 格 的 值 来 进行 行 排序 。 它 没有 创建 任何 新 的 节点 ， 只 是 用 
appendChild() 来 改变 已 存在 节点 的 顺序 有 里 了 。 


例 15-4: 表格 的 行 排序 


// 根 据 指定 表格 每 行 第 n 个 单元 格 的 值 ， 对 第 一 个 <tbody> 中 的 行进 行 排序 


// 如 果 存 在 comparator 范 数 则 使 用 它 ， 否 则 按 字 母 表 顺 序 比 较 


function sortrows(table,n,comparator)t{ 


var tbody=table.tBodies[0];// 第 一 个 <tbody>， 可 能 是 隐 式 创建 的 


var rows=tbody.getElementsByTagName("tr");//tbody 中 的 所 有 行 


rows=Array.prototype.slice.call(rows,0);// 真 实数 组 中 的 快照 


// 基 于 第 n 个 <td> 元 素 的 值 对 行 排序 


rows.sort(function(row1,row2){ 


var cell1=row1.getElementsByTagName("td")[n];// 获 得 第 n 个 单元 格 


var cell12=row2.,getElementsByTagName("td")[n];// 两 行 都 是 


var val1=cell1.textContent||cell1.innerText;// 获 得 文本 内 容 


var val2=cel12.,textContent||cell2.innerText;// 两 单元 格 都 是 


if(comparator)return comparator(val1,val2);// 进 行 比较 


if(vali<val2)return-1; 


else if(vali>val2)return 1; 


else return 0; 


});// 在 tbody 中 按 它们 的 顺序 把 行 添加 到 最 后 


// 这 将 自动 把 它们 从 当前 位 置 移 走 ， 故 没 必要 预先 删除 它们 


// 如 果 <tbody> 还 包含 了 除了 <tr> 的 任何 其 他 元 素 ， 这 些 节点 将 会 巧 浮 到 顶部 位 置 


for(var i=0;i<rows.length;i++)tbody.appendchild(rows[i]); 


// 查 找 表 格 的 <th> 元 素 (假设 只 有 一 行 ) ， 让 它们 可 单 


PH 
EN 


// 以 便 单 击 列 标题 ， 按 该 列 对 行 排序 


function makeSortable(table){ 


var headers=table.getElementsByTagName("th"); 


for(var i=0;i<headers.length;i++){ 


(function(n){// 柑 套 画 数 来 创建 本 地 作用 域 


headers[i].onclick=function(){sortrows(table,n);}; 


} (并 ) ) ;// 将 i 的 值 赋 给 局 部 变量 n 


15.6.3 ”删除 和 替换 节点 


removeChild(0) 方 法 是 从 文档 树 中 删除 一 个 节点。 但 是 请 小 心 : 该 方法 
不 是 在 待 删 除 的 节点 上 调用 ， 而 是 (就 像 其 名 字 的 一 部 分 "child" 所 上 暗示 
的 一 样 ， 在 其 父 节 点 上 调用 。 在 父 节 点 上 调用 该 方法 ， 并 将 需要 删除 
的 子 方 扩 作为 方法 参数 传递 给 它 。 在 文档 中 删除 n 市 点 ， 代 码 可 以 这 样 
三 


n.parentNode.removeChild(n); 


Be 在 父 贡 
旦 上 滑 几 该 方法 ， 第 一 个 参数 是 新 节点 ， 第 二 个 参数 是 需要 代 奉 的 市 
点 。 例 如 ， 用 一 个 文本 字 符 串 来 蔡 换 节 扣 m 代码 可 以 这 样 写 : 


n.parentNode.replaceChild(document.createTextNode("[REDACTED]"),n); 


以 下 函数 展示 了 replaceChild0 的 另 一 种 用 法 : 


// 


和 > 


新 的 <b>> 元 素 若 换 n 节 点 ， 并 使 成 为 该 元 素 的 子 广 点 


function embolden(n){// 假 如 参数 为 字符 串 而 不 是 节点 ， 将 其 当做 元 素 的 id 


if(typeof n=="string")n=document.getElementById(n); 


旦 


var parent=n.parentNode;// 获 得 n 的 父 节点 


var b=document .createElement("b");// 创 建 一 个 <b>> 元 素 


parent.replacechild(b,n);// 用 该 <b> 元 素 替 换 节点 n 


b.appendCchild(n);// 使 n 成 为 <b> 元 素 的 子 节点 


15.5.1 节 介 绍 过 元 素 的 outerHTML 属性， 也 解释 过 在 当前 版 本 的 
Firefox 中 还 未 实现 它 。 例 15-5 展 示 了 在 Firefox 中 (和 其 他 任何 支持 
innerHTML 的 浏览 器 ， 要 有 一 个 可 扩展 的 Element.prototype 对 象 ， 还 要 
有 一 些 方法 来 定义 属性 的 getter 和 setter) 如 何 来 实现 该 属性 。 同 时 代码 
也 展示 了 removeChild0 和 cloneNode0) 方 法 的 实际 用 法 。 


例 15-5: 使 用 innerHTMEL 实 现 outerHTML 属性 


en 
[之 


// 为 那些 不 支持 它 的 浏览 器 实现 outerHTML 属 性 


// 假 设 浏览 器 确实 支持 innerHTML， 并 有 个 可 扩展 的 Element .prototype， 


// 可 以 定义 getter 和 setter 


(function(){// 如 果 outerHTML 存 在 ， 则 直接 返 臣 


if(document.createElement ("div").outerHTML)return;// 返 回 this 所 引用 元 素 的 外 部 HTML 


function outerHTMLGetter(){ 


var container=document .createElement ("div");// 虚 拟 元 素 


container .appendChild(this.cloneNode(true));// 复 制 到 该 虚拟 节点 


return container.innerHTML;// 返 回 虚 拟 节点 的 jnnerHTML 


4 


SS 


指定 的 值 设置 元 素 的 外 部 HTML 


function outerHTMLSetter(value){// 创 建 一 个 虚拟 元 素 ， 设 置 其 内 容 为 指定 的 值 


Var container=document ,createElement("div")， 


UD 


container .innerHTML=value;// 将 虚拟 元 素 中 的 节点 全 部 移动 到 文档 


while(container.firstchild)// 循 环 ， 


到 container 没 有 


子 节点 为 止 
this.parentNode.insertBefore(container .firstchild, this);// 删 除 所 被 取代 的 节点 
this.parentNode.removeChild(this); 


// 现 在 但 


入 


这 两 个 


名 


SS 


数 作 为 所 有 Element 对 象 的 outerHTML 


// 如 果 它 存在 则 


属性 的 get ter 和 setter 


ES5 昌 


地 


// 和 否则 ， 退 而 求 


并 
尝 


Object .defineProperty() 方 法 ， 


_defineGetter () 和 _defineSetter_() 
if(Object.defineProperty){ 


Object.defineproperty(Element.prototype,"outerHTML",{ 
get:outerHTMLGetter, 


set:outerHTMLSetter, 


enumerable:false,configurable:true 


}); 
elsef 


Element.prototype. defineGetter ("outerHTML",outerHTMLGetter ) ; 


}()); 


Element.prototype._ defineSsetter_ ("outerHTML",outerHTMLSetter); 
} 


15.6.4 ”使 用 DocumentFragment 


DocumentFragment 是 一 种 特殊 的 Node， 它 作为 其 他 世 扣 的 一 个 临时 的 
容器 。 像 这 样 创建 一 个 DocumentFragment: 


var frag=document .createDocumentFragment() ， 


像 Document 后 点 一 样 ，DocumentFragment 是 独立 的 ， 而 不 是 任何 其 他 
文档 的 一 部 分 。 它 的 parentNode 总 是 为 null。 但 类 似 Element， 它 可 以 有 
任意 多 的 子 节点 ， 可 以 用 appendChild()、insertBefore() 等 方法 来 操作 它 
ik 


ee 于 它 使 得 一 组 节点 被 当做 一 个 节点 看 
如 果 给 appendChild()、insertBefore() 或 replaceChild() 传 递 一 个 

0 其 实 是 将 该 文档 片段 的 所 有 子 节 点 插入 到 文档 

中 ， 而 非 片段 本 刁 。 (文档 厂 段 的 子 凶 点 从 片段 移动 到 文档 中 ， 文 档 

. 人 0 。) 以 下 函数 使 用 DocumentFragment 来 倒序 排列 一 
记忆 世 点 


// 倒 序 排列 节点 n 的 子 节点 


function reverse(n){// 创 建 一 个 DocumentFragment 作 为 临时 容器 


var f=document ,createDocumentFragment();// 从 后 至 前 循环 子 节点 ， 将 每 一 个 子 节 点 移动 到 文档 片段 中 


/Vn 的 最 后 一 个 节点 变 成 f 的 第 一 个 节点 ， 反 之 亦 然 


// 注 意 ， 给 f 添 加 一 个 节点 ， 该 节点 自动 地 会 从 n 中 删除 


while(n.lastchild)f.appendChild(n.lastchild);// 最 后 ， 把 f 的 所 有 子 节点 一 次 性 全 部 移 回 n 中 


n.appendchild(f); 


} 


例 15-6 使 用 innerHTML 属 osname 
insertAdjacentHTMIL0O 方 法 ( 见 15.5.1 节 ) 。 它 还 定义 一 些 名 字 更 符合 逻 


辑 的 HTML 插 入 函数 ， 可 以 蔡 换 让 人 迷惑 的 insertAdjacentHTMLOAPI。 
内 部 工具 函数 fragment() 可 能 是 代码 中 最 有 用 的 部 分 ， 它 返回 一 个 对 指 
定 HTML 字 符 串 文本 进行 解析 后 的 DocumentFragment 。 


例 15-6: 使 用 innerHTML 实 现 insertAdjacentHTML() 


// 本 模块 为 不 支持 它 的 浏览 器 定义 了 Element .insertAdjacentHTML 


// 还 定义 了 一 些 可 移植 的 HTML 插 入 函数 ， 它 们 的 名 字 比 ijnsertAdjacentHTML 更 符合 逻辑 : 


//Insert.before()、Insert.after()、Insert.atstart() 和 Insert.atEnd() 


var Insert=(function(){// 如 果 元 素 有 原生 的 ijnsertAdjacentHTML， 


// 在 4 个 函数 名 更 明了 的 HTML 插 入 函数 中 使 用 它 


if(document.createElement("div").insertAdjacentHTML){ 


return{ 


before:function(e,nh)t{e.insertAdjacentHTML("beforebegin",h);}, 


after:function(e,h)t{e.insertAdjacentHTML("afterend",h);}, 


atstart:function(e,h)t{e.insertAdjacentHTML("afterbegin",h);}, 


atEnd:function(e,h)t{e.insertAdjacentHTML("beforeend",h);} 


// 否 则 ， 无 原生 的 ijnsertAdjacentHTML 


// 实 现 同样 的 4 个 播 入 画 数 ， 并 使 用 它们 来 定义 insertAdjacentHTML 


// 首 先 ， 定 义 一 个 工具 函数 ， 传 入 HTML 字 符 串 ， 返 回 一 个 DocumentFragment， 


// 它 包含 了 解析 后 的 HTML 的 表示 


function fragment (html)f{ 


var frag=document.createDocumentFragment();// 创 建 空 文档 片段 


elt .innerHTML=html;// 设 置 元素 内 容 


while(elt.firstchild)// 移 动 所 有 的 节点 


frag.appendchild(elt.firstchild);// 人 elt 到 frag 


return frag;// 然 后 返回 frag 


var Insert={ 


before:function(elt,html)t{ 


elt.parentNode.insertBefore(fragment (htm]l),elt); 


}, 


after:function(elt,htm1){ 


elt.parentNode.insertBefore(fragment(html),elt.nextSibling); 


}, 


atstart:function(elt,html)f{ 


elt.insertBefore(fragment(html),elt.firstchild); 


}, 


atEnd:function(elt,html){elt.appendchild(fragment (html));} 


};// 基 于 以 上 函数 实现 insertAdjacentHTML 


Element .prototype.insertAdjacentHTML=function(pos,html1){ 


switch(pos.toLowerCase())t{ 


case"beforebegin":return Insert.before(this,html); 


case"afterend":return Insert.after(this,html); 


case"afterbegin":return Insert.atstart(this,htm]l); 


case"beforeend":return Insert.atEnd(this,html); 


}; 


return Insert;// 最 后 返回 4 个 插入 函数 


}()); 


15.7 例子 ， 生成 目录 表 


例 15-7 说 明了 如 何 为 文档 动态 地 创建 一 个 目录 表 。 它 展示 了 上 一 市 所 描 
述 的 文档 脚本 化 的 很 多 概念 : 元 素 选 取 、 文档 通 历 、 元 素 属性 设置 、 
innerHTML 属 性 设置 和 在 文档 中 创建 与 插入 新 世 点 等 。 本 例 注释 详 
尽 ， 理 解 代 码 应 该 不 会 有 问题 。 


例 15-7: 一 个 自动 生成 的 目录 表 


* 这 个 模块 注册 一 个 可 在 页 面 加 载 完 成 后 自动 运行 的 匿名 画 数 。 当 执行 这 个 函数 时 会 去 文档 中 查找 


*id 为 "TOC" 的 元 素 。 如 果 这 个 元 素 不 存在 ， 就 创建 一 个 元 素 


* 生 成 的 TOC 目 录 应 当 具 有 自己 的 CSS 村 


式 。 整 个 目录 区 域 的 样式 className 设 置 为 "TOCEntry" 


T 


* 同 样 我 们 为 不 同 层级 的 目录 标题 定义 不 同 的 样式 。 < hi> 标 签 生成 的 标题 


已 


*className 为 "TOCLevel1"，<h2> 标 签 生 成 的 标题 className 为 "TOCLeve1l2"， 以 此 类 推 


* 段 编号 的 样式 为 "TOCSectNum" 


* 完 整 的 CSS 样 式 代码 如 下 : 


*#TOC{border:solid black 1ipx;margin:10px;padding:10px;} 


*,TOCENntry{font-family:sans-serif,;,} 


*,TOCEntry a{text-decoration:none;} 


*,TOCLeveli{font-size:16pt;font-weight:bold;} 


*,TOCLevel2{font-size:12pt;margin-left:.5in;} 


*,TOCSectNum:after{content:":";} 


* 这 段 代码 的 最 后 一 行 表示 每 个 段 编号 之 后 都 有 一 个 冒号 和 空格 符 。 要 想 隐藏 段 编 号 ， 


* 请 使 用 这 行 代码 : 


*,TOCSectNum{display:none} 


* 这 个 模块 需要 onLoad( ) 工 具 函 数 


A 


onLoad(function( ){// 匿 名 函数 定义 了 一 个 局 部 作 


// 查 找 TOC 容 器 元 素 


// 如 果 不 存在 ， 则 在 文档 开头 处 创建 一 个 


Var toc=document .getElementById("TOC"); 


if(!toc)t 


toc=document.createElement ("div"); 


toc.id="TOC",; 


域 


document .body,insertBefore(toc,document .body,.firstCchild)， 


// 查 找 所 有 的 标题 元 素 


Var headings,; 


if(document .querySelectorA11)// 我 们 是 否 能 


这 个 简单 的 方法 ? 


headings=document .querySelectorAll("hi1, h2,h3,h4,nhs5,h6e"); 


else// 否 则 ， 查 找 方法 稍微 麻烦 一 些 


headings=findHeadings(document.body,[]);// 递 归 遍历 document 的 body， 查 找 标题 元 素 


function findHeadings(root, sects){ 


for(var c=root.firstchild;c!=null;c=c.nextSibling)t{ 


if(c.nodeType!==1)continue,; 


if(c.tagName.1length==2&&c.tagName.charAt(0)=="H") 


sects.push(c); 


else 


findHeadings(c, sects); 


return sects; 


// 初 始 化 一 个 数组 来 保持 跟踪 章节 号 


var sectionNumbers=[9,9,9,9,9,0];// 现 在 ， 循 环 已 找到 的 标题 元 素 


for(var h=0;h<headings.length;h++)f{ 


var heading=headings[h];// 跳 过 在 TOC 容 器 中 的 标题 元 素 


if(heading.parentNode==toc)continue;// 判 定 标 题 的 级 别 


Var level=parseInt(heading.tagName.charAt(1)); 


if(isNaN(level)||level<1||level>6)continue;// 对 于 该 标题 级 别 增加 sectionNumbers 对 应 的 数字 


// 重 置 所 有 标题 比 它 级 别 低 的 数字 为 夫 


鲍 


sectionNumbers[level-1]++; 


HT 


for(var i=level;i<6;i++)sectionNumbers[i]=0;// 现 在 ， 将 所 有 标题 级 别 的 章节 号 组 合 产 和 9 


号 ， 如 2.3.1 


var sectionNumber=sectionNumbers.slice(0,level).join(".")// 为 标题 级 别 增加 章节 号 


0D 
Ee 


一 


使 得 其 可 以 用 样式 修饰 


// 把 数字 放 在 <span > 中 ， 


var span=document.createElement("span"); 


span.className="TOCSectNum"; 


span.innerHTML=sectionNumber; 


heading.insertBefore(span,heading.firstchild);// 用 命名 的 销 点 将 标题 包 起 来 ， 以 便 为 它 增加 链接 


var anchor=document.createElement("a"); 


anchor .name="TOC"+SsectionNumber; 


heading.parentNode.insertBefore(anchor,heading); 


anchor .appendCchild(heading);// 现 在 为 该 节 创 建 一 个 链接 


var link=document.createElement("a"); 


link.href="#TOC"+SectionNumber;// 链 接 的 目标 地 址 


link.innerHTML=heading .innerHTML;// 链 接 文本 与 实际 标题 一 致 


// 将 链接 放 在 一 个 div 中 ，div 用 基于 级 别名 字 的 样式 修饰 


var entry=document.createElement("div"); 


entry.className="TOCEnNntry TOCLevel"+level,; 


entry.appendCchild(1ink);// 该 div 添 加 到 TOC 容 器 中 


toc.appendchild(entry); 


}); 


15.8 文档 和 元 素 的 几何 形状 和 滚 元 


在 本 章 中 ， 到 目前 为 止 我 们 考虑 的 文档 被 看 做 是 元 素 和 文本 节点 的 抽 
象 树 。 但 是 当 浏 金 右 在 窗口 中 泻 染 文档 时 ， 它 创建 文档 的 一 个 视觉 表 
现 层 ， 在 那里 每 个 元 素 有 自己 的 位 置 和 尺寸 。 通 常 ，Web 应 用 程序 可 以 
将 文档 看 做 是 元 素 的 树 ， 并 且 不 用 关心 在 屏幕 上 这 些 元 素 钙 如 何 泻 染 


的 。 但 有 时 ， 判 定 一 个 元 素 精确 的 几 个 形状 也 是 非常 有 必要 的 。 例 
如 ， 将 在 第 16 章 中 看 到 利用 CSS 为 元 素 指定 位 置 。 如 果 想 用 CSS 动 态 定 
位 一 个 元 素 (如 工具 提示 或 插图 ) 到 有 某 个 已 经 由 浏览 器 定位 后 的 普通 
元 素 的 旁边 ， 首 先 需 要 判定 那个 元 素 的 当前 位 置 。 


本 市 阐 檬 了 在 浏览 器 窗口 中 完成 文档 的 布局 以 后 ， 怎 样 才能 在 抽象 的 
基于 树 的 文档 模型 与 几何 形状 的 基于 坐标 的 视图 之 间 来 回 变 换 。 本 市 
描述 的 属性 和 方法 已 经 在 浏览 需 中 实现 了 有 相当 长 的 一 段 时 间 了 ( 虽 
然 有 些 是 下 特有 的 ， 有 些 直到 IE 9 才 实 现 ) 。 在 写本 书 的 这 段 时 间 里 ， 
它们 通过 了 W3C 的 标准 化 流程 ， 作 为 CSSOM-View 模 块 (参见 
http://www.w3.0org/TR/cssom-view/) 。 


15.8.1 ”文档 坐标 和 视 口 坐标 


元 素 的 位 置 古 以 像素 来 度量 的 ， 向 右 代表 X 坐 标的 增加 ， 向 下 代表 Y 坐 
标的 增加 。 但 是 ， 有 两 个 不 同 的 点 作为 坐标 系 的 原点 : 元 素 的 X 和 Y 坐 
标 可 以 相对 于 文档 的 左上 角 或 者 相对 于 在 其 中 显示 文档 的 视 口 的 左上 
角 。 在 顶级 窗口 和 标签 页 中 , “ 视 口 ?只 是 实际 显示 文档 内 容 的 浏览 硕 
的 一 部 分 ， 它 不 包括 浏览 器 “外 过”( 如 菜单 、 工 具 条 和 标签 页 。 针 
对 框架 页 中 显示 的 文档 ， 视 口 是 定 义 了 框架 页 的 <iframe> 元 素 。 无 论 
在 何 种 情况 下 ， 当 讨论 元 素 的 位 置 时 ， 必 须 弄 清楚 所 使 用 的 坐标 是 文 
档 坐 标 还 是 视 口 坐标 。 《注意 ， 视 口 坐标 有 时 也 叫做 窗口 坐标 。) 


如 有 果 文 档 比 视 口 要 小 ， 或 者 说 它 还 未 出 现 深 动 ， 则 文档 的 左上 角 束 是 
视 口 的 左上 角 ， 文 档 和 视 口 坐标 系统 是 同一 个 。 但 是 ， 一 般 来 说 ， 要 
在 两 种 坐标 系 之 间 互 相 转换 ， 必 须 加 上 或 减 去 滚动 的 偶 移 量 (scrol1 
offset) 。 例 如 ， 在 文档 坐标 中 如 果 一 个 元 素 的 Y 坐 标 是 200 像 素 ， 并 且 
用 户 已 经 把 浏览 句 癌 下 滚动 75 像 素 ， 那 么 视 口 坐标 中 元 素 的 Y 坐 标 是 
125 像 素 。 同 样 ， 在 视 口 坐标 中 如 果 一 个 元 素 的 X 坐 标定 400 像 素 ， 并 且 
人 已 经 水 平和 六 动 了 视 口 200 像 素 ， 那 么 文档 坐标 中 元 素 的 X 坐 标定 600 


文档 坐标 比 视 口 坐标 更 加 基础 ， 并 且 在 用 户 滚动 时 它们 不 会 发 生变 

化 。 不 过 ， 在 客户 端 编程 中 使 用 视 口 坐标 是 非常 常见 的 。 当 使 用 CSS 指 
定 元 素 的 位 置 时 运用 了 文档 坐标 ( 见 第 16 章 ) 。 但 是 ， 最 简单 的 查询 
元 素 位 置 的 方法 〈《 见 15.8.2 节 ) 返回 视 口 坐标 中 的 位 置 。 类 似 地 ， 当 为 
人 报告 的 鼠标 指针 的 坐标 是 在 视 口 
人 I 人 水 条 1 o 


为 了 在 坐标 系 之 间 互 相 转 换 ， 我 们 需要 判定 浏 贤 絮 窗口 的 滚动 条 的 位 
置 。Window 对 象 的 pageXOffset 和 pageYOffset 属 性 在 所 有 的 浏览 器 中 提 
供 这 些 值 ， 除 了 IE 8 及 更 早 的 版 本 以 外 。 了 下 《和 所 有 现代 浏览 器 ) 也 可 
以 通过 scrollLeft 和 scrollTop 属 性 来 获得 滚动 条 的 位 置 。 令 人 迷惑 购 是 ， 
正常 情况 下 通过 查询 文档 的 根 节 点 (document.documentElement) 来 获 
取 这 些 属性 值 ， 但 在 怪异 模式 下 ( 见 13.4.4 节 ) ， 必 须 在 文档 的 <body 
> 元 素 (document.body) 上 查询 它们 。 例 15-8 显 示 了 如 何人 简便 地 查询 
滚动 条 的 位 置 。 


例 15-8: 查询 窗口 滚动 条 的 位 置 


// 以 一 个 对 象 的 x 和 y 属 性 的 方式 返回 滚动 条 的 偏 移 量 


function getScroll0ffsets(w){// 使 用 指定 的 窗口 ， 如 果 不 带 参 数 则 使 用 当前 


w=w| |window; // 除 了 IE 8 及 更 早 的 版 本 以 外 ， 其 他 浏览 器 都 能 用 


if(w.pageXoffset!=null)return{x:w.pageXoffset,y:w.pageYoffset};// 对 标准 模式 下 的 IE (或 任何 
浏览 器 ) 


var d=w.document ， 


if(document.compatMode=="CSSiCompat") 


return{x:d.documentElement.scrollLeft,y:d.documentElement .scrollTop};// 对 怪异 模式 下 的 浏 
器 


滞 


return{x:d.body.scrollLeft,y:d.body.scrollTop}; 


} 


有 了 时 能 够 判定 视 口 的 尺寸 也 是 非 党 有 用 的 一 一 例如 ， 为 了 确定 文档 的 
哪些 部 分 是 当前 可 见 的 。 利 用 深 动 偏 移 量 查询 视 口 尺寸 的 简单 方法 在 
IE 8 及 更 早 的 版 本 中 无 法 工作 ， 而 且 该 技术 在 正中 的 运行 方式 还 要 取决 
于 浏览 郁 生 处 于 怪异 模式 还 是 标准 模式 。 例 15-9 介 绍 了 如 何 简便 地 查询 
视 口 尺寸 。 注 意 ， 它 和 例 15-8 的 代码 是 如 此 相似 。 


例 15-9: 查询 窗口 的 视 口 尺寸 


// 作 为 一 个 对 象 的 x 和 h 属 


x 


生 返 回 视 口 的 尺寸 


function getViewportSize(w){// 使 用 指定 的 窗口 ， 如 果 不 带 参数 则 使 用 当前 窗 


w=w| |window; // 除 了 IE 8 及 更 早 的 版 本 以 外 ， 其 他 浏览 器 都 能 


if(w.innerwidth!=null)return{w:w.innerwidth,h:w.innerHeight};// 对 标准 模式 下 的 IE (或 任何 浏 
览 器 ) 


var d=w.document ， 


if(document.compatMode=="CSS1iCompat") 


return{w:d.documentElement.clientWwidth, 


h:d.documentElement .clientHeight};// 对 怪异 模式 下 的 浏览 器 


return{w:d.body.clientwidth,h:d.body.clientwidth}; 


} 


上 壕 两 个 例子 已 经 用 到 了 scrollLeft、scrollTop、clientWidth 和 和 
clientHeight 属 性 。 我 们 将 在 15.8.5 广 中 再 次 过 到 这 些 属 性 。 


15.8.2 和 匠 记 元 条 鸭 儿 全 凡 可 


判定 一 个 元 素 的 尺寸 和 位 置 最 简单 的 方法 是 调用 它 的 
getBoundingClientRect() 方 法 。 该 方法 是 在 IE 5 中 引入 的 ， 而 现在 当前 的 
所 有 浏 贤 絮 都 实现 了 。 它 不 需要 参数 ， 返 回 一 个 有 left、right、top 和 
bottom 属 性 的 对 象 。left 和 top 属 性 表示 元 素 的 左上 角 的 X 和 Y 坐 标 ，right 
和 bottom 属 性 表示 元 素 的 右 下 角 的 X 和 Y 坐 标 。 


这 个 方法 返回 元 素 在 视 口 坐标 中 的 位 置 。 (getBoundingClientRect() 方 
法 名 中 的 "Client" 是 一 种 间接 指 代 ， 它 就 是 Web 浏 蜗 器 客户 问 一 一 专 指 


它 定 义 的 窗口 或 视 口 。) 为 了 转化 为 甚至 用 户 滚动 浏览 器 窗口 以 后 仍 
然 有 效 的 文档 坐标 ， 需 要 加 上 深 动 的 偏 移 量 : 


var box=e.getBoundingClientRect();// 获 得 在 视 口 坐标 中 的 位 


var offsets=getScroll0ffsets();// 上 面 定 义 的 工具 函数 


var x=box.left+offsets.x;// 转 化 为 文档 坐标 


Var y=box.top+offsets.y; 


在 很 多 浏览 器 (和 W3C 标 准 ) 中 ，getBoundingClientRect0 返 回 的 对 象 
还 包含 width 和 height 属 性 ， 但 是 在 原始 的 正中 未 实现 。 为 了 人 简便 起 见 ， 
可 以 这 样 计算 元 到 的 width 和 height: 


Var box=e.getBoundingClientRect(); 
Var w=box.width||(box.right-box.left); 


Var h=box.height||(box.bottom-box.top); 


在 第 1 6 章 中 将 学 到 元 素 内 容 被 一 块 可 选 的 空白 区 域 所 包围 ， 叫 做 内 边 
距 。 内 边 距 被 边框 所 包围 ， 边 框 被 外 边 距 所 包围 。 内 边 距 、 边 框 和 外 
边 距 都 是 可 选 的 。getBoundingClientRectO 所 返回 的 坐标 包含 元 素 的 边 
框 和 内 边 距 ， 但 不 包含 元 素 的 外 边 距 。 


如 有 果 getBoundingClientRect() 方 法 名 中 的 "Client" 指 定 了 返回 的 矩形 的 坐 
标 系 ， 那 么 方法 名 中 的 "Bounding" 做 何 解 释 呢 ? 浏 哎 器 在 布局 时 块 状元 
素 (如 图 片 、 段 落 和 <div> 元素 等 ) 总 是 为 矩形 。 但 是 ， 内 联 元 素 

(如 < span>、<code> 和 <b> 等 ) 可 能 跨 了 多 行 ， 因 此 可 能 由 多 个 
矩形 组 成 。 想 象 一 下 ， 例 如 ， 一 些 被 断 成 两 行 的 斜体 文本 〈 用 <i> 和 
< > 标签 标记 的 ) 。 它 的 形状 是 由 第 一 行 的 右边 部 分 和 第 二 行 的 左边 
部 分 两 个 矩形 组 成 的 (假设 文本 顺序 是 从 左 向 右 ) 。 如 果 在 内 联 元 素 
上 调用 getBoundingClientRect0， 它 返回 “边界 矩形 ”。 对 于 如 上 搞 述 的 
<i> 元 素 ， 边 界 矩 形 会 包含 整整 两 行 的 宽度 。 


如 采 想 查询 内 联 元 素 每 个 独立 的 矩形 ， 调 用 getClientRects() 方 法 来 获得 
一 个 只 读 的 类 数组 对 象 ， 它 的 每 个 元 素 类 似 于 getBoundingClientRect0) 
返回 的 矩形 对 象 。 


我 们 已 经 见 过 如 getElementsByTagName() 这 样 的 DOM 方 法 返回 的 结 

是 “实时 的 ”， 当 文档 变化 时 这 些 结果 能 上 自动 更 新 。 但 
getBoundingClientRect() 和 getClientRects() 所 返回 的 矩形 对 象 (和 和 矩形 对 
象 列表 ) 并 不 是 实时 的 。 它 们 只 是 调用 方法 时 文档 视觉 状态 的 静态 快 
照 ， 在 用 户 滚动 或 改变 浏览 器 窗口 大 小 时 不 会 更 新 它们 。 


15.8.3 判定 元 素 在 某 点 


getBoundingClientRect0 方 法 使 我 们 能 在 视 口 中 判定 元 素 的 位 置 。 但 有 
时 我 们 想 反 过 来 ， 判 定 在 视 口 中 的 指定 位 置 上 有 什么 元 素 。 这 可 以 用 
Document 对 象 的 elementFromPointO 方 法 来 判定 。 传 递 X 和 Y 坐 标 (使 用 
视 口 坐标 而 非 文档 坐标 ) ， 该 方法 返回 在 指定 位 置 的 一 个 元 素 。 在 写 
本 书 的 这 段 时 间 里 ， 选 取 元 素 的 算法 还 未 详细 指定 ， 但 是 该 方法 的 意 
图 惑 是 它 返 回 在 那个 点 的 最 里 面 的 和 最 上 面 的 《〈 见 16.2.1 节 中 CSS 的 z- 
index 属 性 ) 元 素 。 如 果 指 定 的 点 在 视 口 以 外 ，elementFromPointO 返 回 
null， 即 使 该 点 在 转换 为 文档 坐标 后 是 完美 有 效 的 ， 返 回 值 也 一 样 。 


elementFromPoint() 方 法 看 上 去 很 有 用 ， 典 型 的 案例 是 将 鼠标 指针 的 坐 
标 传 递 给 它 来 判定 鼠标 在 哪个 元 素 上 。 但 是 ， 我 们 将 在 第 17 章 学 到 ， 
鼠标 事件 对 象 已 经 在 target 属 性 中 包含 了 这 些 信息 。 因 此 ， 实 际 上 
elementFromPoint() 丰 经常 使 用 。 


15.8.4 滚动 


例 15-8 展 示 了 如 何在 浏览 右 窗 口中 查询 滚动 条 的 位 置 。 该 例子 中 的 
scrollLeft 和 scrollTop 属 性 可 以 用 来 设置 让 浏 宽 器 深 动 ， 但 有 一 种 更 简单 
的 方法 从 JavaScript 最 早 的 时 期 开始 就 支持 的 。Window 对 和 象 的 
scrollTop0 方 法 (和 其 同义词 scroll(0)) 接受 一 个 点 的 X 和 Y 坐 标 (文档 坐 
标 ) ， 并 作为 滚动 条 的 偏 移 量 设置 它们 。 也 就 是 ， 窗 口 滚动 到 指定 的 
所 出 现在 视 口 的 左上 角 。 如 果 指 定 的 点 太 接 近 于 文档 的 下 边缘 或 右边 
绿 ， 浏 贤 絮 将 尽量 保证 它 和 视 口 的 左上 和 角 之 间 最 近 ， 但 古 无 法 达到 一 
致 。 以 下 代码 深 动 浏 贤 器 到 文档 最 下 面 的 页 面 可 见 : 


// 获 得 文档 和 视 口 的 高 度 ，offsetHeight 会 在 下 面 解释 


var documentHeight=document.documentElement .offsetHeight,; 


var viewportHeight=window.innerHeight;// 或 使 用 上 面 的 getViewportSize() 


// 然 后 ， 滚 动 让 最 后 一 页 在 视 口 中 可 见 


window.scrollTo(0,documentHeight-viewportHeight); 


Window 的 scrolBy0 方 法 和 scrol0 和 scrollTo0 类 似 ， 但 是 它 的 参数 是 相 
对 的 ， 并 在 当前 滚动 条 的 偏 移 量 上 增加 。 例 如 ， 快 速 阅读 者 可 能 会 喜 
欢 这 样 的 书签 ( 见 13.2.5 节 ) : 


// 每 200 毫 秒 向 下 滚动 10 像 素 。 注 意 ， 它 无 法 关闭 


javascript:void setIinterval(function(){scrollBy(90,10)},200); 


通 单 ， 除 了 滚动 到 文档 中 用 数字 表示 的 位 置 ， 我 们 只 是 想 它 滚动 使 得 
文档 中 的 某 个 元 素 可 见 。 可 以 利用 getBoundingClientRect() 计 算 元 素 的 
位 置 ， 并 转换 为 文档 坐标 ， 然 后 用 scrollTo0) 方 法 达到 目的 。 但 是 在 需 
要 显示 的 HTML 元 素 上 调用 scrollIntoView() 方 法 更 加 方便 。 该 方法 保证 
了 元 素 能 在 视 口 中 可 见 。 默 认 情 况 下 ， 它 试图 将 元 素 的 上 边缘 放 在 或 
尽量 接近 视 口 的 上 边缘 。 如 果 只 传递 false 作 为 参数 ， 它 将 试图 将 元 素 
的 下 边缘 放 在 或 尽量 接近 视 口 的 下 边缘 。 只 要 有 助 于 元 素 在 视 口 内 可 
见 ， 浏 贤 器 也 会 水 平 深 动 视 口 。 


scrollIntoView() 的 行为 与 设置 window.location.hash 为 一 个 命名 锁 点 (<a 
name="" 之 元素 ) 的 名 字 后 浏览 器 产生 的 行为 类 似 。 


15.8.5 “天 于 元 素 尺 寸 、 位 置 和 海 出 的 更 多 信息 
getBoundingClientRect() 方 法 在 所 有 当前 的 浏 咒 侨 上 都 有 定义 ， 但 如 果 


需要 文 持 老 式 浏 哎 器， 不 能 依靠 此 方法 而 必须 使 用 更 老 的 技术 来 判定 
元 系 的 尺寸 和 位 置 。 元 取 的 尺寸 比较 简单 :任何 HTML 元 素 的 只 读 属性 


offsetWidth 和 offsetHeight 以 CSS 像 素 返 回 它 的 屏幕 尺寸 。 返 回 的 尺寸 包 
含 元 素 的 边框 和 内 边 距 ， 除 去 了 外 边 距 。 


所 有 HTML 元 素 拥 有 offsetLeft 和 offsetTop 属 性 来 返回 元 素 的 X 和 Y 坐 

标 。 对 于 很 多 元 素 ， 这 些 值 是 文档 坐标 ， 并 直接 指定 元 素 的 位 置 。 但 
对 于 已 定位 元 素 的 后 代 元 素 和 一 些 其 他 元 素 (如 表格 单元 ， 这 些 属 
性 返回 的 坐标 是 相对 于 祖先 元 素 的 而 非 文 档 。offsetParent 属 性 指定 这 些 
属性 所 相对 的 父 元 素 。 如 果 offsetParent 为 null， 这 些 属 性 都 是 文档 坐 

标 ， 因 此 ， 一 般 来 说 ， 用 offsetLeft 和 offsetTop 来 计算 元 素 e 的 位 置 需 要 
一 个 循 环 : 


function getElementposition(e){ 
var x=0, y=0; 

while(el=null){ 

x+=e.offsetLeft; 

y+=e.offsetTop; 

e=e.offsetparent; 

} 

returnfx:xyy:y]; 

} 

通过 循环 offsetParent 对 象 链 来 累加 侦 移 量 ， 该 函数 计算 指定 元 素 的 文档 
坐标 。 (回想 一 下 getBoundingClientRect0) 返 回 的 是 视 口 坐标 。) 这 里 
不 能 对 元 素 的 位 置 就 一 锤 定 音 ， 尽 管 如 此 一 一 这 个 getElementPosition() 
函数 也 不 总 是 计算 正确 的 值 ， 下 面 看 看 如 何 来 修复 它 。 

除了 这 些 名 字 以 offset 开 头 的 属性 以 外 ， 所 有 的 文档 元 素 定 义 了 其 他 两 


组 属性 ， 其 名 称 一 组 以 client 开 头 ， 另 一 组 以 scroll 开 头 。 即 ， 每 个 
HTML 元 素 都 有 以 下 这 些 属性 : 


offsetWidth clientWidth scrollWidth 


offsetHeight clientHeight scrollHeight 
offsetLeft clientLeft scrollLeft 
offsetTop clientTop scrollTop 
offsetParent 


为 了 理解 这 些 client 和 scroll 属 性 ， 你 需要 知道 HTML 元 素 的 实际 内 容 有 
可 能 比分 配 用 来 容纳 内 容 的 盒子 更 大 ， 因 此 单个 元 素 可 能 有 深 动 条 

( 见 16.2.6 节 中 CSS 的 overflow 属 性 ) 。 内 容 区 域 是 视 口 ， 就 像 浏览 器 
当 实 际 内 容 比 视 口 更 大 时 ， 需 要 把 元 素 的 滚动 条 位 置 考虑 进 


clientWidth 和 clientHeight 类 似 offsetWidth 和 offsetHeight， 不 同 的 是 它们 
不 包含 边框 大 小 ， 只 包含 内 容 和 和 它 的 内 边 距 。 同 时 ， 如 果 浏 贤 右 在 内 
边 距 和 边框 之 间 添 加 了 滚动 条 ，dlientWidth 和 clientHeight 在 其 返回 值 中 
也 不 包含 滚动 条 。 注 意 ， 对 于 类 似 <i>、<code> 和 <<span> 这 些 内 
联 元 素 ，clientWidth 和 clientHeight 总 是 返回 0。 


在 例 15-9 的 getViewportSize() 方 法 中 使 用 了 dientWidth 和 dlientHeight。 有 
一 个 特殊 的 案例 ， 在 文档 的 根 元 素 上 查询 这 些 属性 时 ， 它 们 的 返回 值 
和 窗口 的 innerWidth 和 innerHeight 属 性 值 相等 。 


clientLeft 和 clientTop 属 性 没什么 用 : 它们 返回 元 素 的 内 边 距 的 外 边缘 和 
它 的 边框 的 外 边缘 之 间 的 水 平 距离 垂直 距离 ， 通 常 这 些 值 就 等 于 左 
边 和 上 边 的 边框 宽度 。 但 是 如 果 元 素 有 滚动 条 ， 并 且 浏 览 右 将 这 些 深 
动 条 放置 在 左 侧 或 顶部 (可 这 不 太 常 见 ) ，clientLeft 和 clientTop 也 就 包 
含 了 滚动 条 的 宽度 。 对 于 内 联 元 素 ，clientLeft 和 clientTop 总 是 为 0。 


scrollWidth 和 scrollHeight 是 元 素 的 内 容 区 域 加 上 它 的 内 边 距 再 加 上 任何 
洲 出 内 容 的 尺寸 。 当 内 容 正 好 和 内 容 区 域 匹 配 而 没有 洲 出 时 ， 这 些 属 
性 与 dientWidth 和 dlientHeight 是 相等 的 。 但 当 淤 出 时 ， 它 们 就 包含 洲 出 
的 内 容 ， 返 回 值 比 dientWidth 和 clientHeight 要 大 。 


最 后 ，scrollLeft 和 scrollTop 指 定 元 素 的 滚动 条 的 位 置 。 在 
getScrollOffsets() 方 法 ( 例 15-8) 中 在 文档 的 根 元 素 上 我 们 查询 过 它 
们 。 注 意 ，scrollLeft 和 scrollTop 是 可 写 的 属性 ， 通 过 设置 它们 来 让 元 素 


下 的 2 。 (HTML 元 素 并 没有 类 似 Window 对 象 的 scrollTo0) 方 
法 


当 文档 包 含 可 滚动 的 且 有 海 出 内 容 的 元 素 时 ， 上 述 定 义 的 
getElementPosition() 方 法 就 不 能 正常 工作 了 ， 因 为 它 没 有 把 深 动 条 考虑 
进去 。 这 里 有 一 个 修改 版 ， 它 从 累计 的 偏 移 量 中 减 去 了 深 动 条 的 位 
置 ， 这 样 一 来 ， 将 返回 的 位 置 从 文档 坐标 转换 为 视 口 坐标 。 


function getElementPos(elt){ 


var x=0, y=0;// 循 环 以 累加 偏 移 量 


for(var e=elt;e!=null;e=e.offsetPparent){ 


x+=e .offsetLeft; 


y+=e.offsetTop; 


// 再 次 循环 所 有 的 祖先 元 素 ， 减 去 滚动 的 偏 移 量 


// 这 也 减 去 了 主 滚动 条 ， 并 转换 为 视 口 坐标 


for(var e=elt.parentNode;e!=null&&e,.nodeType==1;e=e.parentNode)t{ 


x-=e.scrollLeft; 


y-=e.scrollTop; 


return{x:x,y:y}; 


在 现代 浏 虹 器 中，getElementPos() 方 法 的 返回 值 和 
getBoundingClientRect() 的 返回 值 一 样 (但 是 更 低 效 ) 。 理 论 上 ， 如 
getElementPosO 这 样 的 函数 可 以 在 不 文 持 getBoundingClientRectO 的 浏览 
铝 中 使 用 。 但 实际 上 ， 不 支持 getBoundingClientRect() 的 浏览 器 在 元 素 
， 很 多 的 不 兼容 性 ， 像 这 样 如 此 人 简陋 的 函数 无 法 可 靠 地 工 


实际 类 似 jQuery 这 样 的 客户 端 类 库 包 含 了 一 些 函 数 来 计算 元 素 的 位 置 ， 
它们 扩充 了 这 个 基本 的 位 置 计算 算法 ， 修 复 了 一 系列 浏 贤 器 特定 的 
bug。 如果 需要 代码 在 所 有 不 支持 getBoundingClientRect() 的 浏览 器 中 正 
确 计算 元 素 的 位 置 ， 你 很 可 能 需要 像 jQuery 这 样 的 类 库 。 


15.9 HTML 表单 


HTML 的 <form 元素 和 各 种 各 样 的 表单 输入 元 素 (如 <input>、< 
select>> 和 <button>) 在 客户 端 编程 中 有 着 重要 的 地 位 。 这 些 HTML 元 
素 可 以 追溯 到 Web 的 最 开始 ， 比 JavaScript 本 身 更 早 。HTML 表 单 就 是 第 
一 代 We b 应 用 程序 背后 的 运作 机 制 ， 它 根本 就 不 需要 JavaScript。 用 户 
的 输入 从 表单 元 素来 收集 表单 将 这 些 输入 递交 给 服务 右 ; 服务 右 处 
(通常 有 一 个 新 的 表单 元 素 ) 显示 在 
客户 端 。 


即使 当 整 个 表单 数据 都 是 由 客户 端 JavaScript 来 处 理 并 不 会 提交 到 服务 
器 时 ，HTML 表 单元 素 仍然 是 收集 用 户 数据 很 好 的 方法 。 在 服务 端 程序 
中 ， 表 单 必须 要 有 一 个 “提交 ”按钮 ， 否 则 它 就 没有 用 处 。 男 一 方面 ， 

在 客户 端 编程 中 , “提交” 按钮 不 是 必须 的 (虽然 它 可 能 仍然 有 用 ) 。 
服务 端 程序 是 基于 表单 提交 动作 的 一 一 它们 按 表 单 大 小 的 块 处 理 数 据 
一 一 这 限制 了 它们 的 交互 性 。 客 户 端 程序 是 基于 事件 的 一 一 它们 可 以 
对 单独 的 表单 元 素 上 的 事件 做 出 响应 一 一 这 使 得 它们 有 更 好 的 啊 应 

度 。 例 如 ， 在 用 户 打字 时 客户 端 程序 束 能 校 验 输入 的 有 效 性 。 或 者 通 
过 单 击 一 个 复 选 框 来 后 用 一 组 选项 ， 也 融 是 说 当 复 选 框 被 选中 时 那 组 
选项 才 有 意义 。 


以 下 小 证 阐述 了 用 HTML 表 单 如 何 做 到 这 些 事情 。 表 单 由 HTML 元 杂 组 
成 ， 束 像 HTML 文 档 的 其 他 部 分 一 样 ， 并 且 可 以 用 本 半 中 介绍 过 的 
DOM 技 术 来 操作 它们 。 但 是 表单 古 第 一 批 脚 本 化 的 元 素 ， 在 最 早 的 客 
户 端 编程 中 它们 还 支持 比 DOM 更 早 的 一 些 其 他 的 API。 


请 注意 ， 本 节 是 关于 脚本 化 HTML 表 单 ， 而 不 是 HTML 本 身 。 假 设 你 已 
经 对 用 于 定义 表单 的 HTML 元 素 (<input>、<textarea>>、<select> 
等 ) 有 一 定 的 了 解 。 尽 管 如 此 ， 表 15-1 列 出 了 最 常 使 用 的 表单 元 素 。 更 
详细 的 内 容 请 参考 第 四 部 分 中 的 表单 和 表单 元 素 API， 在 Form 、 
Input、Option、Select 和 TextArea 下 面 。 


表 15-1，HTML 表 单元 素 


HTML 元 素 类 型 属性 。 ”事件 处 理 程序 ”描述 和 事件 
<input type="button"> 或 。 "button' onclick 按钮 


<button type="button > 


<input type="checkbox"> "checkbox" onchange 复 选 按钮 


HTML 元 素 类 型 属性 


<input type="file"> "file" 


<input type="hidden"> "hidden" 


<option> none 


<input type="password"> "password" 
<input type="radio"> "radio" 

<input type="reset"> 或 。 "reset' 

<button type="reset"> 

<select> "select-one" 
<select multiple> "select-multiple" 
<input type="submit"> 或 "submit' 


<button type="submit"> 


<input type="text"> ‘text’ 


<textarea> "textarea" 


事件 处 理 程序 


onchange 


none 


none 


onchange 


onchange 


onclick 


onchange 


onchange 


onclick 


onchange 


onchange 


描述 和 事件 

载 信 Web 服务 器 的 文件 的 
文件 名 输入 域 ， 它 的 value 
属性 是 只 读 的 
数据 由 表单 提交 ， 但 对 用 
户 不 可 见 
Select 对 象 中 的 单个 选项 ; 
事件 处 理 程序 在 Select 对 象 
上 ， 而 非 单独 的 Option 对 
象 上 


密码 输入 框 ， 输 入 的 字符 
不 可 见 
单 选 按钮 ， 同 时 只 能 选 定 


-个 


重 置 表 单 的 按钮 


选项 只 能 单 选 的 列表 或 下 
拉 菜 单 ( 另 见 <option>) 
选项 可 以 多 选 的 列表 ( 见 


<option>) 


表单 提交 按钮 


单行 文本 输入 域 ， type 属 
性 缺少 或 无 法 识别 时 默认 
的 <input> 元 素 


多 行文 本 输入 域 


15.9.1 ”选取 表单 和 表单 元 素 


表单 和 它们 所 包含 的 元 素 可 以 用 如 getElementById0 和 
getElementsByTagName0 等 标准 的 方法 从 文档 中 来 选取 : 


var fields=document .getElementById("address").getElementsByTagName("input"); 


在 文 持 querySelectorAH0 的 浏览 郁 中 ， 从 一 个 表单 中 选取 所 有 的 单 选 按 
钮 或 所 有 同名 的 元 陛 的 代码 如 下 : 


//id 为 "shipping" 的 表单 中 所 有 的 单 选 按 和 


document .querySelectorAl1( '#shipping input[type="radio"]');//id 为 "shipping" 的 表单 中 所 有 
名 字 为 "method" 的 单 选 按 和 


document .querySelectorAll('#shipping input[type="radio"][name="method"]'); 


尽管 如 此 ， 如 同 在 14.7 节 、15.2.2 广 和 15.2.3 节 所 描述 的 ， 有 name 或 id 属 
性 的 <form > 元 系 能 够 通过 很 多 方法 来 选取 。name="address" 必 性 的 < 
form 之 可 以 用 以 下 任何 方法 来 选取 : 


window,address// 不 可 靠 : 不 要 使 


document .address// 仅 当 表 单 有 name 属 性 时 可 


document .forms ,address// 显 式 访问 有 name 或 id 的 表单 


document .forms [n]// 不 可 靠 : n 是 表单 的 序号 


15.2.3 ”万国 述 了 document.forms 是 一 个 HTML Collection 对 象 ， 可 以 通 
过 数字 序号 或 id 或 name 来 选取 表单 元 素 。Form 对 象 本 映 的 行为 类 似 于 
多 个 表单 元 素 组 成 的 HTMLCollection 集 合 ， 也 可 以 通过 name 或 数字 序 


号 来 和 索引。 如果 名 为 "address" 的 表单 的 第 一 个 元 素 的 name 是 "street'"， 
可 以 使 用 以 下 任何 一 种 表达 式 来 引用 该 元 素 : 


document .forms.address[0] 


document .forms.address.street 


EE 


document .address.street// 当 有 


name="address"， 人 而 个 十 只 有 id="address" 


如 果 要 明确 地 选取 一 个 表单 元 素 ， 可 以 索引 表单 对 象 的 elements 属 性 : 


document ,forms,.address,.elements[0] 


document.forms.address.elements.street 


一 般 来 说 指定 文档 元 素 的 方法 用 id 属性 要 比 name 属 性 更 佳 。 但 是 ， 
name 属 性 在 HTML 表 单 提交 中 有 特殊 的 目的 ， 它 在 表单 中 较为 常用 ， 
在 其 他 元 素 较 少 使 用 。 它 应 用 于 相关 的 复 选 按钮 组 和 强制 共享 name 属 
性 值 的 、 互 斥 的 单 选 按钮 组 。 请 记 住 ， 当 用 name 来 素 引 一 个 
HTMLCollection 对 象 并 且 它 包含 多 个 元 素来 共享 name 时 ， 返 回 值 是 一 
个 类 数组 对 象 ， 它 包含 所 有 匹配 的 元 素 。 考 虑 以 下 表单 ， 它 包含 多 个 
单 选 按钮 来 选择 运输 方式 : 


<form name="shipping"> 


<fieldset><legend>Shipping Method</legend> 


<label><input type="radio"name="method"value="1ist">First-class</label> 


<label><input type="radio"name="method"value="2day">2-day Air</label> 


<label> <input type="radio"name="method"value="overnite">0Overnight</label> 


</fieldset> 


</form> 


对 于 该 表单 ， 用 如 下 代码 来 引用 单 选 按钮 元 素数 组 : 


var methods=document .forms ,shipping.elements ,method ， 


注意 ，<form > 元 素 本 身 有 一 个 HTML 属 性 和 对 应 的 JavaScript 属 性 

叫 "method"， 所 以 在 此 案例 中 ， 必 须要 用 该 表单 的 elements 属 性 而 非 直 
接 访 问 method 属 性 。 为 了 判定 用 户 选 取 哪 种 运输 方式 ， 需 要 遍历 数组 
中 的 表单 元 素 并 检测 它们 的 checked 属 性 : 


var shipping_method; 
for(var i=0;i<methods.1length;i++) 


if(methods[i].checked)shipping method=methods[i].value; 


在 下 一 节 中 可 以 看 到 更 多 表单 元 素 的 属性 ， 如 checked 和 value 。 
15.9.2 ”表单 和 元 素 的 属性 


上 面 描述 的 elements[] 数 组 是 Form 对 象 中 最 有 趣 的 属性 。Form 对 象 中 的 
其 他 属性 相对 没有 如 此 重要 。action、encoding、method 和 target 属 性 
(property) 直接 对 应 于 <form>> 元 素 的 action、encoding、method 和 
target 等 HTML 属 性 (attribute) 。 这 些 属性 都 控制 了 表单 是 如 何 来 提交 
数据 到 Web 服 务 器 并 如 何 显 示 的 。 客 户 端 JavaScript 能 够 设置 这 些 属性 
全 不 过 仅 当 表 单 真 的 会 将 数据 提交 到 一 个 服务 端 程序 时 它们 才 有 


在 JavaScript 产 生 之 前 ， 要 用 一 个 专用 的 “提交 ?按钮 来 提交 表单 ， 用 一 
个 专用 的 “ 重 置 ?按钮 来 重 置 各 表单 元 素 的 值 。JavaScript 的 Form 对 象 文 
持 两 个 方法 : submit() 和 reset()， 它 们 完成 同样 的 目的 。 调 用 Form 对 象 
的 submit() 方 法 来 提交 表单 ， 调 用 reset() 方 法 来 重 置 表单 元 素 的 值 。 


所 有 (或 多 数 ) 表单 元 素 通常 都 有 以 下 属性 。 如 果 一 些 元 素 有 其 他 专 
用 的 属性 ， 会 在 后 面 单独 考虑 各 种 类 型 的 表单 元 素 时 朱 述 它们 : 


type 


标识 表单 元 素 类 型 的 只 二 的 字符 串 。 针 对 用 <input> 标签 定义 的 表单 
元 素 而 言 ， 就 是 其 type 属 性 的 值 。 其 他 表单 元 素 (如 <textarea>> 和 < 
select>>) 定义 type 属 性 是 为 了 轻松 地 标识 它们 ， 与 <input > 元 素 在 类 
型 检测 时 互相 区 别 。 表 15-1 的 第 二 列 给 出 了 各 个 表单 元 素 此 属性 的 值 。 


form 


对 包含 元 素 的 Form 对 象 的 只 读 引用 ， 或 者 如 果 元 素 没有 包含 在 一 个 < 
form > 元 素 中 则 其 值 为 null 。 


Name 
只 读 的 字符 串 ， 由 HTML 属 性 name 指 定 。 
value 


可 读 / 写 的 字符 串 ， 指 定 了 表单 元 素 包 含 或 代表 的 “ 值 ”。 它 就 是 当 提 交 
表单 时 发 送 到 Web 服 务 器 的 字符 串 ， 也 是 JavaScript 程 序 有 时 候 会 感 兴 
趣 的 内 容 。 针 对 Text 和 Textarea 元 素 ， 该 属性 值 包含 了 用 户 输 入 的 文 

本 。 针 对 用 <input> 标签 创建 的 按钮 元 素 (除了 用 <button> 标签 创建 
的 按钮 ) ， 该 属性 值 指定 了 按钮 显示 的 文本 。 但 是 ， 针 对 单 选 和 复 选 
按钮 元 素 ， 该 属性 用 户 不 可 见 也 不 能 编辑 。 它 仅 是 用 HTML 的 value 属 
性 来 设置 的 一 个 字符 串 。 它 在 表单 提交 时 使 用 ， 但 在 关联 表单 元 素 的 
额外 数据 时 也 很 有 用 。 在 本 章 后 面 关 于 不 同类 目的 表单 元 素 小 和 中 将 
深入 讨论 value 属 性 。 


15.9.3 ”表单 和 元 素 的 事件 处 理 程序 


每 个 Form 元 素 都 有 一 个 onsubmit 事 件 处 理 程序 来 侦 测 表单 提交 ， 还 有 
一 个 onreset 事 件 处 理 程序 来 侦 测 表单 重 置 。 表 单 提 区 前 调用 onsubmit 程 
序 ; 它 通 过 返回 false 能 够 取消 提交 动作 。 这 给 JavaScript 程 序 一 个 机 会 
来 检查 用 户 的 输入 销 误 ， 目 的 是 为 了 避免 不 完整 或 无 效 的 数据 通过 网 
络 提交 到 服务 端 和 程序。 注意，onsubmit 事 件 处 理 程序 只 能 通过 单 击 “ 提 


ee 。 直接 调用 表单 的 submitO 方 法 不 触发 onsubmit 事 件 处 理 
本 O 


onreset 事 件 处 理 程 序 和 onsubmit 是 类 似 的 。 它 在 表单 重 置 之 前 调用 ， 通 
过 返回 false 能 够 阻止 表单 元 素 被 重 置 。 在 表单 中 很 少 需要 “ 重 置 > 按 钮 ， 
但 如 果 有 ， 你 可 能 需要 提醒 用 户 来 确认 是 否 重 置 : 


<form... 


onreset="return confirm('Really erase ALL input and start over?')"> 


<button type="reset">Clear and Start Over</button> 


</form> 


类 似 onsubmit 事 件 处 理 程 序 ，onreset 只 能 通过 单 击 “ 重 置 ?按钮 来 触发 。 
直接 调用 表单 的 reset() 方 法 不 触发 onreset 事 件 处 理 程序 。 


当 用 户 与 表单 元 素 交 互 时 它们 往往 会 触发 dick 或 change 事 件 ， 通 过 定义 
onclick 或 onchange 事 件 处 理 程序 可 以 处 理 这 些 事件 。 表 15-1 的 第 三 列 给 
出 了 各 个 表单 元 素 主 要 的 事件 处 理 程序 。 一 般 来 说 ， 当 按钮 表单 元 素 
激活 〈 甚 至 当 通过 键盘 而 不 是 实际 的 鼠标 单 击 发 生 激活 ) 时 它们 会 触 
发 dick 事 件 。 当 用 户 改 变 其 他 表单 元 素 所 代表 的 值 时 它们 会 触发 change 
事件 。 当 用 户 在 一 个 文本 域 输入 文本 或 从 下 拉 列 表 中 选择 了 一 个 选项 
后 就 发 生 这 样 的 改变 。 注 意 ， 在 一 个 文本 域 中 该 事件 不 是 每 次 用 户 输 
入 一 个 键 值 时 都 会 触发 。 它 仅 当 用 户 改 变 了 元 素 的 值 然 后 将 焦点 移 到 
其 他 元 素 上 时 才 会 触发 。 也 就 是 说 ， 调 用 该 事件 处 理 程序 就 意味 着 一 
个 完整 的 改变 。 单 选 按钮 和 复 选 框 都 有 一 个 状态 标识 ， 它 们 的 click 和 
change 事 件 都 会 触发 ;两 个 之 中 change 事 件 更 加 有 用 。 


和 失去 焦点 时 会 触发 
blur o 


关于 事件 处 理 程序 有 一 点 非常 重要 ， 在 事件 处 理 程序 代码 中 关键 字 this 
征 触 发 该 事件 的 文档 元 素 的 一 个 引用 (我 们 将 在 第 17 革 中 再 次 讨 


论 ) 。 既 然 在 <form > 元 素 中 的 元 素 都 有 一 个 form 属 性 引用 了 该 包含 
的 表单 ， 这 些 元 素 的 事件 处 理 程 序 总 是 能 够 通过 this.form 来 得 到 Form 对 
象 的 引用 。 更 进一步 ， 这 意味 着 某 个 表单 元 素 的 事件 处 理 程序 能 够 通 
过 this.form.x 得 到 该 表单 中 以 x 命名 的 元 素 。 


15.9.4 按钮 


按钮 是 最 党 用 的 表单 元 妹 之 一 ， 因 为 它们 是 一 种 视觉 上 明确 让 用 户 触 
发 某 种 脚本 动作 的 方法 。 按 钮 元 素 本 号 没有 默认 的 行为 ， 除 非 它 有 
onclick 事 件 处 理 程序 ， 否 则 它 并 没有 什么 用 处 。 以 <input> 元素 定义 
的 按钮 会 将 value 属 性 值 以 纯 文本 显示 。 以 <button> 元素 定义 的 按钮 会 
将 元 素 的 一 切 内 容 显 示 出 来 。 


注意 ， 超 级 链接 与 按钮 一 样 提 供 了 onclick 事 件 处 理 程 序 。 当 onclick 事 
以 概念 化 为 “跟随 此 链接 ”时 就 用 一 个 链接 ;， 否则 ， 
安 钮 。 


提交 和 重 置 元 素 本 就 是 按钮 ， 不 同 的 是 它们 有 与 之 相关 联 的 默认 动作 

(表单 的 提交 和 重 置 ) 。 如 果 onclick 事 件 处 理 程序 返回 false， 这 些 按钮 
的 默认 动作 就 不 再 执行 了 。 可 以 使 用 提交 元 素 的 onclick 事 件 处 理 程序 
来 执行 表单 校 验 ， 但 是 更 为 常用 的 是 使 用 Form 对 和 象 本 喘 的 onsubmit 事 
件 处 理 程序 来 执行 表单 校 验 。 


本 书 第 四 部 分 未 包含 按钮 。 关 于 所 有 按钮 表单 元 素 的 详细 内 容 请 参看 
input 项 ， 它 包含 了 用 <button > 元 素 创建 的 按钮 。 


15.9.5 ”开关 按钮 


复 克 框 和 单 克 元 素 是 开关 按钮 ， 或 称 有 两 种 视 宽 状态 的 按钮 ， 选 中 或 
未 克 中 。 通 过 对 其 单 击 用 户 可 以 改变 它 的 开关 状态 。 单 选 元 素 为 整 组 
有 相关 性 的 元 聂 而 设计 的 ， 组 内 所 有 按钮 的 HTML 属 性 name 的 值 都 相 
同 。 按 这 种 方式 创建 的 单 选 按钮 是 互 不 的 :选中 其 一 ， 之 前 选中 的 即 
变 成 末 先 中。 复 选 框 通常 也 整 组 使 用 并 共 至 name 属 性 ， 必 须 注 意 的 古 
当 利 用 做 为 表单 属性 的 名 字 来 选中 这 些 元 素 时 ， 它 返回 一 个 类 数组 对 
象 而 不 是 单个 元 素 。 


单 选 和 复 选 框 元 素 都 定义 了 checked 属 性 。 该 属性 是 可 读 / 写 的 布尔 值 ， 
它 指定 了 元 素 当 前 是 否 选中 。defaultChecked 属 性 也 是 布尔 值 ， 它 是 


HTML 属 性 checked 的 值 ， 它 指定 了 元 素 在 第 一 次 加 载 页 面 时 是 否 选 
中 O 


单 夺 和 复 移 框 元 素 本 喘 不 显示 任何 文本 ， 它 们 通 第 和 相 令 的 HTML 文 本 
一 起 显示 (或 与 <label> 元 素 相 关联 ) 。 这 意味 着 设置 复 选 框 或 单 选 
元 素 的 value 属 性 不 改变 元 陛 的 视觉 表现 。 设 置 value 只 改变 提交 表单 时 
发 送 到 Web 服 务 夯 的 字符 串 。 


当 用 户 单 击 单 选 或 复 选 开关 按钮 ， 单 选 或 复 选 框 元 素 触 发 onclick 事 
件 。 如 有 果 由 于 单 击 开关 按钮 改变 了 它 的 状态 ， 它 也 触发 onchange 事 件 。 

(但 注意 ， 当 用 户 单 击 其 他 单 选 按钮 而 导致 这 个 单 选 按钮 状态 的 改 
变 ， 后 者 不 触发 onchange 事 件 。) 


15.9.6 ”文本 域 

文本 输入 域 在 HTML 表 单 和 JavaScript 程 序 中 可 能 是 最 常用 的 元 素 。 用 
户 可 以 输入 单行 简短 的 文本 字符 串 。value 属 性 表示 用 户 输 入 的 文本 。 
通过 设置 该 属性 值 可 以 显 式 地 指定 应 该 在 输入 域 中 显示 的 文本 。 


在 HTML5 中 ，placeholder 属 性 指定 了 用 户 输入 前 在 输入 域 中 显示 的 提 
示 信 息 : 


Arrival Date: <input type="text"name="arrival"placeholder="yyyy-mm-dd"> 


文本 输入 域 的 onchange 事 件 处 理 程序 是 在 用 户 输入 新 的 文本 或 编辑 已 存 
在 的 文本 时 触发 ， 它 表明 用 户 完 成 了 编辑 并 将 焦点 移出 了 文本 域 。 


Textarea 元 素 类 似 文本 输入 域 元 素 ， 不 同 的 是 它 允 许 用 户 输 入 (和 
JavaScript 程 序 显 示 ) 多 行文 本 。Textarea 元 素 用 <textarea> 标签 来 创 
建 ， 与 用 <input> 标签 创建 的 文本 域 在 语法 上 有 显著 的 区 别 。 ( 见 第 
四 部 分 的 TextArea。) 尽管 如 此 ， 两 种 元 素 的 行为 非常 类 似 。 如 同 针对 
Le ， 可 以 用 Textarea 元 系 的 value 属 性 和 onchange 事 件 处 理 程 
予 O 


<input type="password" > 元 素 在 用 户 输入 时 显示 为 星 号 ， 它 修改 了 输 
入 的 文本 。 其 名 字 表 明 ， 用 户 输入 密码 时 不 用 担心 他 背后 的 人 能 


到 ， 这 很 有 有 用。 注意， 密码 输入 元 素 只 能 防止 服 睛 室 视 ， 但 在 提交 表 
单 时 输入 未 经 任何 加 密 (除非 通过 安全 的 HTTPS 连 接 提交 它 ) ， 当 在 
网 络 上 传输 时 它 可 能 被 看 见 。 


最 后 ，<input type="file" > 元素 将 用 户 和 输入 竺 上传 到 Web 服 务 屡 的 文件 
的 名 称 。 它 由 一 个 文本 域 和 一 个 单 击 打开 文件 选择 对 话 框 的 按钮 所 组 
成 。 该 文件 选取 元 素 拥 有 onchange 事 件 处 理 程序 ， 就 像 普 通 的 输入 域 一 
样 。 但 不 同 的 是 它 的 value 属 性 是 只 读 的 。 这 个 防止 恶意 的 JavaScript 程 
序 欺骗 用 户 上 传 本 意 不 想 共 享 的 文件 。 


不 同 的 文本 输入 元 素 定 义 onkeypress、onkeydown 和 onkeyup 事 件 处 理 程 
序 。 可 以 从 onkeypress 或 onkeydown 事 件 处 理 程序 返回 false， 防 止 记 录 
用 户 的 按键 。 这 很 有 有 用， 例如， 如 果 和 希望 强制 用 户 在 特定 文本 输入 域 
中 仅 输入 数字 。 该 技术 的 说 明 参 见 例 17-6。 


15.9.7 ”选择 框 和 选项 元 素 


Select 元 素 表 示 用 户 可 以 做 出 选择 的 一 组 选项 (用 Option 元 素 表 示 ) 。 
浏览 絮 通 常 将 其 泻 染 为 下 拉 采 单 的 形式 ， 但 当 指 定 其 s iz e 属 性 值 大 于 1 
时 ， 它 将 显示 为 列表 中 的 选项 〈 可 能 有 滚动 ) 。Select 元 素 能 以 两 种 不 
同 的 方式 运作 ， 这 取决 于 它 的 type 属 性 值 是 如 何 设 置 的 。 如 果 <select 
> 元 素 有 multiple 属 性， 也 就 是 Select 对 象 的 type 属 性 值 为 "select- 
multiple"， 那 瓯 允许 用 户 选 取 多 个 选项 。 否 则 ， 如 有 果 没 有 多 选 属性 ， 那 
只 能 选取 单个 选项 ， 它 的 type 属 性 值 为 "select-one"。 


某 种 程度 上 "select-multiple" 元 素 与 一 组 复 选 框 元 素 类 似 ，"select-one" 元 
素 和 一 组 单 选 元 素 类 似 。 但 是 ， 由 Select 元 素 显 示 的 选项 并 不 是 开关 按 
钮 :它们 由 <option>> 元 素 定 义 。Select 元 素 定 义 了 options 属 性 ， 它 是 
一 个 包含 了 多 个 Option 元 素 的 类 数组 对 象 。 


当 用 户 选 取 或 取消 选取 一 个 选项 时 ，Select 元 素 触 发 onchange 事 件 处 理 
程序 。 和 针对 "select-one"Select 元 素 ， 它 的 可 读 / 写 属性 selectedIndex 指 定 
了 哪个 选项 当前 被 选中 。 针 对 "selectrmultiple" 元 素 ， 单 个 selectedIndex 
属性 不 足以 表示 被 选中 的 一 组 选项 。 在 这 种 情况 下 ， 要 判定 哪些 选项 
被 选中 ， 就 必须 裔 历 options[] 数 组 的 元 素 ， 并 检测 每 个 Option 对 象 的 
selected 属 性 值 。 


除了 其 selected 属 性 ， 每 个 Option 对 象 有 一 个 text 属 性 ， 它 指定 了 在 
Select 元 素 中 的 选项 所 显示 的 纯 文 本 字符 串 。 设 置 该 属性 可 以 改变 显示 
给 用 户 的 文本 。value 属 性 指定 了 在 提交 表单 时 发 送 到 Web 服 务 器 的 文 
本 字符 串 ， 它 也 是 可 读 / 写 的 。 甚 至 在 写 纯 客 户 端 程序 并 且 不 可 能 有 表 
单 提交 时 ，value 属 性 (或 它 所 对 应 的 HTML 属 性 value) 是 用 来 保存 任 
何 数据 鸭 好 地 方 ， 在 用 户 选取 特定 的 选项 时 可 以 使 用 这 些 数 据 。 注 
意 ，Option 元 素 并 没有 与 表单 相关 的 事件 处 理 程 序 : 用 包含 Select 元 素 
的 onchange 事 件 处 理 程 序 来 代替 。 


除了 设置 Option 对 象 的 text 属 性 以 外 ， 使 用 options 属 性 的 特殊 功能 可 以 
动态 改变 显示 在 Select 元 素 中 的 选项 ， 这 些 功 能 可 以 退 溯 到 最 早期 的 客 
户 端 编程 。 通 过 设置 options.length 为 一 个 硕 望 的 值 可 以 截断 Option 元 叉 
数组 ， 而 设置 options.length 为 0 可 以 从 Select 区 隶 中 移 除 所 有 的 选项 。 议 
置 options[] 数 组 中 某 点 的 值 为 nul 可 以 从 Select 元 素 中 移 除 单个 Option 对 
| ° > 除 该 Option 对 象 ，options[] 数 组 中 高 端的 元 素 上 自动 移 下 来 填 
补 裤 缺 。 


为 Select 元 素 增加 一 个 新 的 选项 ， 首 先 用 Option0) 构 造 钞 数 创建 一 个 
Option 对 象 ， 然 后 将 其 添加 到 options[] 属 性 中 ， 代 码 如 下 : 


> 


// 创 建 一 个 新 的 选项 


[这 


var zaire=new 0ption("Zaire",//text 属 性 


让 


"zaire",//value 属 性 


false,//defaultSelected 属 性 


false);//selected 属 性 


[于 


// 通 过 添加 到 options 数 组 中 ， 在 Select 元 素 中 显示 该 选项 


var countries=document.address.country;// 得 到 Select 对 象 


countries.options[countries.options.1length]=zaire; 


请 牢记 一 点 ， 这 些 专用 的 Select 元 素 的 API 已 经 很 老 了 。 可 以 用 那些 标 
准 的 调用 更 明确 地 插入 和 移 除 选项 元 素 : Document.createElement()、 
Node.insertBefore()、Node.removeChild() 等 。 


15.10 其 他 文档 特性 


本 章 在 一 开始 就 声明 了 它 是 本 书 中 最 重要 的 一 章 。 由 其 必要 性 ， 它 也 
是 最 长 的 一 章 之 一 。 本 章 最 后 一 节 洱 盖 了 Document 对 象 的 若干 混杂 的 


15.10.1 Document 的 属性 


本 章 已 经 介绍 的 Document 的 属性 有 body、documentFElement 和 forms 等 这 
些 特殊 的 文档 元 素 。 文 档 还 定义 了 一 些 其 他 有 趣 的 属性 : 


cookie 


允许 JavaScript 程 序 读 、 写 HTTP cookie 的 特殊 的 属性 。 第 20 章 泗 盖 该 
性 。 


测 


domain 


该 属性 允许 当 Web 页 面 之 间 交 互 时 ， 相 同 域名 下 互相 信任 的 Web 服 务 右 
之 间 协 作 放 宽 同 源 策 略 安全 限制 ( 见 13.6.2 和 ) 。 


lastModified 
包含 文档 修改 时 间 的 字符 串 。 


location 
与 Window 对 和 象 的 location 属 性 引用 同一 个 Location 对 象 。 
referrer 


如 果 有 ， 已 表示 浏览 器 导航 到 当前 链接 的 上 上 个 文档 。 该 属性 值 和 
HTTP 的 Referer 头 信息 的 内 容 相 同 ， 只 是 拼写 上 有 二 个。 


title 


文档 的 <titte> 和 <yite> 标签 之 间 的 内 容 。 
URL 


文档 的 URL， 只 读 字 符 串 而 不 是 Location 对 象 。 该 属性 值 与 location.href 
的 初始 值 相同 ， 只 是 不 包含 Location 对 象 的 动态 变化 。 例 如 ， 如 果 用 户 
在 文档 中 导向 到 一 个 新 的 片段 ，location.href 会 发 生变 化 ， 但 是 
document.URL 则 不 会 。 


referrer 是 这 些 属性 中 最 有 趣 的 属性 之 一 : 它 包 含 用 户 链接 到 当前 文档 
的 上 一 个 文档 的 URL。 可 以 用 如 下 代码 来 使 用 该 属性 : 


if(document.referrer.indexof("http://ww.google.com/search?")==0){ 
var args=document.referrer.substring(ref.indexOof("?")+1).split("&"); 
for(var i=0;i<args.length;i++){ 

if(args[i].substring(0,2)=="q="){ 

document .write("<p>Welcome Google User."); 

document .write("You searched for:"+ 
unescape(args[i].substring(2)).replace('+',"''); 


break; 


上 还 代码 中 使 用 的 document.write() 方 法 将 是 下 一 太 的 主题 。 
15.10.2 ”document.write() 方 法 


document.write() 方 法 是 其 中 一 个 由 Netscape 2 浏览 器 实现 的 非常 早期 的 
脚本 化 API。 它 曾 在 DOM 之 前 束 税 很 好 地 引入 了 ， 也 曾 是 在 文档 中 显 

示 计 算 后 的 文本 的 唯一 方法 。 新 代码 中 已 经 不 再 需要 它 了 ， 但 在 已 有 

的 代码 中 你 还 能 不 时 地 看 到 该 方法 。 


document.write(0) 会 将 其 字符 串 参 数 连接 起 来 ， 然 后 将 结果 字符 串 插 入 
到 文档 中 调用 它 的 脚本 元 素 的 位 置 。 当 脚本 执行 结束 ， 浏 览 器 解析 生 
成 的 输出 并 显示 它 。 例 如 ， 以 下 代码 使 用 write0 动 态 把 信息 输出 到 一 个 
静态 的 HTML 文 档 中 : 


<script> 

document .write("<p>Document title:"+document.title); 
document .write("<br>URL:"+document .URL); 

document .write("<br>Referred by:"+document.referrer); 
document .write("<br>Modified on:"+document.]lastModified); 
document .write("<br>Accessed on:"+new Date()); 


</script> 


只 有 在 解析 文档 时 才能 使 用 write0 方 法 输出 HTML 到 当前 文档 中 ， 理 解 
这 点 非常 重要 。 也 束 是 说 能 够 在 < script> 元 素 中 的 顶层 代码 中 调用 
document.write()， 束 是 因为 这 些 脚本 的 执行 是 文档 解析 流程 的 一 部 

分 。 如 有 果 将 document.write() 放 在 一 个 玉 数 的 定义 中 ， 而 该 贸 数 的 调用 
是 从 一 个 事件 处 理 程序 中 发 起 的 ， 产 生 的 结果 未 必 是 你 想 要 的 一 一 事 
实 上 ， 它 会 擦 除 当 前 文档 和 它 包含 的 脚本 ! (马上 你 将 看 到 为 什 

么 。) 同 理 ， 在 设置 了 defer 或 async 属 性 的 脚本 中 不 要 使 用 


document.write() ° 


第 13 章 中 的 例 13-3 以 这 种 方式 使 用 了 document.write() 来 产生 更 加 复杂 的 
时 


ij 出。 


还 可 以 使 用 write(0) 方 法 在 其 他 的 窗口 或 框架 页 中 来 创建 整个 全 新 文档 。 

(但 是 ， 当 有 多 个 窗口 或 框架 页 时 ， 必 须 注 意 不 要 违反 同 源 策略 。) 
第 一 次 调用 其 他 文档 的 write() 方 法 即 会 探 除 该 文档 的 所 有 内 容 。 可 以 多 
次 调用 write() 来 逐步 建立 新 文档 的 内 容 。 传 递 给 write0 的 内 容 可 能 缓存 
起 来 (并且 不 会 显示 ) 直到 调用 文档 对 象 的 close(0) 方 法 来 结束 该 写 序 
列 。 本 质 上 这 告诉 HTML 解 析 器 文档 已 经 达到 了 文件 的 末尾 ， 应 该 结 
解析 并 显示 新 文档 。 


值得 一 提 的 是 Document 对 象 还 支持 writeln0) 方 法 ， 除 了 在 其 参数 的 输出 
之 后 追加 一 个 换行 符 以 外 它 和 write0) 方 法 完全 一 样 。 例 如 ， 在 <pre> 
元 系 内 输出 预 格式 化 的 文本 时 这 非常 有 用 。 


在 当今 的 代码 中 document.write0 方 法 并 不 常用 :，innerHTML 属 性 和 其 他 
DOM 技 术 提 供 了 更 好 的 方法 来 为 文档 增加 内 容 。 男 一 方面 ， 某 些 算法 
的 确 使 得 它们 本 号 成 为 很 好 的 流 式 WO API， 如 同 write() 方 法 提供 的 API 
一 样 。 如 有 果 你 正在 书写 在 运行 时 计算 和 输出 文本 的 代码 ， 可 能 会 对 例 
15-10 感 兴趣 ， 它 利用 指定 元 素 的 innerHTML 属 性 包装 了 简单 的 write() 
和 close() 方 法 。 


例 15-10: 针对 innerHTML 属 性 的 流 式 API 


// 为 设置 元 素 的 jnnerHTML 定 义 简单 的 " 流 式 "API 


function ElementStream(elt){ 


this.elt=elt,; 


this.buffer="",; 


} 


// 连 接 所 有 的 参数 ， 添 加 到 缓存 中 


ElementStream.prototype.write=function(){ 


this.buffer+=Array.prototype.join.call(arguments,""); 


};// 类 似 write()， 只 是 多 增加 了 换行 符 


ElementStream.prototype.writeln=function(){ 


this.buffer+=Array.prototype.join.call(arguments,"")+"\n"; 


};// 从 缓存 设置 元 素 的 内 容 ， 然 后 清空 缓存 


ElementStream.prototype.close=function(){ 
this.elt.innerHTML=this.buffer; 


this.buffer=""; 


}; 


15.10.3 ”查询 选取 的 文本 


有 时 判定 用 户 在 文档 中 选取 了 哪些 文本 非常 有 用 。 可 以 用 类 似 如 下 的 
函数 达到 目的 ; 


function getSelectedText(){ 


if(window.getSelection)//HTML5 标 准 API 


return window.getSelection().tostring(); 


else if(document.selection)//IE 特 有 的 技术 


return document.selection,.createRange().text; 


标准 的 window.getSelection() 方 法 返回 一 个 Selection 对 象 ， 后 者 描述 了 当 
前 计 取 的 一 系列 一 个 或 多 个 Range 对 象 。Selection 和 Range 定 义 了 一 个 不 
太 常 用 的 较为 复杂 的 API， 本 书 中 并 没有 文档 记录 。toString() 方 法 是 


Selection 对 象 中 最 重要 的 也 广泛 实现 了 (除了 IE) 的 特性 ， 它 返回 选取 
的 纯 文 本 内 容 。 


IE 定 义 了 一 个 不 同 的 API， 它 在 本 书 中 也 没有 文档 记录 。 
document.selection 对 象 代 表 了 用 户 的 选择 。 该 对 象 的 createRange() 方 法 
返回 正 特 有 的 TextRange 对 象 ， 它 的 text 属 性 包含 了 选取 的 文本 。 


如 上 的 代码 在 书签 工具 〈 见 13.2.5 节 ) 中 特别 有 用 ， 它 操作 选取 的 文 
本 ， 然 后 利用 搜索 引擎 或 参考 站 点 查找 某 个 单词 。 例 如 ， 如 下 HTML 链 
接 在 Wikipedia 上 查找 当前 选取 的 文本 。 收 藏书 签 后 ， 该 链接 和 它 包含 
的 JavaScript URL 束 变 成 了 一 个 书签 工具 : 


<a href="javascript:var 9q; 


if(window.getSelection)q=window.getSelection().toSstring(); 


else if(document.selection)q=document.selection.createRange().text,; 


void window.open('http://en.wikipedia.org/wiki/'+q);"> 


Look Up Selected Text In Wikipedia 


</a> 


上 述 展 示 的 查询 选取 代码 的 兼容 性 不 佳 : Window 对 象 的 getSelection0) 
方法 无 法 返回 那些 表单 元 素 <input> 或 <textarea> 内 部 选中 的 文本 ， 
它 只 返回 在 文档 主体 本 身 中 选取 的 文本 。 另 一 方面 ， 正 的 
document.selection 属 性 可 以 返回 文档 中 任意 地 方 选 取 的 文本 。 


从 文本 输入 域 或 <textarea> 元 素 中 获取 选取 的 文本 可 使 用 以 下 代码 : 


elt.value.substring(elt.selectionstart,elt.selectionEend); 


IE 8 以 及 更 早 版 本 的 浏览 器 不 支持 selectionStart 和 selectionEnd 属 性 。 


15.10.4 可 编辑 的 内 容 


我 们 已 经 知道 HTML 表 单元 素 包 人 台 了 文本 字段 和 文本 域 元 素 ， 用 户 可 以 
输入 并 编辑 纯 文 本 。 跟 随 正 的 脚步 ， 所 有 当今 的 Web 浏 览 闫 也 文 持 商 单 
的 HTML 编辑 功能 : 你 也 许 已 经 看 到 过 这 在 页 面 上 使 用 了 (如 博客 评论 
页 ) ， 它 典 入 了 一 个 富 文本 编辑 器 ， 包 含 了 一 个 有 一 系列 按钮 的 工具 
栏 来 设置 排版 样式 〈 粗 体 、 和 斜体) 、 对 齐 和 插入 图 片 与 链接 。 


有 两 种 方法 来 启用 短程 功 能 。 其 一 ， 设 置 任何 标签 的 HTML 

contenteditable 属 性 ;其 二 ， 设 置 对 应 元 系 的 JavaScript contenteditable 属 
性 ， 这 都 将 使 得 元 素 的 内 容 变 成 可 编辑 。 当 用 户 单 击 该 元 素 的 内 容 时 
就 会 出 现 插入 光标 ， 用 户 敲 击 键盘 就 可 以 插入 其 中 。 如 以 下 代码 ， 一 
个 HTML 元 素 创 建 了 一 个 可 编辑 的 区 域 : 


<div id="editor"contenteditable> 
Click to edit 


</div> 


浏览 器 可 能 为 表单 字段 和 contenteditable 元 素 支 持 自动 拼写 检查 。 在 支 
持 该 功能 的 浏 贤 絮 中 ， 检 查 可 能 默认 开启 或 天 闭 。 为 元 素 添 加 
spellcheck 属 性 来 显 式 开启 拼写 检查 ， 而 使 用 spellcheck=false 来 显 式 关 
闭 该 功能 (例如 ， 当 一 个 <textarea> 将 显示 源 代码 或 其 他 内 容 包 含 了 
字典 里 找 不 到 的 标识 符 时 ) 。 


将 Document 对 象 的 designMode 属 性 设置 为 字符 串 "on" 使 得 整个 文档 可 
编辑 。 (设置 为 "off" 将 恢复 为 只 读 文 档 。) designMode 属 性 并 没有 对 
应 的 HTML 属 性 。 如 下 代码 使 得 <iframe> 内 部 的 文档 可 编辑 (注意 ， 
这 里 用 了 例 13-5 中 的 onLoad0) 函 数 ) : 


<iframe id="editor"src="about:blank"></iframe>// 空 iframe 


<script> 


onLoad(function( ){//document 加 载 后 ， 


var editor=document .getElementById("editor");// 获 得 jframe 中 的 文档 对 象 ， 


editor .contentDocument.designMode="on";// 开 启 编辑 


}); 


</script> 


所 有 当今 的 浏览 器 都 支持 contenteditable 和 designMode 属 性 。 但 是 ， 当 
谈 到 它们 实际 的 可 编辑 行为 时 ， 它 们 是 不 太 兼 容 的 。 所 有 的 浏览 吉 都 
允许 插入 与 删除 文本 并 用 鼠标 与 键盘 移动 光标 。 在 所 有 的 浏览 器 中 ， 
Enter 键 男 起 一 行 ， 但 不 同 的 浏 贤 絮 生成 了 不 同 的 标记 。 有 些 开始 了 新 
的 段落 ， 而 其 他 的 只 是 插入 一 个 <br/> 元 系 。 


有 些 浏览 器 允许 键盘 快捷 键 (如 Ctrl+B) 来 加 粗 当 前 选中 的 文本 。 在 其 
他 浏览 器 (如 Firefox) 中 ， 标 准 的 字 处 理 快捷 键 (如 Ctrlt+B 和 Ctrl+1) 
被 绑 定 到 浏览 器 相关 的 其 他 功能 上 了 而 无 法 应 用 到 文本 编辑 器 上 。 


浏览 器 定义 了 多 项 文本 编辑 命令 ， 大 部 分 没有 键盘 快捷 键 。 为 了 执行 
这 些 命令 ， 应 该 使 用 Document 对 象 的 execCommand0 方 法 。 (注意 ， 这 
是 Document 的 方法 ， 而 不 是 设置 了 contenteditable 属 性 的 元 素 的 方法 。 
如 有 果 文 档 中 有 多 个 可 编辑 的 元 素 ， 命 令 将 目 动 应 用 到 选区 或 插入 光标 
所 在 那个 元 素 上 。) 用 execCommand0 执 行 的 命令 名 字 都 是 

如 "bold"、"subscript"、"justifycenter" 或 "insertimage" 之 类 的 字符 串 。 命 
令 名 是 execCommand() 的 第 一 个 参数 。 有 些 命令 还 需 个 值 参 数 
例如 ，"createlink" 需 要 一 个 超级 链接 URL。 理 论 上 ， 如 果 
execCommand() 的 第 二 个 参数 为 tue， 浏 览 器 会 自动 提示 用 户 输入 所 需 
值 。 但 为 了 提高 可 移植 性 ， 你 应 该 提示 用 户 输入 ， 并 传递 false 作 为 第 
二 参数 ， 传 递 用 户 输 入 的 值 作为 第 三 个 参数 。 


function bold(){document.execCommand("bold",false,url);} 


function link(){ 


Var url=prompt("Enter link destination"); 


if(url)document .execCcommand("createlink",false, ur]l); 


} 


execCommand() 所 支持 的 命令 通常 是 由 工具 栏 上 的 按钮 触发 的 。 当 要 解 
发 的 命令 不 可 用 时 ， 良 好 的 UI 会 使 对 应 的 按钮 无 效 。 可 以 给 
document.queryCommandSupportO 传 递 命令 名 来 查询 浏 虎 局 是 否 文 持 该 
命令 。 调 用 document.queryCommandEnabled() 来 查询 当前 所 使 用 的 命 
令 。 (例如 ， 一 条 需要 文本 选择 区 域 的 命令 在 无 选区 的 情况 下 有 可 能 
是 无 效 的 。) 有 一 些 命令 如 "bold" 和 "italic" 有 一 个 布尔 值 状态 ， 开 或 关 
取决 于 当前 选区 或 光标 的 位 置 。 这 些 命 令 通 常用 工具 栏 上 的 开 天 按 钮 
表示 。 要 判定 这 些 命 令 的 当前 状态 可 以 使 用 
document.queryCommandState()。 最 后 ， 有 些 命令 (如 "fontname") 有 
一 个 相关 联 的 值 (字体 系列 名 ) 。 用 document.queryCommandValue() 碍 
询 该 值 。 如 采 当 前 选取 的 文本 使 用 了 两 种 不 同 鸭 字体 ，"fontname" 的 得 
询 结果 是 不 确定 的 。 使 用 document.queryCommandIndeterm() 来 检测 这 
种 情况 。 


不 同 的 浏览 絮 实 现 了 不 同 的 编辑 命令 组 合 。 只 有 一 少 部 分 命令 得 到 了 
很 好 的 支持 ， 如 "bold"、"italic"、"createlink"、"undo" 和 "redo" 等 [8j-。 在 
写本 书 这 上段 时 间 里 HTML5 章 案 定 义 了 以 下 命令 。 但 由 于 它们 并 没有 人 被 
普遍 地 支持 ， 这 里 就 不 做 详细 的 文档 记录 : 


bold insertLineBreak selectAll 
createLink insertOrderedlist subscript 
delete insertUnorderedlist superscript 
formatBlock insertParagraph undo 
forwardDelete insertText unlink 
insertImage italic unselect 
insertHTML redo 


如 有 果 Web 应 用 程序 需要 富 文本 编辑 器 功能 ， 很 可 能 需要 采纳 一 个 预 移 构 
建 的 解决 浏览 器 之 间 的 各 种 差异 的 解决 方案 。 在 网 上 可 以 找到 很 多 这 
样 的 编辑 器 组 件 二 。 值 得 注意 的 是 ， 浏 览 器 内 置 的 编辑 功能 对 用 户 输 
入 少量 的 是 文本 来 说 古 足 够 强大 了 ， 但 要 解决 所 有 种 类 的 文档 的 编辑 


来 说 还 是 过 于 简陋 了。 特别 要 注意 ， 这 些 编辑 器 生成 的 HTML 标 记 很 可 
能 是 杂乱 无 章 的 。 


一 旦 用 户 编辑 了 某 元 素 的 内 容 ， 该 元 素 设 置 了 conteneditable 属 性 ， 就 可 
以 使 用 innerHTMEL 属 性 得 到 已 编辑 内 容 的 HTML 标记 。 如 何 处 理 该 宇文 
本 由 你 目 己 决定 。 可 以 把 它 存 储 在 隐 汤 的 表单 字段 中 ， 并 通过 提交 该 
表单 把 它 发 送 到 服务 器 。 可 以 使 用 第 18 章 描述 的 技术 直接 把 已 编辑 文 
0 。 或 者 使 用 第 20 章 的 技术 在 本 地 保存 用 户 的 编辑 文 


[1].CSS3 选 择 絮 规范 : http://www.w3.org/TR/css3-selectors/° 


[2] .选择 器 API 标 准 不 是 HIML5 的 一 部 分 ， 但 与 之 有 紧密 的 关联 。 见 
http:/www.w3.org/TR/selectors-api/ ° 


[3].Sizzle 独 立 版 本 参见 http:/sizzlejs.com 。 
[4| http:/www.w3.o0rg/TR/ElementTraversal ° 


[5]IE8 支 持 Element、HTMLDocument 和 Text 的 可 扩展 属性 ， 但 不 支持 
Node、Document、HTMLElement 或 HTMLElement 更 具体 的 子 类 型 的 可 
扩展 的 属性 。 


[6] 五 操作 命令 列表 ， 请 参 见 
http:/www.gquirksmode.org/dom/execCommand.html ° 


[7].YUI 和 和 Dojo 框架 包 售 了 编辑 器 组 件 。 这 里 也 有 一 些 其 他 的 可 选 方案 
http://en.wikipedia.org/wiki/Online_rich-text_editor ° 


第 16 章 ”脚本 化 CSS 


层 靶 样式 表 (Cascading Style Sheet，CSS) 是 一 种 指定 HTML 文 档 视 觉 
表现 的 标准 。CSS 的 本 意 是 想 让 视觉 设计 师 来 使 用 的 ， 它 允许 设计 师 精 
确 地 指定 文档 元 素 的 字体 、 颜 色 、 外 边 距 、 缩 进 、 边 框 ， 甚 至 是 定 

人 位。 不过， 客户 端 JavaScript 程 序 员 对 CSS 也 非常 感 兴趣 是 因为 样式 可 
以 通过 脚本 编程 。 脚 本 化 CSS 启 用 了 一 系列 有 趣 的 视觉 效果 ， 例 如 : 可 
以 创建 一 个 动画 让 文档 内 容 从 右 侧 “* 清 入 ” 也 能 创建 一 个 轮廓 伸缩 的 
列表 ， 在 里 面 用 户 自己 控制 显示 的 信息 量 。 首 次 推出 类 似 的 脚本 化 视 
觉 效 果 是 革命 性 的 。 创 造 这 些 效 果 的 JavaScript 和 CSS 技 术 以 前 统称 为 
动态 HTML (DHTML) ， 而 现在 ， 这 个 术语 已 经 不 再 流行 了 。 


CSS 是 个 复杂 的 标准 ， 在 写本 书 时 它 仍 在 活跃 的 开发 中 。CSS 本 吴 可 以 
写 一 本 书 ， 而 详细 介绍 它 则 超出 了 本 书 的 范围 由。 但 是 为 了 理解 CSS 
脚本 化 ， 我 们 必须 熟悉 CSS 基 础 和 最 常用 的 样式 属性 。 本 章 开 头 简 介 
CSS 概 况 ， 接 着 解释 了 一 些 关 键 样式 ， 它 们 最 合适 脚本 化 了 。 此 后 ， 
16.3 节 阐述 怎样 实现 CSS 脚 本 化 。16.3 节 介绍 最 常用 和 重要 的 技术 : 利 
用 HTML 的 style 属 性 值 ， 更 改 那 些 应 用 在 单个 文档 元 素 中 的 样式 。 元 素 
的 style 属 性 可 以 用 来 设置 样式 ， 但 是 它 不 适合 用 来 得 询 样式 。16.4 世 曾 
述 如 何 查询 元 素 的 “计算 样式 ”。16.5 节 阐述 如 何 通过 修改 元 素 的 style 属 
性 一 次 修改 元 素 的 多 个 样式 。 直 接 操 作 样 式 表 也 是 可 能 的 ， 但 不 太 般 
见 ，16.6 广 介绍 如 何 开 启 或 关闭 样 式 表 、 修 改 已 存在 样式 表 的 规则 以 及 
添加 新 的 样式 表 。 


16.1 CSS 概览 


HTML 文 档 的 视觉 显示 包含 很 多 变量 : 字体 、 颜 色 、 间 距 等 。CSS 标 准 
列举 了 这 些 变量 ， 我 们 称 为 样式 属性 。CSS 定 义 了 这 些 属 性 以 指定 字 
体 、 颜 色 、 外 边 中 、 边 框 、 青 景 图 片 、 文 本 对 章 方式 、 元 素 矿 寸 和 元 
素 位 置 。 为 了 定义 HTML 元 素 的 视觉 表现 ， 规 定 了 这 些 CSS 属 性 的 值 。 
为 此 ， 紧 跟着 属性 名 是 冒号 和 值 ， 例 如 : 


font-weight:bold 


为 了 全 面 地 描述 一 个 元 素 的 视觉 表现 ， 通 常 需要 指定 不 止 一 个 属性 。 
当 需 要 多 个 名 / 值 对 时 ， 它 们 之 间 用 分 号 隔 开 : 


margin-left:10%;/* 左 外 边 距 是 页 面 宽度 的 10%*/ 


text-indent: .5in;/*1/2 英 寸 缩 进 */ 


font-size:12pt;/* 字 体 尺 寸 12pt*/ 


0 CSS 忽 上 略 了 %/*” 和 “*/” 之 间 的 注释 ， 但 是 它 不 支持 “//”* 后 面 的 
壮 人 性 。 


有 两 种 方式 将 一 组 定义 视觉 表现 的 CSS 属 性 和 对 应 的 HTML 元 素 关联 在 
。 0 是 通过 给 每 个 单独 的 HTML 元 素 设置 style 属 性 值 的 方式 ， 
JR 大 天 术 式 : 


<p style="margin:20px;border:solid red 2px;"> 
This paragraph has increased margins and is surrounded by a rectangular red border. 


</p> 


尽管 如 此 ， 通 党 将 单独 的 HTML 元 聚 与 CSS 样 式 分 开 并 把 它们 定义 在 一 
个 样式 表 (stylesheet) 中 会 更 有 用 。 样 式 表 通过 选择 器 将 一 组 样式 属 
性 和 使 用 选择 器 (selector) 描述 的 一 组 HTML 元 素 关 联 在 一 起 。 一 个 
选择 器 基于 元 素 ID、 类 名 或 标签 名 或 更 多 条 件 指 定 〈 或 称 “ 选 择 ”) 一 
个 或 多 个 文档 中 的 元 素 。15.2.5 广 介绍 了 选择 侣 ， 并 揪 述 了 如 何 用 
querySelectorAll(0) 来 获得 匹配 选择 句 的 一 组 元 素 。 


CSS 样 式 表 的 基本 元 素 是 样式 规则 ， 它 们 由 选择 硕 和 包 囊 在 一 对 “{}j” 中 
的 CSS 属 性 和 值 所 组 成 。 每 个 样式 表 可 以 包含 任意 数量 的 样式 规则 : 


p{/* 选 择 器 "p" 匹 配 所 有 的 <p>> 元 素 */ 


text-indent: .5in;/* 首 行 缩 进 0.5 英 寸 */ 


} 


.warning{/* 任 何以 "warning" 类 命名 的 元 素 */ 


background-color :yellow;/* 设 置 为 黄色 背景 */ 


border:solid black 5px;/* 和 黑色 大 边框 */ 


用 <style> 和 </style> 标 签 把 一 个 CSS 样 式 表 包 起 来 放 在 <head> 标签 
里 ， 它 瓯 和 HTML 文 档 关 联 在 一 起 了 。 类 似 <script> 元 素 ，<style> 
元 素 内 容 也 不 会 补 当 成 HTML 来 解析 : 


<html> 


<head> <title>Test Document</title> 


<style> 


body{margin-left:30px;margin-right:15px;background-color:#ffffff} 


p{font-size:24px;} 


</style> 


</head> 


<body> <p>Testing, testing</p> 


</html> 


当 一 个 样式 表 需 要 在 网 站 的 多 个 页 面 中 使 用 时 ， 通 种 将 其 保存 在 目 己 
的 文件 中 较 好 ， 这 个 文件 不 售 任 何 HTML 标 签 。 它 可 以 被 引入 到 HTML 


页 面 中 。 但 是 ， 不 像 <script> 元 素 ，<style> 元 系 并 没有 src 必 性。 为 
了 在 页 面 中 引入 样式 表 ， 在 文档 的 <head> 中 使 用 < link > 标签 : 


<head> 


<title>Test Document</title> 


<link rel="stylesheet"href="mystyles.css"type="text/css"> 


</head> 


简 言 之 ， 这 就 是 CSS 的 工作 方式 。 关 于 CSS 还 有 几 个 值得 理解 的 知识 点 
将 在 以 下 几 节 中 逐一 解释 。 


16.1.1 层 释 


回想 一 下 ， 在 CSS 里 "C" 代 表 了 “ 层 侄 ”*”。 该 术语 指示 了 应 用 于 文档 中 任 
何 给 定 元 素 的 样式 规则 起 各 个 “来 源 ” 的 “ 层 且 "效果 : 


-Web 浏 览 器 的 默认 样式 表 
:文档 的 样式 表 
:每 个 独立 的 HTML 元 素 的 style 属 性 


当然 ，style 属 性 中 的 样式 覆盖 了 样式 表 中 的 样式 ， 并 且 文 档 的 样式 表 
中 的 样式 覆盖 了 浏览 絮 的 默认 样式 。 任 意 给 定 元 素 的 视觉 表现 可 能 是 
来 目 3 个 来 源 的 一 个 样式 组 合 。 一 个 元 素 甚至 可 能 匹配 样式 表 中 的 多 个 
选择 亏 ， 在 此 情况 下 ， 所 有 这 些 选择 瑚 的 关联 样式 属性 都 将 应 用 到 该 
元 素 上 。 (如 有 果 不 同 的 选择 器 为 同一 个 样式 属性 定义 了 不 同 的 值 ， 那 
么 与 最 具体 的 选择 融 相 关联 的 值 将 覆 兰 与 不 那么 具体 的 选择 融 相 关联 
的 值 。 不 过 ， 详 细 的 解释 超出 了 本 书 的 范围 。) 


为 显示 文档 元 素 ，Web 浏 唤 器 “必须 "组合 元 素 的 style 属 性 ， 包 括 来 目 文 
档 样式 表 中 所 有 匹配 的 选择 絮 的 样式 值 。 计 算 的 结果 是 一 组 实际 用 于 
I 
style) 。 


16.1.2 CSS 历 史 


CSS 是 一 个 相对 较 老 的 标准 。CSS1 在 1996 年 12 月 被 采纳 ， 它 定义 了 具 
体 的 颜色 、 字 体 、 外 边 距 、 边 框 和 其 他 的 基本 样式 。 类 似 Netscape 4 和 
Internet Explorer 4 这 样 的 老式 浏览 右 极 力 文 持 CSS1。 该 标准 的 第 二 版 

(CSS2) 在 1998 年 5 月 被 采纳 ， 它 定义 了 许多 高 级 特性 ， 最 著名 的 就 是 
支持 元 素 的 绝对 定位 。CSS 2.1 深 清和 更 正 了 CSS 2， 并 且 它 删除 了 浏 贤 
髓 供应 商 从 未 实现 的 功能 。 现 代 浏 览 器 基本 上 都 完全 支持 CSS2.1， 但 
是 低 于 IE 8 的 正 还 有 一 些 踪 漏 问 题 。 


在 CSS 的 后 继 工作 中 ， 针 对 版 本 3，CSS 规 范 已 经 分 拆 成 各 种 各 样 的 专 
门 化 模块 ， 分 别 来 通过 标准 化 进程 。 可 以 在 
http:Wwww.w3.org/Style/CSS/current-work 中 找到 CSS 规 范 和 工作 草案 。 


16.1.3 复合 属性 
某 些 经 党 在 一 起 使 用 的 样式 属性 可 以 组 合 起 来 使 用 一 个 特殊 的 复合 属 


性 。 例 如 ，f ont-family、font-size 和 font-weight 属 性 可 以 用 font 的 复合 属 
性 值 一 次 性 设置 : 


font:bold italic 24pt helvetica,; 


同样 ，border、margin 和 padding 属 性 加 是 为 元 素 的 每 条 边 都 设置 边框 、 
外 边 距 和 内 边 距 (元 素 和 边框 之 间 的 空间 ) 的 复合 属性 。 例 如 ， 代 和 替 
使 用 border 属 性 ， 可 以 使 用 border-left、border-right、border-top 和 border- 
bottom 属 性 来 独立 设置 边框 的 每 条 边 。 事 实 上 ， 这 些 属性 本 身 也 是 复合 
属性 ， 人 例如， 代替 指定 border-top， 可 以 分 别 指定 border-top-color、 
border-top-style 和 border-top-width 等 属性 。 


16.1.4” 非 标 准 属性 


当 浏 览 器 厂商 实现 非 标 准 CSS 属 性 时 ， 它 们 用 将 属性 名 前 加 了 一 个 厂商 
前 级 。Firefox 使 用 -moz-，Chrome 使 用 -webkit-， 而 下 使 用 -ms-， 它 们 其 
至 用 这 种 方式 来 实现 将 来 会 标准 化 的 属性 。 有 个 例子 是 border-radius 属 

性 ， 它 用 来 指定 元 素 的 圆 角 ， 在 Firefox 3 和 Safari 4 实验 性 的 实现 中 使 用 
了 前 级 。 一 旦 标准 已 经 充分 成 就 ，Firefox 4 和 Safari 5 就 移 除 了 前 级 ， 直 


接 支 持 border-radius。 (Chrome 和 Opera 已 经 支持 没有 前 级 的 border- 
radius 很 长 一 段 时 间 了 。 正 9 也 文 持 了 没有 前 绥 的 border-radius， 但 是 在 
IE 8 中 即使 有 前 级 也 没有 支持 。) 

在 不 同 浏览 器 中 有 不 同名 字 的 CSS 属 性 一 起 工作 ， 你 可 能 发 现 为 一 个 属 
性 定义 一 个 类 方式 比较 好 : 

.radius10{ 

border-radius:10px;/* 针 对 现代 浏览 器 */ 

-moz-border-radius:10px;/* 针 对 Firefox 3.x*/ 

-webkit-border-radius:10px;/* 针 对 Safari 3.2 和 4*/ 

} 

像 这 样 定义 一 个 类 叫 "radius10"， 可 以 将 它 添加 到 任意 需要 10 像 素 圆 角 
的 元 素 的 类 上 。 

16.1.5 CSS 举例 

例 16-1 十 一 个 定义 和 使 用 了 一 个 样式 表 的 HTML 文 件 ， 它 说 明了 标签 


名 、 类 和 ID 的 选择 响 ， 并 且 还 有 一 个 通过 style 属 性 定义 内 联 样式 的 示 
例 。 图 16-1 显 示 了 它 在 一 个 浏 蜗 器 中 是 如 何 洽 染 的 。 
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图 16-1 一 个 应 用 了 CSS 的 Web 页 面 
例 16-1: 定义 并 使 用 层 车 样式 表 


<head> 


<style type="text/css"> /* 指 定 标题 文本 显示 为 蓝 色 、 和 斜体 */ 


hi,h2{color:blue;font-style:italic}/* 


* 任 何 class="WARNING" 的 元 素 显 示 为 大 号 、 加 黑 文 本 ， 


* 它 有 很 宽 的 外 边 距 、 黄 色 背 景 和 宽 的 红色 边框 
*£ 
.WARNING{ 


font-weight:bold; 


font-size:150%; 


margin:9 1in 9 1in;/* 上 右 下 左 */ 


background-color :yellow; 


border:solid red 8px; 


padding:10px;/*4 条 边 都 是 10 像 素 */ 


人 


中 


下 
全 
> 
蔚 


*class="WARNING" 的 元 素 里 面 的 h1 或 h2 标 签 内 的 文本 ， 除 了 蓝 色 ， 六 


Niwa 


Wh 


.WARNING hi, .WARNING h2{text-align:center}/*id="special" 的 元 素 大 写 、 居 中 显示 */ 


#Sspecialf 


text-align:center,; 


text-transform:uppercase; 


</style> 


</head> 

<body> 

<h1i>Cascading Style Sheets Demo</hi> 

<div class="WARNING"> 

<h2>warning</h2> 

This is a warning! 

Notice how it grabs your attention with its bold text and bright colors. 
Also notice that the heading is centered and in blue italics. 

</div> 

<p id="special"> 

This paragraph is centered<br> 

and appears in uppercase letters.<br> 

<span style="text-transform:none"> 

Here we explicitly use an inline style to override the uppercase letters. 
</span> 


</p> 


前 治 的 CSS 


当 我 在 写本 章 时 ，CSS 正 在 进行 一 场 变 革 ， 现 代 浏 览 器 厂商 正在 实现 一 
些 强 大 的 新 样式 属性 : border-radius 、text-shadow、box-shadow 和 
column-count。 还 有 一 个 革命 性 的 CSS 新 特性 是 web 字 体 : 利用 CSS 的 
@font-face 规 则 可 以 下 载 并 使 用 自 定 义 字 体 。 (参见 


http://code.google.com/webfonts: 可 以 在 Web 上 免费 使 用 所 选 的 字体 ， 
并 提供 了 一 种 从 Google 的 服务 器 下 载 的 方便 机 制 。) 


CSS 中 另外 一 种 革命 性 的 发 展 是 CSS 过 渡 。 这 是 一 个 规范 草案 ， 它 能 自 
动 将 脚本 化 的 CSS 样 式 转换 成 平滑 的 动画 过 渡 。 ( 当 广 泛 地 实现 后 ， 它 
将 大 大 减少 类 似 在 16.3.1 世 展现 的 需要 CSS 的 动画 代码 。) 除了 IE， 

CSS 过 渡 在 现代 浏览 器 中 都 实现 了 ， 但 它 的 样式 属性 仍然 需要 加 厂商 前 
缀 。CSS 动 画 的 相关 建议 : 将 使 用 CSS 过 渡 作为 一 个 定义 更 加 复杂 的 动 
画 时 序 的 起 点 。CSS 动 画 当 前 只 有 在 基于 Webkit 的 浏览 器 上 实现 。 过 渡 
和 动画 在 本 章 中 都 不 会 提 到 ， 但 Web 开 发 者 应 该 引起 注意 。 


另外 一 个 CSS 草 案 是 CSS 变 换 ，Web 开 发 者 也 应 该 引起 注意 。 它 允许 对 
任何 元 素 应 用 任意 的 2D 仿 射 变 换 〈 用 一 个 矩阵 表示 旋转 、 缩 放 、 转 换 
或 任意 组 合 ) 。 所 有 的 现代 浏览 器 〈 包 括 IE 9 及 高 版 本 ) 使 用 三 商 前 组 
都 文 持 该 草案 。Safari 甚 至 支持 一 个 允许 3D 变 换 的 扩展 ， 但 是 其 他 厂商 
是 否 追 随 它们 的 脚步 还 不 得 而 知 。 


16.2 重要 的 CSS 属 性 


对 客户 端 程 序 员 来 说 ， 最 重要 的 CSS 特 性 是 那些 指定 文档 中 每 个 元 素 的 
可 见 性 、 尺 寸 和 精确 定位 的 属性 。 其 他 CSS 属 性 允许 指定 堆 稚 次 序 、 透 
明度 、 裁 前 区 域 、 外 边 距 、 内 边 距 、 边 框 和 颜色 。 为 了 脚本 化 CSS， 理 
解 这 些 样式 属性 的 工作 原理 是 非常 重要 的 。 表 格 16-1 做 了 总 结 ， 在 本 市 
以 下 内 容 中 将 做 详细 地 阐述 。 


表 16-1; 重要 的 CSS 样 式 属 性 
属性 

position 

top, left 

bottom, right 

width, height 


7-index 


display 

visibility 

clip 

overflow 

margin、 border、 padding 
background 

opacity 


描述 

各 定 元 素 的 定位 类 型 

指定 元 素 上 、 左 边缘 的 位 置 

攻 定 元 素 下 、 右 边缘 的 位 置 

定 元 素 的 尺 二 

和 定 元 素 相对 于 其 他 重 又 元素 的 “ 堆 台 次 序 ”， 定 义 了 元 
素 定位 的 第 三 个 维度 

指定 元 素 是 否 以 及 如 何 显示 

指定 元 素 是 否 可 见 

定义 元 素 的 “裁剪 区 域 ”， 只 显示 元 素 在 区 域内 的 部 分 
指定 元 素 比分 配 的 空间 要 大 时 的 处 理 方式 

定 元 素 的 空白 和 边框 

指定 元 素 的 背景 颜色 或 图 上 

指定 元 素 的 不 透明 度 【或 半 透 明度 ) ， 它 是 CSS3 的 属性 ， 
有 些 浏览 器 支持 ，IE 中 另 有 他 法 


16.2.1 用 CSS 定 位 元 素 
CSS 的 position 属 性 指定 了 应 用 到 元 素 上 的 定位 类 型 ， 如 下 是 4 个 可 能 


现 的 属性 值 : 


static 


默认 属性 。 指 定 元 素 按 照常 规 的 文档 内 容 流 (对 多 数 西 方 语言 而 言 就 
是 从 左 往 右 、 从 上 到 下 ) 进行 定位 。 静 态 定位 的 元 素 不 能 使 用 top、left 
和 类 似 其 他 属性 定位 。 欲 对 文档 元 和 聚 使 用 CSS 定 位 技术 ， 必 移 将 其 
position 属 性 设置 为 除 此 之 外 的 其 他 3 个 属性 值 。 


absolute 


该 值 指定 元 素 是 相对 于 它 包 含 的 元 到 进行 定位 。 相 对 于 所 有 其 他 的 元 
素 ， 绝 对 定位 的 元 素 是 独立 定位 的 ， 它 不 是 静态 定位 的 元 素 中 文档 流 
的 定位 要 么 是 相对 于 最 近 的 定位 祖先 元 隶 ， 要 么 是 相对 


fixed 

该 值 指定 元 素 是 相对 于 浏览 器 窗口 进行 定位 的 。 固 定 定位 的 元 素 总 是 
显示 在 那里 ， 不 会 随 着 文档 其 他 部 分 而 滚动 。 类 似 绝对 定位 的 元 素 ， 
固定 定位 的 元 素 和 所 有 其 他 元 素 是 独立 的 ， 它 不 是 文档 流 的 一 部 分 。 
大 多 数 现代 浏 贤 器 支持 固定 定位 , 除了 IE6。 


relative 


当 position 属 性 设置 为 relative， 元 素 按 照常 规 的 文档 流 进 行 布局 ， 它 的 
定位 相对 于 它 文 档 流 中 的 位 置 进行 调整 。 系 统 保 留 着 元 素 在 正常 文档 
流 中 的 空间 ， 不 会 因为 要 填充 空间 而 将 其 各 边 合拢 ， 也 不 会 将 元 妹 从 
新 的 位 置 “ 推 开 ”。 


一 旦 设置 了 元 系 的 position 属 性 为 除了 static 以 外 的 值 ， 束 可 以 通过 元 素 
的 left、top、right 和 bottom 属 性 的 一 些 组 合 指定 元 素 的 位 置 。 最 剃 用 的 
定位 技术 是 使 用 left 和 top 属 性 指定 元 素 的 左边 缘 到 容器 (通常 是 文档 本 
身 ) 左边 缘 的 距离 ， 元 素 的 上 边缘 到 容器 上 边缘 的 距离 。 例 如 ， 要 放 
置 一 个 距离 文档 左 、 上 边缘 各 100 像 素 的 元 素 ， 可 以 在 style 属 性 中 指定 
如 下 CSS 样 式 : 


<div style="position:absolute;left:100px;top:100px;"> 


如 果 元 素 使 用 绝对 定位 ， 它 的 top 和 left 属 性 应 该 解释 为 它 是 相对 于 其 
position 属 性 设置 为 除 static 值 以 外 的 祖先 元 素 。 如 果 绝 对 定位 的 元 素 没 


有 定位 过 的 祖先 ， 则 它 的 top 和 left 属 性 使 用 文档 坐标 进行 度量 一 一 就 十 
相对 于 文档 左上 和 角 的 偏 移 量 。 如 采 你 想 相对 于 一 个 属于 常规 文档 流 中 
的 容器 器 绝对 定位 一 个 元 于 ， 则 将 容器 的 position 指 定 为 relative，top 和 left 
指定 为 0px。 这 就 让 容器 变 成 了 动态 定位 ， 但 它 仍 留 在 文档 流 中 原来 的 
位 置 。 任 何 绝对 定位 元 素 的 子 元 素 都 相对 于 容 需 进行 定位 。 


虽然 使 用 left 和 top 指 定 元 聚 的 赤 上 角 位 置 是 最 常见 的 定位 方法 ， 但 也 可 
以 使 用 bott om 和 right 指 定 元 素 相 对 于 容 磊 的 下 和 右边 经 进行 定位。 例 

如 ， 让 一 个 元 素 的 石 下 角 就 在 文档 的 石 下 角 进 行 定 位 (假设 元 素 没有 

岁 套 在 其 他 动态 元 素 中 ) ， 使 用 如 下 样式 : 


position:absolute;right:QOpx;bottom:Opx; 


定位 一 个 元 素 让 其 右 、 上 边缘 相对 于 窗口 石 、 上 边缘 各 10 像 素 ， 并 且 
不 随 文档 的 滚动 而 滚动 ， 可 以 使 用 如 下 样式 : 


position:fixed;right:10px;top:1i0px; 


除了 定位 元 素 以 外 ，CSS 人 允许 指定 它们 的 尺寸 。 这 通常 通过 指定 width 
和 height 样 式 属性 的 值 完成 。 例 如 ， 以 下 HTML 代 码 创 建 了 一 个 绝对 定 
位 的 空 元 素 。 它 的 width、height 和 background-color 属 性 使 得 它 看 上 去 显 
示 为 一 个 监 色 的 小 方块 : 


<div style="position:absolute;top:10px;left:10px; 
width:10px;height:1i0px;background-color:blue"> 
</div> 


男 外 一 种 指定 元 素 的 宽度 的 方法 是 同时 指定 left 和 right 属 性 。 同 样 ， 通 
过 指定 top 和 bottom 属 性 来 指定 元 素 的 高 度 。 但 是 ， 如 有 果 同 时 指定 left、 


right 和 width， 那 么 width 属性 将 履 盖 right 属 性; 如果 元 素 的 高 度 重复 限 
定 ，height 必 性 优先 于 bottom 属 性 。 


请 牢记 ， 没 必要 给 每 一 个 动态 元 素 指定 太 寸 ， 某 些 元 素 (如 图 片 ) 具 
有 固有 尺寸 。 而 且 ， 对 包含 文本 或 其 他 流 式 内 容 的 动态 元 素 通 弟 指 定 
想 要 的 宽度 吕 足 够 了 ， 让 元 素 内 容 布局 来 自动 决定 它 的 高 度 。 


CSS 指 定位 置 和 大 小 属性 是 有 单位 的 。 在 上 面 的 例子 中 ， 定 位 和 尺寸 属 
性 值 以 "px" 结 尾 ， 代 表 像 素 。 也 可 以 使 用 英寸 ("in") 、 厘 米 
Ee 、 点 ("pt") 和 字体 行 高 ("em"， 一 种 当前 字体 行 高 的 度 

量 ) 。 

相对 于 使 用 上 面 的 单位 来 指定 绝对 定位 和 尺寸 ，CSS 也 允许 指定 元 素 的 
位 置 和 尺寸 为 其 容器 元 素 的 百分比 。 例 如 ， 以 下 HTML 代 码 创 建 了 一 个 
墨 边框 空 元 素 ， 它 的 宽度 和 高 度 为 其 容器 元 素 (或 是 浏览 器 窗口 ) 的 
50%， 抽 中 显示 : 


<div style="position:absolute;left:25%;top:25%;width:50%;height:50%,; 
border:2px solid black"> 


</div> 


1. 第 三 个 维度 : z-index 


如 你 所 见 ，left、top、right 和 bottom 属 性 是 在 容器 元 素 中 的 二 维 坐 标 中 
日 定 X 和 YY 坐标 。z-index 属 性 定义 了 第 三 个 维度 : 它 允 许 指定 元 素 的 堆 
琶 次 序 ， 并 指示 两 个 或 多 个 重 县 元 素 中 的 哪 一 个 应 该 绘制 在 其 他 的 上 
面 。z-index 默 认为 0， 可 以 是 正 或 负 的 整数 。 当 两 个 或 多 个 元 素 重 县 在 
一 起 上 时， 它们 是 按照 从 低 到 高 的 z-index 顺序 绘制 的 。 如 果 重 又 元 素 的 z- 
index 值 一 样 ， 它 们 按照 在 文档 中 出 现 的 顺序 绘制 ， 也 即 最 后 一 个 重 奎 
的 元 素 显 示 在 最 上 面 。 


注意 ，z-index 只 对 兄弟 元 素 (例如 ， 同 一 个 容器 的 子 元 素 ) 应 用 堆肥 
效 打 。 如 采 两 个 元 系 不 定 见 种 元 素 之 间 的 重 友 ， 那 么 设置 它们 的 z- 
index 属 性 无 法 决定 哪 一 个 显示 在 最 上 面 。 相 反 , “必须” 设置 这 两 个 重 
县 元 素 的 兄弟 容器 的 z-index 属 性 来 达到 目的 。 


非 定位 元 素 〈 人 例如， 默认 使 用 position:static 定 位 ) 总 是 以 防止 重 县 的 方 
式 进 行 布局 ， 因 此 z-index 属性 不 会 应 用 到 它们 上 面 。 尺 管 如 此 ， 它 们 
默认 的 z-index 值 为 0， 这 意味 着 z-index 为 正 值 的 定位 元 素 显 示 在 常规 文 
档 流 的 上 面 ， 而 z-index 为 负 值 的 定位 元 素 显 示 在 常规 文档 流 的 下 面 。 


2.CSS 定 位 示例 : 文本 阴影 
CSS3 规 苑 包 侣 一 个 textrshadow 属 性 以 在 文本 下 产生 阴影 效果 。 许 多 现 


在 的 浏览 志 都 文 持 该 效 采 ， 但 是 可 以 用 CSS 定 位 属性 实现 夫 似 的 效 末 ， 
只 要 重复 输出 这 段 文本 并 重新 定义 以 下 样式 : 


<1--text-shadow 属 性 自动 产生 阴影 效果 - -> 


<span style="text-shadow:3px 3px 1px#888">Shadowed</span> 


<1-- 


里 我 们 利用 定位 可 以 产生 相同 的 效果 - - > 


ft 


<span style="position:relative;"> 


Shadowed<1-- 这 里 是 投射 阴影 的 文本 - - > 


<span style="position:absolute;top:3px;left:3px;z-index:-1;color:#888"> 


Shadowed< !- -这 里 是 阴影 - - > 


</span> 


</span> 


需要 投射 阴 景 的 文本 包 可 在 相对 定位 鸭 <span 之 标 等 中 ， 不 用 设置 其 他 
定位 属性 ， 所 以 文本 显示 在 其 正常 的 位 置 上 。 阴 影 位 于 一 个 绝对 定位 
的 <span> 中 ， 它 包含 在 上 面 那 个 相对 定位 的 <span> 中， 这 样 z-index 
属性 确保 阴影 在 其 文本 的 下 面 。 


16.2.2 边框、 外边 距 和 内 边 距 


CSS 人 允许 指定 元 素 周围 的 边框 、 外 边 距 和 内 边 距 。 元 素 的 边框 是 一 个 围 
绕 (或 部 分 围绕 ;元素 绘制 的 矩形 (或 者 CSS3 中 的 圆 角 矩形) 。 属 性 
还 允许 指定 边框 的 样式 、 颜 色 和 厚度 : 


border:solid black 1px;/* 绘 制 一 个 1 像素 的 黑色 实 线 边 框 */ 


border:3px dotted red;/* 绘 制 一 个 3 像素 的 红色 点 线 边框 */ 


可 以 用 单独 的 CSS 属 性 指定 边框 的 宽度 、 样 式 和 颜色 ， 也 可 以 指定 元 素 
的 每 条 边 的 边框 。 例 如 ， 要 绘制 元 素 下 面 的 一 条 线 ， 只 要 简单 地 指定 
它 的 border-bottom 属 性 。 甚 至 可 以 为 元 素 的 单条 边 指定 宽度 、 样 式 和 颜 
色 ， 如 border-top-width 和 border-left-color 属 性 。 


在 CSS3 中 ， 可 以 通过 border-radius 属 性 指定 圆滑 边框 的 所 有 角 ， 也 可 以 
用 更 明确 的 属性 名 设置 单独 的 圆 角 。 例 如 : 


border-top-right-radius:50px; 


margin 和 padding 属 性 都 指定 元 素 周围 的 空 日 衬 间 。 主 要 的 区 别 在 于 ， 
margin 指 定 边 框 外 面 一 一 边框 和 相 邻 元 素 之 间 的 空间 ， 而 padding 指 定 
边框 之 内 一 一 边框 和 元 素 内 容 之 间 的 空间 。 外 边 距 提供 了 利 规 文档 流 
中 〈 可 能 有 边框 的 ) 元 素 和 它 的 “邻居 ”之 间 的 视觉 空间 。 内 边 距 保持 
元 素 内 容 和 它 的 边框 在 视觉 上 分 离 。 如 末 元 素 内 没有 边框 ， 内 边 距 往 
往 也 走 没 有 必要 的 。 如 条 元 陛 是 动态 定位 的 ， 而 不 是 音 规 文档 流 的 一 
部 分 ， 它 的 外 边 距 就 无 关 要 让 了 。 


使 用 margin 和 padding 属 性 指定 元 素 的 外 边 距 和 内 边 距 : 


margin:5px;padding:5px; 


也 可 以 为 元 素 单 独 的 边 指定 外 边 距 和 内 边 距 : 


margin-left:25px; 


padding-bottom:S5px; 


或 者 可 以 用 margin 和 padding 属 性 直接 为 元 素 所 有 的 4 条 边 指 定 外 边 距 和 
内 边 距 。 首 先 指定 上 边 的 值 ， 然 后 按照 顺 时 针 方 式 设 置 : 上 、 右 、 下 
和 左边 的 值 。 例 如 ， 以 下 代码 显示 了 给 元 素 的 4 条 边 设置 了 不 同 的 内 边 
距 值 ， 两 种 方式 是 等 价 的 。 


padding:1px 2px 3px 4px;/* 以 上 代码 等 价 于 以 下 4 行 代码 */ 


padding-top:1px; 
padding-right:2px; 
padding-bottom:3px; 


padding-1left:4px; 


16.2.3 ”CSS 盒 模型 和 定位 细 广 


以 上 描述 的 margin、border 和 padding 等 样式 属性 在 脚本 化 时 很 可 能 不 经 
常 使 用 。 因 为 它们 是 CSS 盒 模型 (box model) 的 一 部 分 ， 而 为 了 真正 
理解 CSS 定 位 属性 ， 应 该 理解 这 个 盒 模型 。 


图 16-2 说 明了 CSS 盒 模型 与 有 边框 和 内 边 距 元 素 的 tobpp、left、width 和 
height 等 意义 的 视觉 解释 。 


图 16-2 显 示 了 一 个 绝对 定位 的 元 素 崩 套 在 一 个 定位 的 容器 元 素 中 。 容 各 
和 包含 的 元 素 部 有 边框 和 内 边 距 ， 图 例 说 明了 指定 容 紫 元 素 每 条 边 的 
内 边 距 和 边框 宽度 的 CSS 属 性 。 注 意外 边 距 属性 并 没有 图 示 : 外 边 距 与 
绝对 定位 的 元 于 无 和 天。 


图 16-2 CSS 盒 模型 : 边框、 内 边 距 和 定位 属性 


图 16-2 也 包含 了 其 他 重要 的 信息 。 首 先 ，width 和 height 只 指定 了 元 素 内 
容 区 域 的 尺寸 ， 它 不 包含 元 素 的 内 边 距 或 边框 (或 外 边 距 ) 所 需 的 任 
何 额外 空间 。 为 了 确定 有 边框 元 素 在 屏幕 上 的 全 尺寸 ， 必 须 把 元 素 的 
宽度 加 上 左右 两 边 的 内 边 距 和 左右 两 个 边框 宽度 ， 把 元 素 的 高 度 加 上 
上 下 两 边 的 内 边 距 和 上 下 两 个 边框 宽度 。 


其 次 ，left 和 top 属 性 指定 了 从 容器 边框 内 侧 到 定位 元 素 边 框 外 侧 的 距 

离 。 这 些 属性 不 是 从 容器 内 容 区 域 的 左上 角 开 始 度 量 的 ， 而 是 从 容器 
内 边 距 的 左上 角 开 始 的 。 同 样 ，right 和 bottom 属 性 是 从 容器 内 边 距 的 右 
下 角 开 始 度量 的 。 


有 一 个 例子 清楚 地 说 明了 这 一 点 。 假 设 已 创建 一 个 在 内 容 区 域 四 周 有 
10 像 素 内 边 距 和 5 像 聚 边 框 的 动态 定位 的 容 右 元 素 。 现 假设 要 动态 定位 
一 个 容器 中 的 子 元 素 。 如 果 将 其 left 属 性 设置 为 "0px"， 你 会 发 现 子 元 素 
的 左边 绿 正好 靠 在 容 右 左边 框 的 右边 ， 这 样子 元 素 窗 盖 了 容 右 的 内 边 
距 ， 本 意 是 要 留 出 空白 (指定 容器 内 边 距 的 目的 ，， 而 空 日 却 没有 

了 。 如 果 想 在 容器 内 容 区 域 的 左上 角 定位 子 元 素 ， 束 必须 将 其 left 和 top 
属性 指定 为 "10px"。 


边框 盒 模型 和 box-sizing 属 性 


标准 CSS 盒 模型 规定 width 和 height 样 式 属性 给 定 内 容 区 域 的 尺寸 ， 并 且 
不 包含 内 边 距 和 边框 。 可 以 称 此 盒 模 型 为 “< 内容 盒 模型 *。 在 老 版 的 下 里 
和 新 版 的 CSS 中 都 有 一 些 例 外 ， 在 IE 6 之 前 和 当 IE 6~8 在 “怪异 模式 ”下 
显示 一 个 页 面 时 (页面 中 缺少 <!DOCTYPE > 或 有 一 个 不 够 严格 的 
doctype 时 ) ，width 和 height 属 性 确 是 包含 内 边 距 和 边框 宽度 的 。 


IE 的 行为 是 一 个 bug， 但 是 IE 的 非 标准 盒 模 型 通常 也 很 有 和 用。 认识 到 这 
一 点 ，CSS33| 进 了 box-sizing 属 性 ， 默 认 值 是 content-box， 它 指定 了 上 
面 摘 述 的 标准 的 盒 模 型 。 如 果 蔡 换 为 box-sizing:border-box， 浏 览 器 将 
会 为 那个 元 素 应 用 下 的 盒 模 型 ， 即 width 和 height 属 性 将 包含 边框 和 内 边 
距 。 当 想 以 百分比 形式 为 元 陛 设 置 点 体 斥 寸 ， 又 想 以 像 隶 单位 指定 边 
框 和 内 边 距 时 ， 边 框 使 模型 特别 有 用 : 


<div style="box-sizing:border-box;width:50%; 

padding:10px;border:solid black 2px;"> 

box-sizing 属 性 在 当今 所 有 的 浏 贤 万 中 都 文 择 ， 但 是 还 没有 不 市 前 级 通 
用 地 实现 。 在 Chrome 和 Safari 中 ， 使 用 -webkit-box-sizing。 在 Firefox 
中 ， 使 用 -moz-box-sizing。 在 Opera 和 IE 8 及 其 更 高 版 本 中 ， 可 以 使 用 不 
种 前 级 的 box-sizing 。 


边框 盒 模型 在 未 来 CSS3 中 的 一 个 可 选 方案 在 使 用 盒子 矿 才 的 计算 值 : 


<div style="width:calc(50%-12px);padding:10px;border:solid black 2px;"> 


在 正 9 中 支持 使 用 calc() 计 算 CSS 的 值 ， 在 Firefox 4 为 -moz-calc()。 
16.2.4” 元素 显示 和 可 见 性 


两 个 CSS 属 性 影响 了 文档 元 标的 可 见 性 ，visibility 和 display 。visibility 属 
性 很 帘 单 : 当 其 值 设 置 为 hidden 时 ， 该 元 素 不 显示 ; 当 其 值 设 置 为 
visible 时 ， 该 元 素 显 示 。display 属 性 更 加 通用 ， 它 用 来 为 接收 它 的 容器 
指定 元 素 的 显示 类 型 。 它 指定 元 素 是 否 是 块 状元 素 、 内 联 元 素 、 列 表 
项 等 。 但 是 ， 如 果 display 设 置 为 none， 受 影响 的 元 素 将 不 显示 ， 甚 至 根 
本 没有 布局 。 


visibility 和 display 属 性 之 间 的 差别 可 以 从 它们 对 使 用 静态 或 相当 定位 的 
元 素 的 影响 中 看 到 。 对 于 一 个 常规 布局 流 中 的 元 素 ， 设 置 visibility 属 性 
为 hidden 使 得 元 素 不 可 见 ， 但 是 在 文档 布局 中 仍 保留 了 它 的 空间 。 类似 
的 元 素 可 以 重复 隐藏 和 显示 而 不 改变 文档 布局 。 但 是 ， 如 果 元 素 的 
display 属 性 设置 为 none， 在 文档 布局 中 不 再 给 它 分 配 空间 ， 它 各 边 的 元 
素 会 合拢， 就 当 它 从 来 不 存在 。 例 如 ， 在 创建 展开 和 折 肥 轮廓 的 效果 
时 display 属 性 很 有 用 。 


visibility 和 display 属 性 对 绝对 和 国定 定位 的 元 素 的 影响 是 等 价 的 ， 因 为 
这 些 元 和 聚 都 不 是 文档 布局 的 一 部 分 。 然 而 ， 在 隐藏 和 显示 定位 元 素 时 
一 般 首 选 visibility 属 性 。 


注意 ， 用 visibility 和 display 属 性 使 得 元 素 不 可 见 没什么 意义 ， 除 非 使 用 
JavaScript 动 态 设 置 这 些 属性 让 元 素 在 某 一 刻 可 见 ! 将 在 本 革 后 续 内 容 
中 看 到 如 何 实现 这 种 技术 。 


16.2.5 颜色、 有 透明度 和 半 透 明度 


可 以 通过 CSSs 的 color 属 性 指定 文档 元 素 包 含 的 文本 的 颜色 ， 并 可 以 用 
background-color 属 性 指定 任何 元 素 的 育 景 颜色 。 早 些 时 候 ， 我 们 看 到 
可 以 用 border-color 或 border 复 合 属性 指定 元 素 边 框 的 颜色 。 


针对 边框 的 讨论 包含 一 些 例子 ， 使 用 常见 颜色 的 英文 名 字 
(如 "red" 和 "black") 来 直接 指定 边框 的 颜色 。CSS 文 持 大 二 英文 颜色 名 
字 ， 但 是 在 CSS 中 更 一 般 的 指定 颜色 的 语法 是 使 用 十 六 进 制 数 分 别 指定 


组 成 颜色 的 红 、 绿 和 蓝 色 分 量 ， 每 个 分 量 可 以 使 用 一 位 或 两 位 数字 。 
例如 : 


#000000/* 黑 色 */ 


#fff/* 白 色 */ 


#f00/* 亮 红色 */ 


#404080/* 黑 暗 不 饱和 蓝 色 * 


~ 


#CCC/* 浅 灰色 */ 


CSS3 也 为 指定 RGBA 色 彩 空间 〈 红 、 绿 、 赣 色 值 加 上 指定 颜色 透明 度 

的 alpha 值 ) 中 的 颜色 定义 了 语法 。 所 有 现代 的 浏览 器 (除了 IE) 都 文 

持 RGBA， 期 竺 在 IE 9 中 也 能 支持 。CSS3 也 定义 了 对 HSL (色相 -饱和 

度 - 值 ) 和 HSLA 颜 色 规 范 的 支持 。 它 们 在 Firefox、Safari 和 Chrome 中 都 
文 持 ， 除 了 IE。 


CSS 人 允许 指定 元 素 确 切 的 位 置 、 斥 寸 、 育 景 颜 色 和 边框 颜色 ， 因 为 能 绘 
制 矩形 和 〈 当 减少 高 度 和 宽度 时 ) 水 乎 、 垂 直线 条 它 有 了 基本 的 图 形 
能 力 。 本 书 上 一 版 本 包含 了 一 个 利用 CSS 图 形 的 柱状 图 例子 ， 但 在 本 书 
中 它 被 < canvas > 元 素 扩 展 的 属性 所 苦 代 。 (参见 第 21 章 更 多 关于 脚本 
化 客户 端 图 形 的 内 容 。) 


除了 background-color 属 性 ， 也 可 以 为 元 素 指 定 背 景 图 像 。background- 
image 属 性 指定 使 用 的 图 像 ，background-attachment、background- 
position 和 background-repeat 属 性 指定 如 何 绘制 该 图 像 的 一 些 高 级 细节 。 
复合 属性 background 人 允许 一 起 指定 这 些 属性 值 。 利 用 这 些 背 景 图 像 属性 
可 以 创建 有 趣 的 视觉 效果 ， 介 绍 它们 超出 了 本 书 的 范围 。 


如 琳 没 有 为 元 取 指 是 百 景 闫 色 或 图 像 ， 它 的 痛 景 通 第 远 明 ， 理 解 这 点 
非常 重要 。 例 如 ， 如 果 一 个 <div> 绝 对 定位 在 常规 文档 流 中 一 些 已 存 
在 的 文本 上 方 ， 默 认 情 况 下 ， 文 本 将 透 过 <div> 元素 显 示 出 来 。 如 来 
<div> 同时 包含 了 目 己 的 文本 ， 了 字母 将 重合 在 一 起 而 变 得 模糊 不 清 。 
尽管 如 此 ， 默 认 情 况 下 不 是 所 有 的 元 素 都 是 透明 的 。 例 如 ， 具 有 透明 
背景 的 表单 元 素 看 起 来 不 透明 ， 并 且 元 素 (如 <button>) 有 默认 的 背 


景 颜 色 。 用 background-color 属 性 可 以 履 盖 默认 颜色 ， 如 果 强 烈 要 求 可 
以 将 其 显 式 设置 为 "transparent" 。 


到 目前 为 止 所 讨论 的 透明 度 其 实 是 非 此 即 彼 的 : 元 素 的 青 景 不 是 全 透 
明 就 是 全 不 透明 的 。 指 定 元 素 (内 容 的 前 景 和 背景 为 半 透 明 也 是 可 
能 的 (示例 见 图 16-3) 。 用 CSS3 的 opacity 属 性 来 处 理 ， 该 属性 值 是 0~- 
1 之 间 的 数字 ，1 代 表 100% 不 透明 (默认 值 ) ， 而 0 代表 09% 不 透明 (或 
100% 透 明 ) 。opacity 属 性 在 当今 所 有 浏 宽 絮 中 都 支持 ， 除 了 IE。IE 提 
供 类 似 的 可 选 方式 : 正 特 有 的 fter 必 性 。 让 元 素 75% 不 透明 ， 可 以 使 用 
以 下 CSS 样 式 : 


opacity: .75;/* 透 明度 ，CSS3 标 准 属性 */ 


filter:alpha(opacity=75) ;/*IE 透 明度 ， 注 意 没 有 小 数 点 */ 


16.2.6 ”部 分 可 见 : overflow 和 clip 


visibility 属 性 可 以 让 文档 元 素 完 全 隐藏 ， 而 overflow 和 dlip 属 性 允许 只 显 

示 元 素 的 一 部 分 。overflow 属 性 指定 内 容 超出 元 素 的 大 小 (例如 ， 用 

I 时 该 如 何 显示 。 该 属性 允许 的 值 和 含义 如 
/I\: 


visible 
默认 值 。 如 果 需 要 ， 内 容 可 以 溢出 并 绘制 在 元 素 的 边框 的 外 面 。 
hidden 


裁剪 掉 和 隐藏 溢出 的 内 容 ， 即 在 元 素 尺寸 和 定位 属性 值 定义 的 区 域外 
不 会 绘制 内 容 


scroll 


元 素 一 直 显 示 水 平和 垂直 滚动 条 。 如 采 内 容 超 出 元 素 矿 寸 ， 允 许 用 户 
通过 滚动 来 查看 额外 的 内 容 。 此 属性 值 负责 文 档 在 计算 机 屏 医 中 的 显 
示 ， 例 如 ， 打 印 纸 质 文档 时 滚动 条 是 没有 意义 的 。 


auto 

深 动 条 只 在 内 容 超出 元 素 尺 寸 时 显示 ， 而 非 一 直 显 示 。 

overflow 属 性 允许 指定 当 内 容 超出 元 素 边 框 时 该 如 何 显示 ， 而 clip 属 性 
确切 地 指定 了 应 该 显示 元 素 的 哪个 部 分 ， 它 不 管 元 素 是 否 洲 出。 在 创 
建 元 素 渐进 显示 的 脚本 效果 时 候 该 属性 特别 有 用 。 

clip 属 性 的 值 指定 了 元 系 的 裁剪 区 域 。 在 CSS2 中 ， 裁 前 区域 是 矩形 的 ， 


不 过 dlip 属 性 的 语法 预 留 了 开放 的 可 能 ， 该 标准 将 来 的 版 本 将 文 持 除了 
窍 形 以 外 其 他 形状 的 裁 甬 。clip 属 性 的 语法 起 : 


rect(top right bottom left) 


相对 于 元 素 边 框 的 左上 角 ，top、right、bottom 和 left 4 个 值 指 定 了 裁剪 
矩形 的 边界 。 例 如 ， 要 只 显示 元 素 的 100x100 像 到 大 小 部 分 ， 可 以 赋予 
该 元 素 style 属 性 : 


style="clip:rect(Opx 100px 100px QOpx);" 


注意 ， 圆 括号 中 的 4 个 值 是 长 度 ， 所 以 “必须 ”包含 明确 的 单位 ， 如 p x 代 
表 像 又 。 不 允许 使 用 百分比 。 可 以 指定 负 值 ， 让 裁 前 区 域 超出 为 元 素 
指定 的 边框 太 寸 。 也 可 以 为 任何 4 个 值 使 用 auto 天 键 字 来 指定 裁剪 区 域 
的 边 绿 束 是 元 素 边 框 的 对 应 边缘 。 例 如 ， 用 style 属 性 指定 只 显示 元 素 
最 左边 的 100 像 系 : 


style="clip:rect(auto 100px auto auto);" 


注意 ， 值 之 间 没 有 逗号 ， 裁 前 区 域 从 上 边缘 开始 顺 时 针 设 置 。 将 clip 设 
置 为 auto 来 停 用 裁剪 功能 。 


16.2.7 示例 : 重 徐 半 透 明 窗 口 


本 万 用 一 个 展示 很 多 讨论 过 的 CSS 属 性 的 例子 来 结束 。 例 16-2 用 CSS 在 
浏览 器 窗口 中 创建 滚动 、 重 至 和 半 透 明 的 视觉 效果 。 视 觉 效 果 如 图 16-3 
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图 16-3 用 CSS 创 建 的 窗口 


例子 代码 不 包含 JavaScript 代 码 和 事件 处 理 程序 ， 因 此 无 法 和 窗口 进行 
交互 〈 除 了 可 以 滚动 它们 ) ， 但 是 足以 证 明 CSS 可 以 达到 的 强大 效果 。 


例 16-2: 用 CSS 显 示 窗 口 


<!DOCTYPE html> 


<head> 


<style type="text/css">/** 


*This is a CSS stylesheet that defines three style rules that we use 


*in the body of the document to create a"window"visual effect ， 


*The rules use positioning properties to set the overall size of the window 


*and the position of its components.Changing the size of the window 


*requires careful changes to positioning properties in all three rules. 


类 


div .window{/* 指 定 窗口 的 尺寸 和 边框 */ 


r 


position:absolute;/*position 在 其 他 地 方 指定 */ 


width:3060px;height:200px;/* 尺寸 ， 不 含 边 框 */ 


border:3px outset gray;/* 注 意 3D"outset" 边 框 效果 */ 


div .titlebar{/* 指 定 标 题 栏 的 定位 、 尺 寸 和 样式 */ 


position:absolute;/* 它 是 定位 元 素 */ 


top:0px;height:18px;/* 标 题 栏 18px+ 内 边 距 和 边框 */ 


width:290px;/*290+5px 左 、 右 内 边 距 =300*/ 


background-color :#aaai;Vx* 标 题 栏 颜色 */ 


border-bottom:groove gray 2px;/* 标 题 栏 只 有 底部 边框 */ 


padding:3px 5px 2px 5px;/* 顺 时 针 值 :top、right、bottom、left*/ 


font:bold 11pt sans-serif;/* 标 题 栏 字体 */ 


div .content{/* 指 定 窗口 内 容 的 尺寸 、 定 位 和 滚动 */ 


position:absolute;/* 它 是 定位 元 素 */ 


top:25px;/*18px 标 题 +2px 边 框 +3px+2px 内 边 距 */ 


[本 


height:165px;/*200px 总 共 -25px 标 题 栏 -10pX 内 边 昌 


yh 


[IDOL 


width:290px;/*300px 宽 度 -10px 内 边 距 */ 


padding:5px;/*4 条 边 上 都 有 空间 */ 


overflow:auto;/* 如 果 需 要 显示 深 动 条 */ 


background-color:#fff;/* 默 认 白 色 背 景 */ 


div.translucent{/* 此 类 让 窗口 部 分 透明 */ 


opacity: .75;/* 透 明度 标准 样式 */ 


filter:alpha(opacity=75);/*IE 的 透明 度 */ 


</style> 


</head> 


<body> 


<1-- 定 义 一 个 窗口 "window"div 有 一 个 标题 栏 和 - - > 


<!-- 其 内 是 一 个 内 容 div。 注 意 ， 如 何 设置 定位 - - > 


el 
度 
1 
1 
V 


< 1!-- 一 个 扩充 了 样式 表 的 style 属 性 


<div class="window"style="]eft:10px;top:10px;z-index:10;"> 


<div class="titlebar">Test Window</div> 


<div class="content"> 


1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><1!-- 若 干 行 --> 


1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0<br><1!- 展 示 滚 动 - - > 


</div> 
</div> 
<1-- 定 义 男 一 个 窗口 :， 用 不 同 的 定位 、 颜 色 和 字体 重量 - - > 


<div class="window"style="left:75px;top:110px;z-index:20;"> 


<div class="titlebar">Another window</div> 


<div class="content translucent" 


style="background-color:#ccc;font-weight:bold;"> 


This is another window.Its<tt>z-index</tt>puts it on top of the other one. 


CSS Styles make its content area translucent,in browsers that Support that. 


</div> 


</div> 


该 例子 主要 的 不 足 是 样式 表 将 所 有 窗口 的 尺寸 固定 了 。 由 于 窗口 的 标 
题 栏 和 内 容 部 分 “必须 ”在 整个 窗口 中 精确 地 定位 ， 因 此 一 个 窗口 尺寸 
的 变化 需要 改变 定义 在 样式 表 的 三 条 规则 中 的 各 种 定位 属性 的 值 。 这 


对 于 一 个 静态 HTML 文档 很 难 做 到 ， 如 果 使 用 脚本 来 设置 所 有 必要 属性 
值 并 不 是 很 难 。 该 主题 将 在 下 一 节 中 探讨 。 


16.3 ”脚本 化 内 联 样式 


脚本 化 CSS 最 直截了当 的 方法 就 是 更 改 单独 的 文档 元 到 的 style 属 性 。 类 
似 大 多 数 HTML 属 性 ，style 也 是 元 素 对 象 的 属性 ， 它 可 以 在 JavaScript 
中 操作 。 但 是 style 属 性 不 同 寻 常 ， 它 的 值 不 是 字符 串 ， 而 是 一 个 
CSSStyleDeclaration 对 象 。 该 style 对 象 的 JavaScript 属 性 代表 了 HTML 代 
码 中 通过 style 指 定 的 CSS 必 性。 例如， 让 元 素 e 的 文本 变 成 大 号 、 加 粗 
和 蓝 色 ， 可 以 使 用 如 下 代码 设置 font-size、fontrweight 和 color 等 样式 属 
性 对 应 的 JavaScript 属 性 : 


e.style.fontSize="24pt",; 
e.style.fontweight="bold"; 


e.style.color="blue"; 


名 字 约 定 : JavaScript 中 的 CSS 属 性 


很 多 CSS 样 式 属 性 (如 font-size) 在 名 字 中 包含 连 字 符 。 在 JavaScript 
中 ， 连 学 符 是 减 写 ， 所 以 不 能 书写 以 下 表达 式 : 


e.style.font-size="24pt";// 语 法 错误 ! 


因此 ，CSSStyleDeclaration 对 象 中 的 属性 名 和 实际 的 CSS 属 性 名 有 所 区 
别 。 如 有 果 一 个 CSS 属 性 名 包含 一 个 或 多 个 连 字 符 ， CSSStyleDeclaration 
属性 名 的 格式 应 该 是 移 除 连 字 符 ， 将 每 个 连 字符 后 面 紧 接着 的 字母 大 
写 。 这 样 ，CSS 属 性 border-left- width 的 值 在 JavaScript 中 通过 
borderLeftWidth 属 性 进行 访问 ，CSS 属 性 font-family 的 值 用 如 下 代码 访 


问 : 


e.style.fontFamily="sans-serif",， 


另外 ， 当 一 个 CSS 属 性 (如 float 属 性 ) 在 JavaScript 中 对 应 的 名 字 是 保留 
字 时 ， 在 之 前 加 "css" 前 绥 来 创建 合法 的 CSSStyleDeclaration 名 字 “。 由 
此 ， 使 用 CSSStyleDeclaration 对 象 的 cssFloat 属 性 来 设置 或 查询 元 素 的 
CSS float 属 性 。 


使 用 CSSStyleDeclaration 对 象 的 style 属 性 时 ， 记 住所 有 的 值 都 应 该 是 字 
符 串 。 在 样式 表 或 (HTML) style 属 性 中 ， 可 如 下 书写 : 


position:absolute;font-family:sans-serif;background-color :#ffffff; 


用 JavaScript 为 元 素 e 完 成 同样 的 事情 ， 需 将 值 放 在 引号 中 : 


e.style.position="absolute",; 

e.style.fontFamily="sans-serif",， 

e.style.backgroundColor="#ffffff"; 

注意 ， 分 号 在 字符 串 的 外 面 ， 它 们 只 是 JavaScript 中 常规 的 分 号 ，CSS 
样式 表 中 使 用 分 号 并 不 是 用 JavaScript 设 置 的 字符 串 值 的 一 部 分 。 


而 且 ， 记 住所 有 的 定位 属性 都 需要 包含 单 位 。 因此， 如 下 代码 设置 left 
属性 是 错误 的 : 


e.style.1left=300;// 错 误 : 它 是 数字 而 不 是 字符 串 


e.style.left="300";// 错 误 : 缺少 单位 


在 JavaScript 中 设置 样式 属性 就 像 在 样式 表 里 一 样 ， 单 位 是 必需 的 。 设 
置 元 素 e 的 left 属 性 值 为 300 像 素 的 正确 做 法 是 : 


e.style.left="300px"; 


如 果 通 过 计算 的 值 来 设置 left 属 性 ， 需 要 保证 在 最 后 增加 单位 : 
e,Style, left=(Xo+left_margin+left_border+Jleft_padding)+"px"， 
作为 加 上 字符 串 单 位 的 副作用 ， 计 算 的 数值 结果 会 转换 成 字符 


回想 一 下 ， 一 些 CSS 属 性 (如 margin) 是 margin-top、margin-right、 
margin-bottom 和 margin-left 的 复合 属性 。CSSStyleDeclaration 对 象 也 有 
与 之 对 应 的 复合 属性 。 例 如 ， 也 能 像 这 样 设置 margin 属 性 : 


e.style.margin=topMargin+"px"+rightMargin+"px"+bottomMargin+"px"+leftMargin+"px"; 


独立 设置 4 个 margin 属 性 值 更 加 便捷 : 


e.style.marginTop=topMargin+"px"; 
e.style.marginRight=rightMargin+"px"; 
e.style.marginBottom=bottomMargin+"px"; 


e.style.marginLeft=]leftMargin+"px"; 


HTML 元 素 的 style 属 性 是 它 的 内 联 样式 ， 它 履 兰 在 样式 玫 中 的 任何 样式 
说 明 。 内 联 样式 一 般 在 设置 样式 值 时 非常 有 用 ， 就 像 上 面 的 例子 中 所 
做 的 一 样 。CSSStyleDeclaration 对 象 的 属性 可 以 理解 为 代表 内 联 样式 ， 
但 是 它 只 返回 有 意义 的 值 ，JavaScript 代 码 已 经 设置 过 的 值 或 者 HTML 
元 素 显 式 设置 了 想 要 的 内 联 样式 的 值 。 例 如 ， 文 档 可 能 包含 一 个 样式 
表 以 设置 所 有 段落 的 左 外 边 距 为 30 像 隶 ， 但 是 当 在 读 取 段 落 元 又 的 


marginLeft 属 性 时 ， 会 得 到 一 个 空 字符 串 ， 除 非 该 段落 有 一 个 style 属 性 
禾 盖 了 样式 表 中 的 设置 。 


读 取 元 素 的 内 联 样 式 特别 困难 ， 对 style 属 性 来 说 须 包含 单位 ， 对 复合 
属性 来 说 : 在 真正 使 用 这 些 值 的 时 候 ， 代 码 不 得 不 包含 非 同 寻 第 的 CSS 
解析 能 力 。 总 之 ， 元 素 的 内 联 样式 只 在 设置 样式 的 时 候 有 用 ， 如 果 需 
要 查询 元 素 的 样式 ， 束 要 使 用 计算 样式 ， 这 将 在 16.4 节 中 讨论 。 


有 时， 发 现 作为 单个 字符 串 值 来 设置 或 查询 元 妹 的 内 联 样 式 反 而 比 作 
为 CSSStyleDeclaration 对 象 更 加 简单。 为 此 ， 可 以 使 用 元 到 的 
getAttribute() 和 setAttribute() 方 法 或 CSSStyleDeclaration 对 和 象 的 cssText 属 
性 来 实现 : 


// 两 者 都 可 设置 e 的 样式 属性 为 字符 串 s 


e.setAttribute("style",s); 


e.style.cssText=s;// 两 者 都 可 查询 元 素 的 内 联 样 式 


s=e.getAttribute("style"); 


s=e.style.cssText,; 


CSS 动 画 


脚本 化 的 CSS 最 常见 的 用 途 之 一 是 产生 视觉 动画 效果 。 使 用 
setTimeout() 或 setInterval() ( 风 14.1 节 ) 重复 调用 函数 来 修改 元 素 的 内 联 
样式 达到 目的 。 例 16-3 用 两 个 范 数 shakeO 和 fadeOut() 来 举例 说 明 。 
shake() 将 元 素 从 一 边 到 男 一 边 快速 移动 或 “震动 "， 例 如 ， 当 输入 无 效 的 
数据 时 ， 它 吸引 用 户 的 注意 力 。fadeOutO 通 过 指定 的 时 间 (默认 是 500 
室 秒 ) 降低 元 素 的 不 透明 度 ， 使 得 元 素 淡出 和 消失 。 


例 16-3: CSS 动 画 


// 将 e 转 化 为 相对 定位 的 元 素 ， 使 之 左右 "震动 " 


// 第 一 个 参数 可 以 是 元 素 对 象 或 者 元 素 的 id 


// 如 果 第 二 个 参数 是 画 数 ， 以 e 为 参数 ， 它 将 在 动画 结束 时 调用 


0 


// 第 三 个 参数 指定 e 震 动 的 距离 ， 默 认 是 5 像素 


// 第 四 个 参数 指定 震动 多 久 ， 默 认 是 509 毫 秘 


function shake(e,oncomplete,distance,time){// 句 柄 参数 


if(typeof e==="string")e=document.getElementById(e); 


if(!time)time=500; 


if(!distance)distance=5,; 


var originalSstyle=e.style.cssText;// 保 存 e 的 原始 style 


e.style.position="relative";// 使 e 相 对 定位 


var start=(new Date()).getTime();// 注 意 ， 动画 的 开始 时 间 


animate( );// 动 画 开 始 


并 
Dd 
滞 
O 
SF 
xz 
一 、 
EE 
时 


// 画 数 检查 消耗 的 时 间 ， 


// 如 果 动 画 完成 ， 它 将 e 还 原 为 原始 状态 


// 否 则 ， 它 更 新 e 的 位 置 ， 安 排 它 自身 重新 运行 


function animate( ){ 


var now=(new Date()).getTime();// 得 到 当前 时 间 


3 


6 了 多 长 时 间 ? 


var elapsed=now-start;// 从 开始 以 来 消 


var fraction=elapsed/time;// 是 总 时 间 的 几 分 之 几 ? 


if(fraction<1){// 如 果 动 画 未 完成 


// 作 为 动画 完成 比例 的 函数 


， 计 算 e 的 x 位 置 


了 


E 弦 函数 将 完成 比例 乘 以 4pi 


// 所 以 ， 它 来 回 往复 两 次 


Var x=distance*Math.sin(fraction*4*Math .PI); 


e.style.1left 


=Xx+"px";// 在 25 毫 秒 后 或 在 总 时 间 的 最 后 尝试 


// 目 的 是 为 了 产生 每 秒 49 帧 的 动画 


setTimeout(animate,Math.min(25,time-elapsed)); 


else{// 和 否则 ， 动 画 完成 


e.style.cssText=originalStyle// 恢 复原 始 样式 


if(oncomplete)oncomplete(e);// 调 


完成 后 的 回调 画 数 
上 
} 
} 
// 以 毫秒 级 的 时 间 将 e 从 完全 不 透明 淡出 到 完全 透明 
// 在 调用 函数 时 假设 e 是 完全 


全 不 透明 的 


//oncomplete 是 一 个 可 选 


的 范 数 ， 以 e 为 参数 ， 它 将 在 动画 结 环 


结束 时 调 


// 如 果 不 指定 time， 默 认为 500 上 毫秒 


// 该 函数 在 IE 


FP 不 能 正常 


世 


作 ， 但 也 可 以 修改 得 能 工作 ， 


// 除 了 opacity, IE 


使 用 非 标准 的 fiLter 


el 
[之 


function fadeOut(e,oncomplete,time){ 


if(typeof e==="string")e=document.getElementById(e); 


if(!1time)time=500;// 使 用 Math .sqrt 作 为 一 个 简单 的 “ 缓 动画 数 ” 来 创建 动画 


// 精 巧 的 非 线性 : 始 淡出 得 比较 快 ， 然 后 缓慢 了 一 些 


Var ease=Math.sqrt,; 


var start=(new Date()).getTime();// 注 意 : 动画 开始 的 时 间 


animate( );// 动 画 开始 


function animate(){ 


var elapsed=(new Date()).getTime()-start;// 消 耗 的 时 间 


var fraction=elapsed/time;// 总 时 间 的 几 分 之 几 ? 


if(fraction<1){// 如 果 动 画 未 完成 


var opacity=1-ease(fraction);// 计 算 元 素 的 不 透明 度 


e.style.opacity=String(opacity);// 设 置 在 e 上 


setTimeout (animate, // 调 度 下 一 帧 


Math.min(25,time-elapsed)); 


else{// 和 否则 ， 动 画 完成 


e.style.opacity="0";// 使 e 完 全 透明 


if(oncomplete)oncomplete(e);// 调 用 完成 后 的 回调 函数 


shake0 和 fadeOutO 都 能 接收 可 选 的 回调 函数 作为 第 二 个 参数 ， 如 果 指 定 

了 ， 当 动画 结束 时 函数 将 被 调用 。 该 动画 元 素 将 作为 回调 函数 的 参数 

° 下面 的 HTML 代 码 创 建 了 一 个 按钮 ， 当 单 击 时 ， 它 左右 震动 
次 由: 


<button onclick="shake(this,fadeOut);">Shake and Fade</button> 


注意 ，shake0 和 fadeOutO0 示 例 函 数 之 间 非 常 类 似 ， 都 能 作为 类 似 CSS 属 
性 动画 的 模板 。 客 户 端 类 库 (如 jQuery) 通常 支持 预定 义 视觉 效果 。 
此 ， 除 非 想 创建 特别 复杂 的 视觉 效果 ， 实 际 上 不 用 写 类 似 shake() 的 动 
画 函 数 。Scriptaculous 是 早期 一 个 值得 注意 的 类 库 ， 它 是 为 Prototype 框 
染 设 计 的 。 更 多 信息 请 访问 http://script.aculo.us/ 和 http://scripty2.com/。 


为 了 避免 使 用 任何 脚本 ，CSS3 的 过 渡 模 块 定 义 了 在 样式 表 中 指定 动画 
ee 为 了 替代 定义 类 似 fadeOutO 这 样 的 函数 ， 可 以 使 
0 JCSS: 


.fadeable{transition:opacity.5s ease-in} 


它 指定 了 在 任何 时 刻 "fadeable" 元 素 的 opacity 属 性 会 变化 ， 该 变化 会 在 
半 秒 内 用 非 线 性 缓 动 函数 的 动画 (当前 值 和 新 值 之 间 ) 来 过 渡 。CSS 过 
渡 还 未 标准 化 ， 但 是 已 经 在 Safari 和 Chrome 中 用 -webkit-transition 属 性 实 
现 了 一 段 时 间 。 在 写 书 的 这 段 时 间 里 ，Firefox 4 也 用 -moz-transition 属 性 
文 持 过 渡 。 


16.4 ”查询 计算 出 的 样式 


元 素 的 style 属 性 代表 了 元 素 的 内 联 样 式 ， 它 履 关 所 有 的 样式 表 ， 它 是 
设置 CSS 属 性 值 来 改变 元 素 的 视觉 表现 最 好 的 地 方 。 但 是 ， 它 在 查询 元 


系 实 际 应 用 的 样式 时 用 处 不 大 。 为 此 ， 你 想 要 使 用 计算 样式 。 元 素 的 
计算 样式 是 一 组 属性 值 ， 它 由 浏览 絮 通 过 把 内 联 样式 结合 所 有 链接 样 
式 表 中 所 有 可 应 用 的 样式 规则 后 导出 (或 计算 ) 得 到 的 ， 它 就 是 一 组 
在 显示 元 际 时 实际 使 用 的 属性 值 。 类 似 内 联 样式 ， 计 算 样 式 也 是 用 一 
个 CSSStyleDeclaration 对 象 来 表示 的 ， 区 别 是 ， 计 算 样 式 是 只 读 的 。 虽 
然 不 能 设置 这 些 样式 ， 但 为 元 素 计 算出 的 CSSStyleDeclaration 对 象 确切 
地 决定 了 浏 宽 器 在 渲染 元 素 时 使 用 的 样式 属性 值 。 


用 浏览 器 窗口 对 象 的 getComputedStyle() 方 法 来 获得 一 个 元 素 的 计算 样 
式 。 此 方法 的 第 一 个 参数 束 古 要 获取 其 计算 样式 的 元 素 ， 第 二 个 参数 
也 是 必需 的 ， 通 稼 是 nul] 或 空 字符 串 ， 但 它 也 可 以 是 命名 CSS 伪 对象 的 


信人 


字符 串 ， 如 ":before"、":after"、":first-line" 或 ":first-letter" ° 


Var title=document.getElementById("sectionititle"); 


Var titlestyles=window.getComputedSstyle(element, null); 


getComputedStyle() 方 法 的 返回 值 是 一 个 CSSStyleDeclaration 对 和 象 ， 它 代 
表 了 应 用 在 指定 元 素 (或 伪 对 象 ) 上 的 所 有 样式 。 表 示 计 算 样式 的 


ee 内 联 样式 的 对 象 之 间 有 一 些 重要 的 区 
列 |: 


计算 样式 的 属性 是 只 读 的 。 


:计算 样式 的 值 是 绝对 值 ， 类 似 百分比 和 点 之 类 相对 的 单位 将 全 部 转换 
为 绝对 值 。 所 有 指定 尺寸 (例如 外 边 距 大 小 和 字体 大 小 ) 的 属性 都 有 
一 个 以 像素 为 度量 单位 的 值 。 该 值 将 是 一 个 冠 以 "px" 后 级 的 字符 串 ， 使 
用 时 仍然 需要 解析 它 ， 但 是 不 用 担心 单位 的 解析 或 转换 。 其 值 是 颜色 
的 属性 将 以 "rgb(#,# 几 "或 "rgba(#,#,#,#)" 的 格式 返回 。 


:不 计算 复合 属性 ， 它 们 只 基于 最 基础 的 属性 。 例 如 ， 不 要 查询 margin 
属性 ， 应 该 使 用 marginLeft 和 marginTop 等 。 


.计算 样式 的 cssText 属 性 未 定义 。 


计算 样式 和 内 联 样式 可 以 同时 使 用 。 例 16-4 定 义 了 scale() 和 和 scaleColor() 
函数 。 一 个 用 来 查询 和 解析 指定 元 素 的 计算 文本 尺寸 ， 另 一 个 查询 和 


解析 元 素 的 计算 育 景 颜色 。 两 个 函数 都 将 结果 值 按 比例 缩放 并 作为 元 
素 的 内 联 样式 设置 缩放 值 。 (这 些 函 数 在 IE 8 和 更 早期 的 版 本 中 无 法 工 
作 : 下 面 会 讨论 到 ， 这 些 版 本 的 下 不 支持 getComputedStyle()。) 


例 16-4: 查询 计算 样式 与 设置 内 联 样式 


// 用 指定 的 因子 缩放 元 素 e 的 文本 尺 二 


function scale(e,factor){// 用 计算 样式 查询 当前 文本 的 尺 二 


var size=parseInt (window.getComputedStyle(e,"").fontSize);// 用 内 联 样式 来 放大 尺 二 


e.style.fontSize=factor*sizet+"px"; 


// 用 指定 的 因子 修改 元 素 e 的 背景 颜色 


ER 
并 
慑 


//factors >1 颜 色 变 浅 ，factors<<1 颜 


function scaleColor(e,factor){ 


var color=window.getComputedstyle(e,"").backgroundColor;// 查 询 


var components=color .match(/[\d\.]+/9);// 解 析 r、g、b 和 a 分 量 


for(var i=0;i<3;i++){// 循 环 r、g 和 b 


var x=Number (components[i])*factor;// 缩 放 每 个 值 


x=Math.round(Math.min(Math.max(x,0),255));// 设 置 边界 并 取 整 


components[i]=String(x); 


if(components.length==3)//rgb( ) 颜 色 


e.style.backgroundColor="rgb("+components.join()+")"; 


else//rgba( ) 颜 色 


e.style.backgroundColor="rgba("+components.join()+")"; 


} 


计算 样式 也 具有 欺骗 性 ， 查 询 它 们 得 到 的 信息 也 不 忌 古 如 人 所 愿 。 考 

虑 一 下 font-family 属 性 : 为 适应 跨 平 台 可 移植 性 ， 它 可 以 接受 以 逗号 隔 
开 的 字体 系列 列表 。 当 查询 一 个 计算 样式 的 fontFamily 属 性 时 ， 只 能 得 
到 应 用 到 该 元 素 上 有 具体 的 font-family 样 式 的 值 。 可 能 返回 类 

似 "arial,helvetica,sans-serif" 的 值 ， 它 无 法 告诉 你 实际 使 用 了 哪 种 字体 。 
类 似 地 ， 如 果 没 有 绝对 定位 元 素 ， 试 图 通过 计算 样式 的 top 和 ]left 属 性 查 
询 它 的 位 置 和 尺寸 通常 会 返回 "auto" 值 。 这 是 个 完全 合法 的 CSS 值 ， 但 
大 概 不 是 你 想 要 的 。 


getComputedStyle() 在 IE 8 或 更 早 的 版 本 中 没有 实现 ， 但 有 望 在 下 9 中 实 
现 。 在 正中， 每 个 HTML 元 素 有 目 己 的 currentStyle 属 性 ， 它 的 值 是 
CSSStyleDeclaration 对 象 。IE 的 currentStyle 组 合 了 内 联 样式 和 样式 表 ， 
但 它 不 是 真正 的 计算 样式 ， 因 为 那些 相对 值 都 没有 转化 成 绝对 值 。 查 
询 正 的 当前 样式 属性 会 返回 带 相 对 性 单位 如“%” 或 "em") 的 尺寸 或 者 
非 精 确 的 颜色 值 (如 "red") 。 


虽然 用 CSS 能 为 文档 对 象 指定 精确 的 位 置 和 尺寸 ,查询 元 素 的 计算 样式 
却 不 是 判定 元 素 尺寸 和 位 置 的 完美 方法 。 另 一 个 更 简便 的 方法 请 参见 
15.8.2 节 。 


16.5 ”脚本 化 CSS 类 


通过 内 联 style 属 性 脚本 化 CSS 样 式 的 一 个 可 选 方案 是 脚本 化 HTML 的 
class 属 性 值 。 改 变 元 素 的 class 就 改变 了 应 用 于 元 素 的 一 组 样式 表 选 择 
厂 ， 它 能 在 同一 时 刻 改 变 多 个 CSS 属 性 。 例 如 ， 假 设想 让 用 户 对 文档 中 
单独 的 段落 (或 其 他 元 素 ) 引起 注意 。 首 先 ， 为 任意 元 素 定 义 一 个 名 
为 "attention" 的 类 : 


.attention{/* 吸 引用 户 注意 力 的 样式 */ 


background-color :yellow; /* 黄 色 高 亮 背 景 */ 


font-weight:bold;/* 粗 体 */ 


border:solid black 2px;/* 黑 框 */ 
} 
标识 和 从 class 在 JavaScript 中 是 保留 字 ， 所 以 HTML 属 性 class 在 JavaScript 


代码 中 应 该 可 用 于 使 用 className 的 JavaScript 代 码 。 如 下 代码 设置 和 清 
除 元 素 的 className 属 性 来 为 元 到 添加 和 移 除 "attention" 类 : 


function grabAttention(e){e.className="attention",;} 


function releaseAttention(e){e.className="";} 


HTML 元 于 可 以 有 多 个 CSS 类 名 ，class 属 性 保存 了 一 个 用 空格 隔 开 的 类 
名 列表 。className 属 性 是 一 个 容易 误解 的 名 字 : classNames 可 能 更 

好 。 上 面 的 函数 假设 className 属 性 只 指定 零 个 或 一 个 类 名 ， 如 果 有 多 
个 类 名 束 无 法 工作 了 。 如 果 元 素 已 经 有 一 个 类 了 ， 为 该 元 素 调 用 
grabAttention(0) 函 数 将 上 履 盖 已 存在 的 类 。 


HTML5 解 决 了 这 个 问题 ， 为 每 个 元 素 定 义 了 classList 属 性 。 该 属性 值 是 
DOMTokenList 对 象 :一 个 只 读 的 类 数组 对 象 ( 见 7.11 节 ) ， 它 包含 元 
尼 的 单独 类 名 。 但 是 ， 和 数组 元 系 相 比 ，DOMTokenList 定 义 的 方法 更 
加 重要 。add() 和 remove() 从 元 到 的 class 属 性 中 添加 和 清除 一 个 类 和 名。 
toggle() 表 示 如 有 果 不 存 在 类 名 就 添加 一 个 ， 否则， 删除 它 。 最 后 ， 
contains() 方 法 检测 dlass 属 性 中 是 否 包含 一 个 指定 的 类 和 名。 


类 似 其 他 DOM 集 合 类 型 ，DOMTokenList 对 象 “实时 地 ”代表 了 元 素 类 名 
集合 ， 而 并 非 是 在 查询 classList 属 性 时 类 名 的 一 个 静态 快照 。 如 果 从 元 
素 的 classList 属 性 中 获得 了 一 个 DOMTokenList 对 象 ， 然 后 元 素 的 
classSName 属 性 改变 了 ， 这 些 变化 在 标识 列表 中 及 时 可 见 。 同 样 ， 改 变 
标识 列表 ， 在 className 属 性 中 及 时 可 见 。 


在 写本 书 的 这 段 时 间 里 ， 不 是 现在 所 有 的 浏 贤 旧 部 文 持 classList 属 性 。 
但 是 ， 这 个 重要 的 功能 很 容易 近似 实现 ， 如 例 16-5 所 示 。 使 用 类 似 的 代 
和 ER 使 得 许多 脚本 化 CSS 工 作 更 
1 侧 单 。 


例 16-5: classList(): 将 className 当 做 一 个 CSS 类 集合 


py 


* 如 果 e 有 classList 属 性 则 返回 它 。 否 则 ， 返 回 一 个 为 e 模 拟 DOMTokenList API 的 对 象 


* 返 回 的 对 象 有 contains()、add()、remove()、toggle() 和 toString() 等 方法 


* 来 检测 和 修改 元 素 e 的 类 集合 。 如 果 classList 属 性 是 原生 支持 的 ， 


* 返 回 的 类 数组 对 象 有 Length 和 数组 索引 属性 。 


以 DOMTokenList 不 是 类 数组 对 象 ， 


募 


* 但 是 它 有 一 个 toArray( ) 方 法 来 返回 一 个 含 元 素 类 名 的 纯 数 组 快照 


function classList(e){ 


if(e.classList)return e.classList;// 如 果 e.classList 存 在 ， 则 返回 它 


else return new CSSClassList(e);// 否 则 ， 就 伪造 一 个 


//CSSClassList 是 一 个 模拟 DOMTokenList 的 JavaScript 类 


function CSSClassList(e){this.e=e;}// 如 果 e.className 包 含 类 名 c 则 返回 true 否 则 返回 false 


cssclassList .prototype.contains=function(c){// 检 查 c 是 否 是 合法 的 类 名 


if(c.length===0||c.indexof("")!=-1) 


throw new Error("Invalid class name:'"+c+t"'");// 首 先是 常规 检查 


Var classes=this.e.className; 


if(!classes)return false;//e 不 含 类 名 


if(classes===c)return true;//e 有 一 个 完全 匹配 的 类 名 


// 和 否则 ， 把 c 上 自身 看 做 一 个 单词 ， 利 


/A\b 在 正则 表达 式 里 代表 单词 的 边界 


正则 表达 式 搜索 c 


return classes.search("\\b"+c+"\\b")!=-1; 


};// 如 果 c 不 存在 ， 将 c 添 加 到 e .className 中 


CssclassList.prototype.add=function(c){ 


if(this.contains(c))return;// 如 果 存 在 ， 什 么 都 不 做 


Var classes=this.e.className; 


if(classes&&classes[classes.length-1]!="") 


c=""+c; 7/ 如果 需要 加 一 个 空格 


this.e.className+=c;// 将 c 添 力 


UD 


II 到 classNamed 


};// 将 在 e .className 中 出 现 的 所 有 c 都 删除 


CssclassList.prototype.remove=function(c){// 检 查 c 


if(c.length===0||c.indexof("")!=-1) 


throw new Error("Invalid class name:'"+c+t"'");// 将 所 


Var pattern=new RegExp("\\b"+c+"\\b\\s*","g"); 


作为 


this.e.className=this.e.className.replace(pattern,""); 


};// 如 果 c 不 存在 ， 将 c 添 加 到 e .className 中 ， 并 返 世 


true 


词 的 c 和 多 余 的 


了 删除 


// 和 否则 ， 将 在 e,className 中 出 现 的 所 有 c 都 删除 ， 并 返回 false 


CSSCJlassList.prototype,toggle=function(c){ 


if(this.contains(c)){// 如 果 e.className 包 含 c 


this .remove(c);// 删 除 它 


return false; 


else{// 和 否则 


this.add(c);// 添 加 它 


return true; 


};// 返 回 e .className 本 身 


CSsclassList.prototype.tostring=function(){return this.e.className;};// 返 回 在 


e .className 中 的 类 名 
CSssclassList.prototype.toArray=function(){ 
return this.e.className.match(/\b\w+\b/g)||[]; 


}; 


16.6 ”脚本 化 样式 表 


到 目前 为 止 ， 我们 已 经 看 到 如 何 设置 和 查询 CSS 样 式 和 单个 元 素 的 类 
名 。 脚 本 化 样式 表 当 然 也 是 可 能 的 。 虽 然 不 经 党 这 么 做 ， 但 偶尔 这 却 
非常 有 用 ， 本 市 将 概述 该 技术 。 


在 脚本 化 样式 表 时 ， 将 会 页 到 两 类 需要 使 用 的 对 象 。 第 一 类 是 元 素 对 
象 ， 由 <style> 和 <1link> 元 素 表 示 ， 两 种 元 素 包 含 或 引用 样式 表 。 这 
些 是 常规 的 文档 元 素 ， 如 采 它 们 有 id 属 性 值 ， 可 以 用 
document.getElementById() 函 数 来 选择 它们 。 第 二 类 是 CSSStyleSheet 对 
象 ， 它 表示 样式 表 本 身 。document.styleSheets 必 性 是 一 个 只 读 的 类 数组 
对 象 ， 它 包含 CSSStyleSheet 对 象 ， 表 示 与 文档 关联 在 一 起 的 样式 表 。 
如 果 为 定义 或 引用 了 样式 表 的 <style>> 或 <link> 元 素 设置 title 属 性 

值 ， 该 title 作 为 对 应 CSSStyleSheet 对 象 的 title 属 性 就 可 用 。 


以 下 几 玉 病 述 了 利用 这 宇 村 式 ` 链接 元 素 和 样式 表 对 象 可 以 做 些 什 
人 O 


16.6.1 开启 和 关闭 样式 表 


最 简单 的 脚本 化 样式 表 的 技术 也 是 最 便捷 和 健壮 的 。< style>、<link 
> 元素 和 CSSStyleSheet 对 和 象 都 定义 了 一 个 在 JavaScript 中 可 以 设置 和 查 
询 的 disabled 属 性 。 磊 名 思 义 ， 如 果 disabled 属 性 为 tue， 样 式 表 束 被 浏 
多 絮 天 闭 并 忽略 。 


以 下 disableStylesheet() 图 数 说 明 这 一 点 。 如 果 传 递 一 个 数字 ， 画 数 将 其 
当做 document.styleSheets 数 组 中 的 一 个 索引 ， 如 采 传 递 一 个 字符 串 ， 图 
数 将 其 当做 CSS 选 择 器 并 传递 给 document.querySelectorAl10 ( 见 15.2.5 
节 ) ， 然 后 设置 所 有 返回 元 素 的 disabled 属 性 : 


function disablestylesheet(ss)t{ 


document .styleSheets[ss].disabled=true; 


elsef 


Var sheets=document.querySelectorAl]l(ss); 


for(var i=0;i<sheets.length;i++) 


sheets[i].disabled=true; 


16.6.2 ”查询 、 揪 入 与 删除 样式 表 规 则 


除了 样式 表 的 开启 和 关闭 以 外 ，CSSStyleSheet 对 象 也 定义 了 用 来 查 
询 、 播 入 和 删除 样式 表 规 则 的 API。IE 8 及 更 早 版 本 实现 的 API 和 其 他 
浏览 器 实现 的 标准 API 之 间 有 一 些 轻微 的 区 别 。 


直接 操作 样式 表 通 常 没什么 意义 。 典 型 地 ， 相 对 编辑 样式 表 或 增加 新 

规则 而 言 ， 让 样式 表 保 持 静 仿 并 对 元 素 的 className 属 性 编程 更 好 。 羽 

0 如 采 人 允许 用 户 完全 控制 页 面 上 的 样式 ， 可 能 谍 需 要 动态 操作 
式 表 。 


document.styleSheets[] 数 组 的 元 隶 是 CSSStyleSheet 对 象 。CSSStyleSheet 
对 象 有 一 个 cssRules[] 数 组 ， 它 包含 样式 表 的 所 有 规则 : 


var firstRule=document.styleSheets[0].cssRules[0]; 


IE 使 用 不 同 的 属性 名 rules 代 替 cssRules。 


cssRules[] 或 rules[] 数 组 的 元 素 为 CSSRule 对 象 。 在 标准 API 中 ，CSSRule 
对 象 代表 所 有 CSS 规 则 ， 包 含 如 @import 和 @page 等 指令 。 但 是 ， 在 下 
中 ，rules[] 数 组 只 包含 样式 表 中 实际 存在 的 样式 规则 。 


CSSRule 对 象 有 两 个 属性 可 以 很 便捷 地 使 用 。 (在 标准 API 中 ， 非 样式 
规则 没有 定义 这 些 属性 ， 当 遍历 样式 表 时 希望 能 跳 过 去 它 。) 
selectText 是 规则 的 CSS 选 择 硕 ， 它 引用 一 个 描述 与 选择 硕 相 关联 的 样式 
的 可 写 CSSStyleDeclaration 对 象 。 回 想 一 下 ，CSSStyleDeclaration 是 用 
来 表示 内 联 和 计算 样式 的 相同 类 型 。 可 以 利用 它 来 查询 规则 的 样式 值 
或 设置 新 样式 。 通 常 ， 当 遍历 样式 表 时 ， 你 对 规则 的 文本 比 它 解 析 后 
的 表示 形式 更 感 兴趣 。 此 时 ， 使 用 CSSStyleDeclaration 对 象 的 cssText 属 
性 来 获得 规则 的 文本 表示 形式 。 


除了 和 碍 询 和 修改 样式 表 中 已 存在 的 规则 以 外 ， 也 能 向 样式 表 添 加 和 从 
中 删除 规则 。 标 准 的 API 接 口 定 义 了 insertRule() 和 deleteRule() 方 法 来 添 
加 和 删除 规则 : 


document.styleSheets[0].insertRule("H1i{text-weight:bold;}",0); 


IE 不 支持 insertRule() 和 deleteRule()， 但 定义 了 大 致 等 效 的 函数 addRule() 
和 removeRule()。 (除了 名 字 以 外 ) 仅 有 的 不 同 是 addRule0) 和 希望 选择 器 
文本 和 样式 文本 作为 两 个 参数 。 


样式 表 的 规则 ， 举 例 说 明了 用 API 对 样式 表 进 行 一 些 可 括 
小 : 


var ss=document.styleSheets[9];// 得 到 第 一 个 样式 


var rules=ss.cssRules?ss.cssRules:;ss.rules;// 得 到 样式 表 规 则 


for(var i=0;i<rules.length;i++){// 人 遍历 这 些 规则 


Var rule=rules[i]; 


if(!rule.selectorText)continue;// 跳 过 @import 和 非 样 式 规 则 


var selector=rule.selectorText;// 选 择 器 


var ruleText=rule.style.cssText;// 文 本 形式 的 样式 


/ 


Me 


如 果 规 则 应 用 在 h1 元 素 上 ， 也 将 其 应 用 到 h2 元 素 上 


// 注 意 : 仅 当 选择 器 在 字面 上 为 "h1" 时 这 才 起 作 


If(Selector=="h1"){ 


if(ss.insertRule)ss.insertRule("h2{"+ruleText+"}",rules.1length); 


else if(ss.addRule)ss.addRule("h2",ruleText,rules.length); 


} 


// 如 果 规 则 设置 了 text-decoration 属 性 ， 则 将 其 删除 


if(rule.style.textDecoration){ 


if(ss.deleteRule)ss.deleteRule(i); 


else if(ss.removeRule)ss.removeRule(i); 


i--;// 调 整 循环 索引 ， 因 为 以 上 的 规则 i+1 现 在 即 为 规则 i 


16.6.3 创建 渐 样 式 表 


最 后 ， 创 建 整个 新 样式 表 并 将 其 添加 到 文档 是 中 可 能 的 。 在 大 多 数 浏 
哆 器 中 ， 可 以 用 标准 的 DOM 技 术 : 只 要 创建 一 个 全 新 的 < style> 元 
素 ， 将 其 插入 到 文档 的 头 部 ， 然 后 用 其 innerHTML 属 性 来 设置 样式 表 
内 容 。 但 是 在 下 8 以 及 更 早 版 本 中 ，CSSStyleSheet 对 象 通 过 非 标准 方法 
document.createStyleSheet() 来 创建 ， 其 样式 文本 用 cssText 属 性 值 来 指 
定 。 示 例 说 明 如 例 16-6 所 示 。 


例 16-6: 创建 一 个 新 样式 表 


// 对 文档 添加 一 个 样式 表 ， 用 指定 的 样式 填充 它 


//styles 参 数 可 能 是 字符 组 或 对 象 。 如 果 它 是 字符 串 ， 就 把 它 作 为 样式 表 的 文本 


// 如 果 它 是 对 象 ， 将 每 个 定义 样式 规则 的 每 个 属性 添加 到 样式 表 中 


// 属 性 名 即 为 选择 器 ， 其 值 即 为 对 应 的 样式 


function addStyles(styles){// 首 先 ， 创 建 一 个 新 样式 


Var styleElt,styleSheet; 


if(document .createSty1leSheet ){// 如 果 定 义 了 IE 的 API， 即 可 使 


[车 


styleSheet=document.createstyleSheet(); 


elsef 


var head=document .getElementsByTagName("head")[0] 


styleElt=document.createElement ("style");// 新 的 <style>> 元 素 


1 


head.appendchild(styleElt);// 把 它 插入 <head> 上 


// 现 在 ， 新 的 样式 表 应 该 是 最 后 一 个 


styleSheet=document.styleSheets[document.styleSheets,.length-1] 


// 现 在 向 其 中 插入 样式 


if(typeof styles==="string"){// 参 数 是 样式 表 文 


if(styleElt)styleElt.innerHTML=styles,; 


else styleSheet.cssText=styles;//IE API 


F 独 的 规则 的 对 象 


else{// 参 数 是 待 插入 的 


Var i=0; 


for(selector in styles){ 


if(styleSheet.insertRule){ 


var rule=selector+"{"+styles[selector]+"}"; 


Sty]leSheet ,InsertRule(rule, I++) ， 


elsef 


styleSheet.addRule(selector, styles[selector],i++); 


[1] 例 如， 可 参照 Eric Meyer 的 《CSS:The Definitive Guide 》 
(O'Reilly) 。 


第 17 章 ”事件 处 理 


客户 端 JavaScript 程 序 采 用 了 异步 事件 驱动 编程 模型 (13.3.2 广 有 介 

绍 ) 。 在 这 种 程序 设计 风格 下 ， 当 文档 、 浏 览 右 、 元 素 或 与 之 相关 的 
对 象 发 生 某 些 有 趣 的 事情 时 ，Web 浏 览 器 就 会 产生 事件 (event) 。 例 
如 ， 当 Web 浏 蜗 器 加 载 完 文档 、 用 户 把 鼠标 指针 移 到 超 链接 上 或 敲 击 键 
盘 时 ，Web 浏 顺民 都 会 产生 事件 。 如 果 JavaScript 恬 用 程序 关注 特定 类 
型 的 事件 ， 那 么 它 可 以 注册 当 这 类 事件 发 生 时 要 调用 的 一 个 或 多 个 画 
数 。 请 注意 ， 这 种 风格 并 不 只 应 用 于 Web 编 程 ， 所 有 使 用 图 形 用 户 界面 
的 应 用 程序 都 采用 了 它 ， 它 们 静 待 某 些 事 情 发 生 ( 妈 ， 它 们 等 待 事件 
发 生 ) ， 然 后 它们 响应 。 


请 注意 ， 事 件 本 身 并 不 是 一 个 需要 定义 的 技术 名 词 。 简 而 言 之 ， 事 件 
就 是 web 浏览 器 通知 应 用 程序 发 生 了 什么 事情 。 事 件 不 是 JavaScript 对 
象 ， 不 会 出 现在 程序 源 代 码 中 。 当 然 ， 会 有 一 些 事件 相关 的 对 象 出 现 
它们 需要 技术 说 明 ， 因 此 ， 本 章 从 一 些 重要 的 定义 开 

A 。 


事件 类 型 (eventtype) 是 一 个 用 来 说 明 发 生 什 么 类 型 事件 的 字符 串 。 
例如 ，"mousemove" 表 示 用 户 移动 岂 标 ，"keydown" 表 示 键 盘 上 某 个 键 
被 按 下 ， 而 "load" 表 示 文 档 (或 菜 个 其 他 资源 ) 从 网 络 上 加 载 完毕 。 由 
于 事件 类 型 只 是 一 个 字符 串 ， 因 此 实际 上 有 时 会 称 之 为 事件 名 字 
(event name) ， 我 们 用 这 个 名 字 来 标识 所 谈论 的 特定 类 型 的 事件 。 现 
代 浏 览 絮 支持 许多 事件 类 型 ，17.1 广 会 有 一 个 概述 。 


事件 目标 (event target) 是 发 生 的 事件 或 与 之 相关 的 对 象 。 当 讲 事 件 
时 ， 我 们 必须 同时 指明 类 型 和 目标 。 例 如 ，window 上 的 load 事 件 或 < 
button > 元 素 的 click 事 件 。 在 客户 端的 JavaScript 应 用 程序 中 ， 
Window、Document 和 和 Element 对象 是 最 常见 的 事件 目标 ， 但 某 些 事件 
是 由 其 他 类 型 的 对 象 触发 。 例 如 ， 第 18 章 会 介绍 由 XMLHttpRequest 对 
象 触发 的 readystatechange 事 件 。 


事件 处 理 程序 (event handler) 或 事件 监听 程序 (event listener) 是 处 理 
或 响应 事件 的 函数 由。 应 用 程序 通过 指明 事件 类 型 和 事件 目标 ， 在 
Web 浏 虹 器 中 注册 它们 的 事件 处 理 程序 函数 。 当 在 特定 的 目标 上 发 生 特 
定 类 型 的 事件 时 ， 浏 览 器 会 调用 对 应 的 处 理 程序 。 当 对 象 上 注册 的 事 
件 处 理 程序 被 调用 时 ， 我 们 有 时 会 说 浏览 器 “触发 ” (fire、trigger) 


和 “派发 ”(dispatch) 了 事件 。 有 很 多 注册 事件 处 理 程序 的 方法 ，17.2 
节 和 17.3 下 会 详细 说 明 处 理 程序 的 注册 和 调用 。 


事件 对 象 (event object) 是 与 特定 事件 相关 且 包 含有 关 该 事件 详细 信息 
的 对 象 。 事 件 对 象 作 为 参数 传递 给 事件 处 理 程 序 函 数 〈 不 包括 IE8 及 之 
前 版 本 ， 在 这 些 浏 览 姻 中 有 时 仪 能 通过 全 局 变量 event 才 能 得 到 ) 。 所 
有 的 事件 对 象 都 有 用 来 指定 事件 类 型 的 type 属 性 和 指定 事件 目标 的 
target 属 性 。 (在 IE8 及 之 前 版 本 中 用 srcElement 而 非 target。) 每 个 事件 
类 型 都 为 其 相关 事件 对 象 定义 一 组 属性 。 例 如 ， 鼠 标 事件 的 相关 对 象 
会 包含 鼠标 指针 的 坐标 ， 而 键盘 事件 的 相关 对 象 会 包含 按 下 的 键 和 辅 
助 键 的 评 细 信息 。 许 多 事件 类 型 仅 定 义 了 像 type 和 target 这 样 少 量 的 标 
准 属 性 ， 惑 无 法 获取 许多 其 他 有 用 的 信息 。 对 于 这 些 事 件 而 言 ， 只 是 
事件 简单 地 发 生 ， 无 法 得 到 事件 的 详细 信息 。 本 章 没 有 专门 的 小 万 来 
介绍 Event 对 象 ， 而 是 在 介绍 特定 事件 类 型 时 会 说 明 事 件 对 象 的 属性 。 
在 第 四 部 分 描述 特定 事件 类 型 时 会 解释 事件 对 象 的 属性 12l-。 


事件 传播 (event propagation) 是 浏览 器 决定 哪个 对 象 触发 其 事件 处 理 
程序 的 过 程 。 对 于 单个 对 象 的 特定 事件 (比如 Window 对 象 的 load 事 
件 ) ， 必 须 是 不 能 传播 的 。 当 文档 元 素 上 发 生 某 个 类 型 的 事件 时 ， 然 
而 ， 它 们 会 在 文档 树 上 向 上 传播 或 “ 冒 泡 ”(bubble) 。 如 果 用 户 移动 鼠 
标 指针 到 超 链 接 上 ， 在 定义 这 个 链接 的 <a> 元 素 上 首先 会 触发 
mousemove 事 件 ， 然 后 是 在 容 絮 元 素 上 触发 这 个 事件 ， 也 许 是 <p 元 
素 、<div> 元 又 或 Document 对 象 本 喘 。 有 时 ， 在 Document 或 其 他 容 需 
元 素 上 注册 单个 事件 处 理 程序 比 在 每 个 独立 的 目标 元 素 上 都 注册 处 理 
程序 要 更 方便 。 事 件 处 理 程序 能 通过 调用 方法 或 设置 事件 对 象 属 性 来 
阻止 事件 传播 ， 这 样 它 就 能 停止 冒 泡 且 将 无 法 在 容器 元 素 上 触发 处 理 
程序 。17.3.6 东 会 详细 介绍 事件 传播 。 


事件 传播 的 另外 一 种 形式 称 为 事件 捕获 (event capturing) ， 在 容器 元 
素 上 注册 的 特定 处 理 程序 有 机 会 在 事件 传播 到 真实 目标 之 前 拦截 

(或 “捕获 ”) 它 。IE 8 及 之 前 版 本 不 文 持 事件 捕获 ， 所 以 不 常用 它 。 但 
征 ， 当 处 理 鼠 标 拖 放 事件 时 ， 捕 获 或 “ 守 取 ”鼠标 事件 的 能 力 是 必需 
的 ， 例 17-2 会 展示 如 何 实现 这 种 能 力 。 


一 些 事件 有 与 之 相关 的 玩 认 操作 。 例 如 ， 当 超 链 接 上 发 生 click 事 件 


时 ， 浏 览 右 的 默认 操作 是 按照 链接 加 载 新 页 面 。 事 件 处 理 程序 可 以 通 
过 返回 一 个 适当 的 值 、 调 用 事件 对 象 的 某 个 方法 或 设置 事件 对 象 的 某 


全 可 作 辣 汪 适用 检 昌 重 (17.8.6 下 会 人 
绍 它 

有 了 这 些 定 义 好 的 术语 ， 现 在 我 们 能 继续 深入 学 习 事 件 和 事件 处 理 。 

17.1 会 概述 浏览 器 文 持 的 许多 事件 类 型 。 它 没有 介绍 任何 单个 事件 的 
详细 信息 ， 而 是 告诉 大 家 Web 应 用 中 有 哪些 事件 类 型 可 以 使 用 。 这 一 市 
交叉 引用 了 本 书 的 其 他 部 分 内 容 ， 用 于 演示 一 些 事件 实战 。 

在 17.1 市 之 后 ， 接 着 两 节 会 介绍 如 何 注 册 事 件 处 理 程序 和 浏览 器 如 何 调 
用 这 些 事件 处 理 程序 。 由 于 JavaScript 事 件 模 型 的 历史 演变 和 IE 9 之 前 版 
本 缺乏 对 标准 的 支持 ， 因 此 这 两 个 主题 可 能 会 超出 想象 的 复杂 。 
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:文档 加 载 和 准备 就 绪 事 件 

.鼠标 事件 

.鼠标 滚轮 事件 

. 拖 放 事件 

.键盘 事件 

.文本 输入 事件 

17.1 事件 类 型 

在 Web 初 期， 客户 端 程序 员 只 能 使 用 少 部 分 事件 ， 比 

如 "load"、"dlick" 和 "mouseover" 等 。 这 些 传统 事件 类 型 在 所 有 浏 宽 絮 中 
都 得 到 了 很 好 的 支持 ，17.1.1 节 主要 介绍 这 些 内 容 。 随 着 Web 平 台 发 展 
到 包括 更 强大 的 API， 事 件 集合 随 之 越 来 越 大 ， 没 有 单个 标准 能 定义 完 
整 的 事件 集合 。 在 写本 章 时 ， 浏 览 器 所 文 持 的 事件 数量 正在 快速 地 增 
长 ， 这 些 新 事件 有 3 个 来 源 : 


.3 级 DOM 事 件 (DOM Level 3 Events) 规范 ， 经 过 长 期 的 停 清 之 后 ， 在 
W3C 的 主持 下 又 开始 焕发 生机 。17.1.2 节 介绍 DOM 事 件 。 


HITML5 规 范 及 相关 衍生 规范 的 大 量 新 API 定 义 了 新 事件 ， 比 如 历史 管 
人 


.基于 触摸 和 文 持 JavaScript 的 移动 设备 的 出 现 ， 比 如 iPhone， 它 们 需要 
0 
J 从 | o 


注意 ， 许 多 新 事件 类 型 尚未 广泛 实现 ， 定 义 它 们 的 标准 也 依旧 处 于 草 
案 阶段 。 接 下 来 的 几 市 将 概述 这 些 事 件 ， 但 不 会 列 出 详细 信息 。 本 章 
剩 下 的 部 分 将 全 面 洱 瘟 事 件 处 理 模 型 ， 及 大 量 已 经 得 到 民 好 文 持 的 事 
件 应 用 示例 。 如 有 果 大 概 理解 了 事件 的 工作 原理 ， 那 么 就 能 轻松 地 处 理 
作为 新 Web API 定 义 和 实 现 的 新 事件 类 型 。 


事件 分 类 
事件 大 致 可 以 分 成 儿 类 ， 了 解 这 些 分 类 将 有 助 于 理解 和 组 织 如 下 长 长 
的 事件 列表 : 
依赖 于 设备 的 输入 事件 
有 些 事件 和 特定 输入 设备 直接 相关 ， 比 如 鼠标 和 键盘 。 包 括 诸 


如 "mousedown"、"mousemove"、"mouseup"、"keydown"、"keypress" 和 
"keyup" 这 样 的 传统 事件 类 型 ， 也 包括 
像 "touchmove" 和 "gesturechange" 这 样 狐 的 触摸 事件 类 型 。 


独立 于 设备 的 输入 事件 


有 些 输入 事件 没有 直接 相关 的 特定 输入 设备 。 例 如 ，click 事 件 表示 激 
活 了 链接 、 按 钮 或 其 他 文档 元 素 ， 这 通 芝 是 通过 鼠标 单 击 实现 ， 但 也 
能 通过 键盘 或 触摸 感知 设备 上 的 手势 来 实现 。 尚未 广泛 实现 的 textinput 
事件 就 是 一 个 独立 于 设备 的 输入 事件 ， 它 既 能 取代 按键 事件 并 文 持 键 
盘 输 入 ， 也 可 以 取代 盘 切 和 粘贴 与 手写 识别 的 事件 。 


用 户 界 面 事件 


用 户 界 面 事件 是 较 高 级 的 事件 ， 通 常 出 现在 定义 Web 应 用 用 户 界 面 的 
HTML 表 单元 素 上 。 包 括 文本 输入 域 获取 键盘 焦点 的 focus 事 件 、 用 户 


改变 表单 元 隶 显 示 值 的 change 事 件 和 用 户 单 击 表单 中 的 “ 提 区 ?按钮 的 
submit 事 件 。 


状态 变化 事件 


有 些 事 件 不 是 由 用 户 活动 而 是 由 网 络 或 浏览 絮 活 动 触发 ， 用 来 表示 菜 
种 生命 周期 或 相关 状态 的 变化 。 当 文档 完全 加 载 时 ， 在 Window 对 象 上 
会 发 生 load 事 件 ， 这 可 能 是 这 类 事件 中 最 常用 的 。 在 13.3.4 广 讨论 过 的 
DOMContentLoaded 事 件 与 此 类 似 。HTML5 历 史 管理 机 制 会 ( 见 22.2 
节 ) 触发 popstate 事 件 来 响应 浏览 器 的 后 退 按钮 。HTML5 离 线 Web 应 用 
API ( 见 20.4 节 ) 包括 online 和 offline 事 件 。 第 18 章 将 展示 当 向 服务 器 请 
求 的 数据 准备 就 绪 时 ， 如 何 利 用 readystatechange 事 件 得 到 通知 。 类 似 
地 ， 用 于 读 取 用 户 选 择 本 地 文件 的 新 API ( 见 22.6.5 广 ) 使 用 

像 "loadstart"、"progress" 和 "loadend" 事 件 来 实现 VO 过 程 的 异步 通知 。 


特定 API 事 件 


HTML5 及 相关 规范 定义 的 大 量 Web API 都 有 自己 的 事件 类 型 。 拖 放 APIi 
( 见 17.7 节 ) 定义 了 诸如 "dragstart"、"dragenter"、"dragover" 和 "drop" 事 

件 ， 应 用 程序 想 自 定义 拖 放 源 (drag source) 或 拖 放 目标 (drop 

target) 就 必须 处 理 这 些 相关 事件 。HTML5 的 <video> 和 <audio> 元 

素 ( 见 21.2 记 ) 定义 一 长 串 

像 "waiting"、"playing"、"seeking" 和 "volumechange" 等 相关 事件 ， 这 些 

事件 通常 仅 用 于 Web 应 用 ， 这 些 Web 应 用 硕 望 为 视频 和 音频 的 播放 定义 

目 定义 控件 。 

计时 器 和 错误 处 理 程序 

已 经 在 第 14 章 介绍 过 的 计时 器 (timer) 和 错误 处 理 程序 (error 

handler) 属于 客户 端 JavaScript 异 步 编 程 模型 的 部 分 ， 并 有 相似 的 事 

件 。 虽 然 本 章 不 会 讨论 计时 器 和 错误 处 理 程序 ， 但 思考 它们 同事 件 处 

理 之 间 的 关系 是 有 益 的 ， 所 以 在 本 章 的 语 境 中 重读 14.1 和 14.6 节 会 发 

现 很 有 趣 。 


17.1.1 ”传统 事件 类 型 


处 理 鼠 标 、 键 盘 、HTML 表 单 和 Window 对 象 的 事件 都 是 Web 应 用 中 最 
常用 的 ， 它 们 已 经 存在 很 长 的 时 间 并 得 到 了 广 沁 的 支持 。 接 下 来 会 说 


明 这 类 事件 的 许多 重要 详细 信息 。 
1. 表 单 事件 


回 到 Web 和 JavaScript 的 早期 ， 表 单 和 超 链 接 都 是 网 页 中 最 早 文 持 脚 本 
的 元 素 。 这 就 意味 着 表单 事件 是 所 有 事件 类 型 中 最 稳定 且 得 到 良好 支 
持 的 那 部 分 。 当 提 区 表单 和 重 置 表 单 时 ，<form > 元 和 际会 分 别 触发 
submit 和 reset 事 件 。 当 用 户 和 类 按钮 表单 元 素 (包括 单 选 按 钮 和 复 选 
框 ) 交互 时 ， 它 们 会 发 生 click 事 件 。 当 用 户 通 过 输入 文字 、 选 择 选 项 
或 选择 复 选 框 来 改变 相应 表单 元 素 的 状态 时 ， 这 些 通常 维护 某 种 状态 
的 表单 元 素 会 触发 change 事 件 。 对 于 文本 输入 域 ， 只 有 用 户 和 表单 元 素 
完成 交互 并 通过 Tab 键 或 单 击 的 方式 移动 焦点 到 其 他 元 素 上 时 才 会 触发 
change 事 件 。 啊 应 通过 键盘 改变 焦点 的 表单 元 素 在 得 到 和 失去 焦点 时 会 
分 别 触发 focus 和 blur 事 件 。 


15.9.3 节 涵盖 了 所 有 表单 相关 事件 的 详细 信息 。 不 过 ， 这 里 还 有 一 些 进 
一 步 说 明 


通过 事件 处 理 程序 能 取消 submit 和 reset 事 件 的 默认 操作 ， 某 些 dlick 事 件 
也 是 如 此 。focus 和 blur 事 件 不 会 冒 泡 ， 但 其 他 所 有 表单 事件 都 可 以 。IE 
定义 了 focusin 和 focusout 事 件 可 以 冒 泡 ， 它 们 可 以 用 于 蔡 代 foucs 和 blur 
事件 。jQuery 库 ( 见 第 19 章 ) 为 不 支持 focusin 和 focusout 事 件 的 浏览 器 
模拟 了 这 两 个 事件 ， 同 时 3 级 DOM 事 件 规范 也 正在 标准 化 它们 。 


最 后 注意 ， 无 论 用 户 何 时 输入 文字 〈 通 过 键盘 或 剪 切 和 粘贴 ) 到 < 
textarea 和 其 他 文本 输入 表单 元 素 ， 除 下 外 的 浏 顺 絮 都 会 触发 jnput 事 
件 。 不 像 change 事 件 ， 每 次 文字 插入 都 会 触发 input 事 件 。 遗 憾 的 是 ， 
input 事 件 的 事件 对 象 没有 指定 输入 文本 的 内 容 。 ( 稍 后 介绍 的 textinput 
事件 将 会 成 为 这 个 事件 的 有 用 替代 方案 。) 


2.Window 事 件 
Window 事 件 是 指 事件 的 发 生 与 浏 贤 器 窗口 本 坊 而 非 窗口 中 显示 的 任何 


特定 文档 内 容 相 天 。 但 是 ， 这 些 事件 中 有 一 些 会 和 文档 元 素 上 发 生 的 
事件 同名 。 


load 事 件 是 这 些 事件 中 最 重要 的 一 个 ， 当 文档 和 其 所 有 外 部 资源 (比如 
图 厂 ) 完全 加 载 并 显示 给 用 户 时 束 会 触发 已 。 有关 load 事 件 的 讨论 贯 罕 
整个 第 13 章 。DOMContentLoaded 和 readystatechange 是 load 事 件 的 替代 


方案 ， 当 文档 和 其 元 素 为 操作 准备 融 绪 ， 但 外 部 资源 完全 加 载 完毕 之 
人 浏览 器 就 会 尽早 触发 它们 。17.4 节 有 这 些 与 文件 加 载 相关 事件 的 示 
| o 


unload 事 件 和 load 相 对 ， 当 用 户 离开 当前 文档 转向 其 他 文档 时 会 触发 

它 。unload 事 件 处 理 程序 可 以 用 于 保存 用 户 的 状态 ,但 它 不 能 用 于 取消 
用 户 转 回 其 他 地 方 。beforeunload 事 件 和 unload 类 似 ， 但 它 能 提供 询问 
用 户 是 否 确定 离开 当前 页 面 的 机 会 。 如 果 beforeunload 的 处 理 程序 返回 
字符 串 ， 那 么 在 新 页 面 加 载 之 前 ， 字 符 串 会 出 现在 展示 给 用 户 确认 的 
对 话 杠 上， 这样 用 户 将 有 机 会 取消 其 跳 转 而 留 在 当前 页 上 。 


Window 对 和 象 的 onerror 属 性 有 点 像 事件 处 理 程序 ， 当 JavaScript 出 错时 会 
触发 它 。 但 是 ， 它 不 是 真正 的 事件 处 理 程序 ， 因 为 它 能 用 不 同 的 参数 
来 调用 。 更 多 详细 信息 请 看 14.6 节 。 


像 <img> 元 素 这 样 的 单个 文档 元 对 也 能 为 1oad 和 error 事 件 注册 处 理 程 
序 。 当 外 部 资源 (例如 图 片 ， 完 全 加 载 或 发 生 阻 止 加 载 的 错误 时 就 会 
触发 它们 。 某 些 浏 览 器 也 支持 abort 事 件 (HTML5 将 其 标准 化 ， 当 图 
片 (或 其 他 网 络 资源 ) 因为 用 户 停止 加 载 进程 而 导致 失败 就 会 触发 
它 o 


前 面 介绍 的 表单 元 素 的 focus 和 blur 事 件 也 能 用 做 Window 事 件 ， 当 浏览 
绥 窗 口 从 操作 系统 中 得 到 或 失去 键 弄 焦点 时 会 触发 它们 。 


最 后 ， 当 用 户 调 整 浏 览 器 窗口 大 小 或 滚动 它 时 会 触发 resize 和 scroll 事 
件 。scroll 事 件 也 能 在 任何 可 以 深 动 的 文档 元 素 上 触发 ， 比 如 那些 设置 
CSS 的 overflow 属 性 ( 见 16.2.6 方 ) 的 元 素 。 传 递 给 resize 和 scroll 事 件 处 
理 程序 的 事件 对 象 是 一 个 非常 普通 的 Event 对 象 ， 它 没有 指定 调整 大 小 
或 发 生 深 动 的 详细 信息 属性 ， 但 可 以 通过 15.8 闻 介绍 的 技术 来 确定 新 窗 
口 的 尺寸 和 深 动 条 的 位 置 。 


3. 鼠 标 事件 


当 用 户 在 文 要 上 移动 或 单 击 鼠 标 时 都 会 产生 鼠标 事件 。 这 些 事 件 在 鼠 
标 指 针 所 对 应 的 最 党 和 藤 套 元 素 上 和 触发， 但 它们 会 彤 泡 直 到 文档 最 顶 
层 。 传 递 给 鼠标 事件 处 理 程序 的 事件 对 象 有 属性 集 ， 它 们 描述 了 当 事 
件 发 生 时 鼠标 的 位 置 和 按键 状态 ， 也 指明 当时 是 否 有 任何 辅助 键 按 
下 。clientX 和 clientY 属 性 指定 了 鼠标 在 窗口 坐标 中 的 位 置 ，button 和 


which 属 性 指定 了 按 下 的 鼠标 键 是 哪个 。 (无 论 如 何 请 看 Event 参 考 页 ， 
因为 这 些 属性 难以 简单 使 用 。) 当 键 一 辅助 键 按 下 时 ， 对 应 的 属性 
altkey、ctrIKey、metaKey 和 shiftKey 会 设置 为 tue。 而 对 于 click 事 件 ， 
detail 属 性 指定 了 其 是 单 击 、 双 击 还 是 三 击 。 


用 户 每 次 移动 或 拖 动 鼠标 时 ， 会 触发 mousemove 事 件 。 这 些 事件 的 发 生 
非常 频繁 ， 所 以 mousemove 事 件 处 理 程序 一 定 不 能 触发 计算 密集 型 任 
务 。 当 用 户 按 下 或 释放 鼠标 按键 时 ， 会 触发 mousedown 和 mouseup 事 
件 。 通 过 注册 mousedown 和 mousemove 事 件 处 理 程序 ， 可 以 探测 和 响应 
鼠标 的 拖 动 。 合 理 地 这 样 做 能 够 捕获 鼠标 事件 ， 甚 至 当 鼠 标 从 开始 元 
人 0 a 。17.5 广 包含 一 个 处 理 
逢 动 的 示例 。 


在 在 mousedown 和 mouseup 事 作 队 列 之 后 ， 浏 蜗 器 也 会 触发 cick 事件 。 之 
前 介绍 过 dlick 事 件 是 独立 于 设备 的 表单 事件 ， 但 实际 上 个 仅仅 在 未 
单元 素 上 触发 ， 它 可 以 在 任何 文档 元 素 上 触发 ， 同 时 传递 拥有 之 前 介 
| ° 0 
续 两 次 单 击 鼠 标 按键 ， 跟 在 第 二 个 click 事 件 之 后 是 dblclick 事 件 。 
站 鼠标 右键 时 ， 浏 览 器 通常 会 显示 上 下 文 菜单 (context menu) 。 
显示 菜单 之 前 ， 它 们 通常 会 触发 contextmenu 事 件 ， 而 取消 这 个 事件 就 
可 以 阻止 菜单 的 显示 。 这 个 事件 也 是 获得 鼠标 右 击 通知 的 简单 方法 。 


当 用 户 移动 鼠标 指针 从 而 使 它 悬 停 到 新 元 素 上 时 ， 浏 唤 器 就 会 在 该 元 
素 上 触发 mouseover 事 件 。 当 鼠标 移动 指针 从 而 使 它 不 再 基 停 在 某 个 元 
素 上 时 ， 浏 览 妖 束 会 在 该 元 素 上 触发 mouseout 事 件 。 对 于 这 些 事 件 ， 
事件 对 象 将 有 relatedTarget 属 性 指明 这 个 过 程 涉 及 的 其 他 元 素 。 (到 
Event 参 考 页 查看 relatedTarget 属 性 的 下 等 效 属性 。) mouseover 和 
mouseout 事 件 和 这 里 介绍 的 所 有 鼠标 事件 一 样 会 冒 泡 。 但 这 通常 不 方 
便 ， 因 为 当 触发 mouceout 事 件 处 理 程序 时 你 不 得 不 检查 鼠标 是 否 真 
的 离开 目标 元 素 还 是 仅仅 是 从 这 个 元 素 的 一 个 子 元 素 移 动 到 另 一 个 。 
正 因 为 如 此 ， 正 提供 了 这 些 事件 的 不 冒 泡 版 本 mouseenter 和 
mouseleave。JQuery 模 拟 非 下 的 浏览 器 中 这 些 事件 的 支持 〈 见 第 19 
章 ) ， 同 时 3 级 DOM 事 件 规范 把 它们 标准 化 了 。 


当 用 户 深 动 胜 标 滚轮 时 ， 浏 览 器 触发 mousewheel 事 件 (或 在 Firefox 中 
是 DOMMouseScroll 事 件 ) 。 传 递 的 事件 对 象 属性 指定 深 轮 转动 的 大 小 
和 方 同 。3 级 DOM 事 件 规范 正在 标准 化 一 个 更 通用 的 多 维 wheel 事 件 ， 


人 


一 旦 实现 将 取代 mousewheel 和 DOMIMouseScroll 事件 。17.6 节 包含 一 个 
mousewheel 事 件 示 例 。 


4. 键 盘 事 件 


当 键 盘 聚 焦 到 Web 浏 抽 磺 时 ， 用 户 每 次 按 下 或 释放 键盘 上 的 按键 时 都 会 
产生 事件 。 键 盘 快 捷 键 对 于 操作 系统 和 浏览 右 本 喘 有 特殊 意义 ， 它 们 
经 常 被 操作 系统 或 浏览 器 “ 吃 掉 ”并 对 JavaScript 事 件 处 理 程序 不 可 见 。 
无 论 任何 文档 元 素 获取 键盘 焦点 都 会 触发 键盘 事件 ， 并 且 它 们 会 冒 泡 
到 Document 和 Window 对 象 。 如 果 没 有 元 素 获 得 焦点 ， 可 以 直接 在 文档 
上 触发 事件 。 传 递 给 键盘 事件 处 理 程序 的 事件 对 象 有 keyCode 字 段 ， 它 
指定 按 下 或 释放 的 键 是 哪个 。 除 了 keyCode， 键 盘 事 件 对 象 也 有 
altKey、ctrIKey、metaKey 和 shiftKey， 摘 述 键 盘 辅 助 键 的 状态 。 


keydown 和 keyup 事 件 是 低级 键盘 事件 ， 无 论 何 时 按 下 或 释放 按键 (其 
至 是 辅助 键 ) 都 会 触发 它们 。 当 keydown 事 件 产生 可 打印 字符 时 ， 在 
keydown 和 keyup 之 间 会 触发 另外 一 个 keypress 事 件 。 当 按 下 键 重复 产生 
字符 时 ， 在 keyup 事 件 之 前 可 能 产生 很 多 keypress 事 件 。keypress 是 较 高 
级 的 文本 事件 ， 其 事件 对 象 指定 产生 的 字符 而 非 按 下 的 键 。 


所 有 浏览 器 都 支持 keydown、keyup 和 keypress 事 件 ， 但 有 一 些 互 用 性 问 
题 ， 因 为 事件 对 象 的 keyCode 属 性 值 从 未 标准 化 过 。3 级 DOM 事 件 规 范 
壬 试 解决 之 前 的 互 用 性 问题 ， 但 尚未 实施 。17.9 市 包含 处 理 keydown 事 
件 的 示例 ，17.8 节 包含 处 理 keypress 事 件 的 示例 。 


17.1.2 DOM 事 件 


W3C 开 发 3 级 DOM 事 件 规 范 已 经 长 达 十 年 之 久 。 在 写本 章 时 ， 它 已 经 
做 了 大 量 修订 使 其 适合 当前 浏览 器 的 现状 ， 现 在 终于 处 于 标准 化 的 “最 
后 征集 工作 草案 ”(last call working draft) 阶段 。 它 标准 化 了 前 面 介绍 
的 许多 传统 事件 ， 同 时 增加 了 这 里 介绍 的 一 些 新 事件 。 这 些 新 事件 类 
a 泛 支持 ,一旦 标准 确定 ， 我 们 就 期 望 浏 贤 器 三 两 能 实现 
它们 。 


如 上 所 述 ，3 级 DOM 事 件 规 范 标 准 化 了 不 冒 泡 的 focusin 和 focusout 事 件 
来 取代 冒 泡 的 focus 和 blur 事 件 ， 标 准 化 了 冒 泡 的 mouseenter 和 
mouseleave 事 件 来 取代 不 冒 泡 的 mouseover 和 mouseout 事 件 。 此 版 本 的 
标准 也 弃 用 了 大 量 由 2 级 DOM 事 件 规范 定义 但 未 得 到 广泛 实现 的 事件 类 


型 。 浏 览 器 依旧 人 允许 产生 像 DOMActivate、DOMFocusIn 和 
DOMNodeInserted 这 样 的 事件 ， 但 它们 不 再 必要 ， 同 时 本 书 的 文档 也 不 
会 列 出 它们 BBL。 


3 级 DOM 事 件 规范 中 新 增 内 容 有 通过 wheel 事 件 对 二 维 女 标 滚轮 提供 标 

准 文 持 ， 通 过 textinput 事 件 和 传递 新 KeyboardEvent 对 象 作 为 参数 给 

、keyup 和 keypress 的 事件 处 理 程序 来 给 文本 输入 事件 提供 更 好 
和 二 Le 


wheel 事 件 的 处 理 程序 接收 到 的 事件 对 象 除了 所 有 普通 鼠标 事件 属性 ， 
还 有 deltaX、deltaY 和 deltaZ 属 性 来 报告 三 个 不 同 的 鼠标 庐 轴 。 大 多 数 鼠 
标 深 轮 是 一 维 或 两 维 的 ， 并 不 使 用 deltaZ。 更 多 关于 mousewheel 事 件 的 
内 容 请 参见 17.6 广 。 


如 上 所 述 ，3 级 DOM 事 件 规范 定义 了 keypress 事 件 ， 但 不 赞成 使 用 它 而 
使 用 称 为 textinput 的 新 事件 。 传 递 给 textinput 事 件 处 理 程序 的 事件 对 象 
不 再 有 难以 使 用 的 数字 keyCode 属 性 值 ， 而 有 指定 输入 文本 字符 串 的 
data 属 性 。textinput 事 件 不 是 键盘 特定 事件 ， 无 论 通过 键盘 、 剪 切 和 粘 
贴 、 拖 放 等 方式 ， 每 当 发 生 文本 输入 时 就 会 触发 它 。 规 范 定 义 了 事件 
对 象 的 inputMethod 属 性 和 一 组 代表 各 种 文本 输入 种 类 的 稼 量 (键盘 、 
粘贴 、 拖 放 、 手 写 和 话音 识别 等 ) 。 在 写本 章 时 ，Safari 和 Chrome 使 用 
混合 大 小 写 的 textInput 来 文 持 这 个 事件 版 本 ， 其 事件 对 象 有 data 属 性 但 
没有 inputMethed 属 性 。17.8 节 包含 使 用 textImnput 事 件 的 示例 。 


新 DOM 标 准 通 过 在 事件 对 象 中 加 入 新 的 key 和 char 属 性 来 简化 
keydown、keyup 和 keypress 事 件 ， 这 些 属性 都 是 字符 串 。 对 于 产生 可 打 
印字 符 的 键盘 事件 ，key 和 char 值 将 等 于 生成 的 文本 。 对 于 控制 键 ，key 
属性 将 会 是 像 标 识 键 的 "Enter"、"Delete" 和 "Left" 这 样 的 字符 串 ， 而 char 
属性 将 是 null， 或 对 于 像 Tab 这 样 的 控制 链 有 一 个 字符 编码 ， 它 将 是 按 
键 产生 的 字符 串 。 在 写本 章 时 ， 尚 未 有 浏 贤 器 支持 key 和 char 属 性 ， 但 
如 果 key 属 性 实现 了 ， 例 17-8 将 使 用 它 。 


17.1.3 HTML5 事 件 


HTML5 及 相关 标准 定义 了 大 量 新 的 Web 应 用 API ( 见 第 22 章 ) ， 其 中 许 
多 API 都 定义 了 事件 。 本 万 列 出 并 和 从 要 介绍 这 些 HTML5 和 Web 应 用 事 
件 。 其 中 一 些 事件 现在 已 经 可 以 开始 使 用 ， 但 更 详细 的 信息 在 本 书 的 
其 他 地 方 ， 另 外 一 些 尚未 得 到 广泛 实现 ， 也 没有 详细 文档 。 


广泛 推广 的 HITML5 特 性 之 一 是 加 入 用 于 播放 音频 和 视频 的 <audio> 和 
<video>> 元素 。 这 些 元 素 有 长 长 的 事件 列表 ， 它 们 触发 各 种 天 于 网 络 
事件 、 数 据 缓冲 状况 和 播放 状态 的 通知 : 


canplay loadeddata playing stalled 
canplaythrough loadedmetadata progress suspend 
durationchange loadstart ratechange timeupdate 
emptied pause seeked volumechange 
ended play seeking waiting 


传递 给 媒体 事件 处 理 程序 的 事件 对 象 普通 且 没 有 特殊 属性 ，target 属 性 
用 于 识别 <audio> 和 <video> 元 素 ， 然 而 这 些 元 素 有 许多 相关 的 属性 
和 方法 。21.2 休 有 更 多 关于 这 些 元 素 及 其 属性 和 事件 的 评 细 内 容 。 


HTML5 的 拖 放 API 人 允许 JavaScript 应 用 参与 基于 操作 系统 的 拖 放 操 作 ， 
实现 Web 和 原生 应 用 间 的 数据 传输 。 该 API 定 义 了 如 下 7 个 事件 类 型 ; 


dragstart drag dragend 
dragenter dragover dragleave 
drop 


触发 拖 放 事件 的 事件 对 象 和 通过 鼠标 事件 发 送 的 对 象 类 似 ， 其 附加 属 
性 dataTransfer 持 有 DataTransfer 对 象 ， 它 包含 关于 传输 的 数据 和 其 中 可 
用 的 格式 的 信息 。17.7 节 将 对 HTML5 拖 放 API 进 行 说 明和 演示 。 


HTML5 定 义 了 历史 管理 机 制 ( 见 22.2 节 ) ， 它 允许 Web 应 用 同 浏览 器 
的 返回 和 前 进 按钮 交互 。 这 个 机 制 涉 及 的 事件 是 hashchange 和 
popstate。 这 些 事件 是 类 似 load 和 unload 的 生命 周期 通知 事件 ， 它 在 
Window 对 象 上 触发 而 非 任何 单独 的 文档 元 素 。 


HTML5 为 HTML 表单 定义 了 大 量 的 新 特性 。 除 了 标准 化 前 面 介 绍 的 表 
单 输入 事件 外 ，HTML5 也 定义 了 表单 验证 机 制 ， 包 括 当 验证 失败 时 在 
表单 元 素 上 会 触发 jnvalid 事 件 。 除 Opera 外 的 浏览 器 厂商 已 经 慢 慢 实现 
HTML5 的 新 表单 特性 和 事件 ， 但 本 书 没有 涵盖 它们 。 


HTML5 包 含 了 对 离线 Web 应 用 的 支持 〈 见 20.4 节 ) ， 它 们 可 以 安装 到 
本 地 应 用 缓存 中 ， 所 以 即使 浏览 器 离线 时 它们 依旧 能 运行 ， 比 如 当 移 
动 设备 不 在 网 络 范围 内 时 。 相 关 的 两 个 最 重要 事件 是 offline 和 online， 
无 论 何 时 浏览 器 失去 或 得 到 网 络 连接 都 会 在 Window 对 象 上 触发 它们 。 
标准 还 定义 了 大 量 其 他 事件 来 通知 应 用 下 载 进 度 和 应 用 缓存 更 新 : 


cached checking downloading error 
noupdate obsolete progress updateready 


很 多 新 Web 应 用 API 都 使 用 message 事 件 进行 异步 通信 。 跨 文档 通信 API 

( 见 22.3 节 ) 允许 一 台 服 务 器 上 的 文档 脚本 能 和 另 一 台 服 务 器 上 的 文档 
脚本 交换 消息 。 其 工作 受 限 于 同 源 策略 〈 见 13.6.2 世 ) 这 一 安全 方式 。 
发 送 的 每 一 条 消 筷 都 会 在 接收 文档 的 Window 上 触发 message 事 件 。 传 弟 
给 处 理 程序 的 事件 对 象 包含 data 属 性 ， 它 有 保存 信息 内 容 以 及 用 于 识别 
消息 发 送 者 的 source 属 性 和 origin 策 略 。message 事 件 的 使 用 方式 与 使 用 
Web Worker 〈 见 13.6.2 节 ) 通信 、 通 过 Server-Sent 事 件 ( 见 18.3 节 ) 和 
WebSocket 〈 见 22.9 节 ) 进行 网 络 通信 相似 。 


HTML5 及 相关 标准 定义 了 一 些 不 在 窗口 、 文 要 和 文档 元 素 的 对 象 上 触 
发 的 事件 。XMLHttpRequest 规 范 第 2 版 和 File API 规 范 都 定义 了 一 系列 
事件 来 跟踪 异步 IO 的 进度 。 它 们 在 XMLHttpRequest 或 FileReader 对 象 
上 触发 事件 。 每 次 读 取 操作 都 是 以 loadstart 事 件 开 始 ， 接 着 是 progress 和 
loadend 事 件 。 此 外 ， 每 个 操作 仅 在 最 终 loadend 事 件 之 前 会 有 load、 
error 或 abort 事 件 。 更 多 详细 信息 请 参见 18.1.4 节 和 22.6.5 入 。 


最 后 ，HTML5 及 相关 标准 定义 了 少量 庞杂 的 事件 类 型 。 在 Window 对 和 象 
上 发 生 的 web 存储 ( 见 20.1 节 ) API 定 义 了 storage 事 件 (在 Window 对 象 
上 ) 用 于 通知 存储 数据 的 改变 。HTML5 也 标准 化 了 最 早 由 Microsoft 在 
IE 中 引入 的 beforeprint 和 afterprint 事 件 。 顾 名 思 义 ， 当 文档 打印 之 前 或 
之 后 立即 在 Window 对 象 上 触发 这 些 事件 ， 它 提供 了 打印 文档 时 添加 或 
删除 类 似 日 期 或 时 间 等 内 容 的 机 会 。 (这 些 事件 不 应 该 用 于 处理 打印 
文档 的 样式 ， 因 为 CSS 媒 体 类 型 更 适合 这 个 用 途 。) 


17.1.4 ”触摸 屏 和 移动 设备 事件 


强大 的 移动 设备 的 广泛 采用 (特别 是 使 用 触摸 屏 的 那些 设备 ) 需 要 建 
立新 的 事件 类 别 。 在 许多 情况 下 ， 和 触摸 屏 事件 映射 到 传统 的 事件 类 型 


(比如 click 和 srcoll) ， 但 不 是 每 次 和 触摸 屏 UI 的 交互 都 能 仿效 鼠标 ， 
也 不 是 所 有 的 触摸 都 可 以 当做 鼠标 事件 处 理 。 丁 主要 介绍 运行 在 
Apple 的 iPhone 和 iPad 设 备 上 的 Safari 所 产生 的 手势 和 触摸 事件 ， 还 包括 
用 户 旋 转 这 些 设 备 时 产生 的 orientationchange 事 件 。 在 写本 章 时 ， 这 些 
事件 尚未 标准 化 ， 但 WwW3C 已 经 开始 用 Apple 的 触摸 事件 作为 起 点 制 
定 “ 触 措 事 件 规范 >”。 本 书 第 四 部 分 并 没有 记录 这 些 事件 ， 但 你 可 以 在 
Apple 的 开发 者 中 心 (http://developer.apple.com/) 查询 更 多 信息 。 


Safari 产 生 的 手势 事件 用 于 两 个 手指 的 缩放 和 旋转 手势 。 当 手势 开始 时 
生成 gesturestart 事 件 ， 而 手势 结束 时 生成 gestureend 事 件 。 在 这 两 个 事 
件 之 间 是 跟 中 手势 过 程 的 gesturechange 事 件 队 列 。 这 些 事 件 传 递 的 事件 
对 象 有 数字 属性 scale 和 rotation。scale 属 性 是 两 个 手指 之 间 当 前 距离 和 
初始 距离 的 比值 。“ 捏 紧 " 手 势 的 scale 值 小 于 1.0， 而 “ 撑 开 ”手势 的 scale 
值 大 于 1.0。rotation 属 性 是 指 从 事件 开始 手指 旋转 的 角度 ， 它 以 度 为 单 
位 ， 正 值 表示 按照 顺 时 针 方 同 旋 转 。 


手势 事件 是 高 级 事件 ， 用 于 通知 已 经 翻译 的 手势 。 如 果 想 实现 自 定义 
手势 ， 你 可 以 监听 低级 触 措 事件 。 当 手指 触摸 屏幕 时 会 触发 touchstart 
事件 ， 当 手指 移动 时 会 触发 ttuchmove 事 件 ， 而 当 手 指 离开 屏幕 时 会 触 
发 touchend 事 件 。 不 像 鼠 标 事件 ， 和 触摸 事件 并 不 直接 报告 触摸 的 坐标 。 
相反 ， 触 措 事 件 传递 的 事件 对 象 有 一 个 changedTouches 属 性 ， 该 属性 是 
一 个 类 数组 对 象 ， 其 每 个 元 素 都 描述 触摸 的 位 置 。 


当 设备 允许 用 户 从 坚 屏 旋转 到 横 屏 模式 时 会 在 Window 对 象 上 触发 
orientationchanged 事 件 ， 该 事件 传递 的 事件 对 象 本 有 身 没 有 用 。 但 是 ， 在 
移动 版 的 Safari 中 ，Window 对 象 的 orientation 属 性 能 给 出 当前 方位 ， 其 
值 是 0、90、180 或 -90。 


17.2 ”注册 事件 处 理 程序 


注册 事件 处 理 程序 有 两 种 基本 方式 。 第 一 种 方式 出 现在 Web 初 期 ， 给 事 
件 目标 对 象 或 文档 元 素 设置 属性 。 第 二 种 方式 更 新 并 且 更 通用 ， 是 将 
事件 处 理 程序 传递 给 对 象 或 元 素 的 一 个 方法 。 但 复杂 的 是 ， 每 种 技术 
都 有 两 个 版 本 。 可 以 在 JavaScript 代 码 中 设置 事件 处 理 程序 为 对 象 属 

性 ， 或 对 于 文档 元 素 ， 可 以 在 HTML 中 直接 设置 相应 属性 。 对 于 通过 方 
法 调用 的 处 理 程序 注册 ， 有 一 个 标准 方法 ， 命 名 为 addEventListener()， 
除 正 8 及 以 前 版 本 之 外 ， 所 有 浏览 硕 都 文 持 这 种 方式 ， 而 下 9 之 前 的 下 
版 本 支持 的 是 一 个 叫 attachEvent() 的 不 同方 法 。 


17.2.1 设置 JavaScript 对 象 属 性 为 事件 处 理 程序 


注册 事件 处 理 程序 最 简单 的 方式 就 是 通过 设置 事件 目标 的 属性 为 所 需 
事件 处 理 程序 函数 。 按 照 约定 ， 事 件 处 理 程序 属性 的 名 字 由 "on" 后 面 跟 
着 事件 名 组 成 : onclick、onchange、onload、onmouseover 等 。 注 意 这 些 
属性 名 是 区 分 大 小 写 的 ， 所 有 都 是 小 写 ， 即 使 事件 类 型 是 由 多 个 词组 
成 〈 比 如 "readystatechange") 。 下 面 是 两 个 事件 处 理 程序 注册 示例 : 


[还 


// 设 置 Window 对 象 的 unload 属 性 为 一 个 函数 


// 该 函数 是 事件 处 理 程序 : 当 文 档 加 载 完 毕 时 调用 它 


window.onload=function( ){// 查 找 一 个 <form> 元 素 


var elt=document.getElementById("shipping_address");// 注 册 事件 处 理 程序 函数 ， 


// 在 表单 提交 之 前 调用 它 


elt.onsubmit=function(){return validate(this);} 


} 


这 种 事件 处 理 程序 注册 技术 适用 于 所 有 浏览 器 的 所 有 常用 事件 类 型 。 
一 般 情况 下 ， 所 有 广泛 实现 的 Web API 定 义 的 事件 都 允许 通过 设置 事件 
处 理 程 序 属性 来 注册 处 理 程序 。 


事件 处 理 程序 属性 的 缺点 是 其 设计 都 是 围绕 着 假设 每 个 事件 目标 对 于 
每 种 事件 类 型 将 最 多 只 有 一 个 处 理 程 序 。 如 果 想 编写 能 够 在 任意 文档 
中 都 能 使 用 的 脚本 库 代 码 ， 更 好 的 方式 是 使 用 一 种 不 修改 或 覆盖 任何 
已 有 注册 处 理 程序 的 技术 (比如 addEventListener()) 。 


17.2.2 ”设置 HTML 标 签 属性 为 事件 处 理 程序 
用 于 设置 的 文档 元 素 事件 处 理 程序 属性 (property) 也 能 换 成 对 应 


HTML 标 签 的 属性 (attribute) 。 如 果 这 样 做 ， 属 性 值 应 该 是 JavaScript 
代码 字符 串 。 这 段 代 码 应 该 是 事件 处 理 程序 函数 的 主体 ， 而 非 完 整 的 


函数 声明 。 也 就 是 说 ，HTML 事 件 处 理 程序 代码 不 应 该 用 大 括号 包围 且 
使 用 function 关 键 字 作为 前 级 。 例 如 : 


<button onclick="alert('Thank you');">> 点 击 这 里 </button> 


如 采 HTML 事 件 处 理 程序 属性 包含 多 条 JavaScript 语 句 ， 要 记 住 必须 使 
用 分 号 分 隅 这 些 语句 或 断 开 属性 值 使 其 器 多 行 。 


某 些 事件 类 型 通常 直接 在 浏览 器 而 非 任 何 特定 文档 元 素 上 触发 。 在 
JavaScript 中 ， 这 些 事 件 处 理 程序 在 window 对 象 上 注册 。 在 HTML 中， 
会 把 它们 放 到 <body> 标签 上 ， 但 浏览 器 会 在 window 对 象 上 注册 它 
们 。 下 面 是 HTML5 规 范 草案 定义 的 这 类 事件 处 理 程 序 的 完整 列表 : 


onafterprint onfocus ononline onresize 
onbeforeprint onhashchange onpagehide onstorage 
onbeforeunload onload onpageshow onundo 
onblur onmessage onpopstate onunload 
onerror onoffline onredo 


当 指 定 一 串 JavaScript 代 码 作为 HTML 事 件 处 理 程 序 属性 的 值 时 ， 浏 览 
亏 会 把 代码 哩 转 换 为 类 似 如 下 的 函数 中 : 


function(event){ 
with(document){ 


with(this.form| |{}){ 


with(this){/* 这 里 是 编码 */ 


} 


} 


如 有 果 浏 览 器 支持 ES5， 它 将 在 非 严 格 模 式 下 定义 这 个 函数 ( 见 5.7.3 
节 ) 。 当 仔细 研究 17.3 节 的 事件 处 理 程序 调用 时 ， 我 们 将 看 到 关于 


event 参 数 和 with 语 句 的 更 多 内 容 。 


客户 端 编程 的 通用 风格 是 保持 HTML 内 容 和 JavaScript 行 为 分 离 ， 遵 循 
这 条 规则 的 程序 员 应 禁止 (或 至 少 避 人 免 ) 使 用 HTML 事 件 处 理 程序 属 
性 ， 因 为 这 些 属性 直接 混合 了 JavaScript 和 HTML 。 


17.2.3 addEventListener() 


在 除 正 8 及 之 前 版 本 外 的 所 有 浏 顺 怖 都 文 持 的 标准 事件 模型 中 ， 任 何 能 
成 为 事件 目标 的 对 象 一 一 这 些 对 象 包括 Window 对 象 、Document 对 和 象 和 
所 有 文档 元 素 一 一 都 定义 了 一 个 名 叫 addEventListener() 的 方法 ， 使 用 这 
个 方法 可 以 为 事件 目标 注册 事件 处 理 程序 。addEventListener() 接 受 二 个 
参数 。 第 一 个 是 要 注册 处 理 程序 的 事件 类 型 ， 这 个 事件 类 型 (或 名 
字 ) 是 字符 串 ， 但 它 不 应 该 包括 用 于 设置 事件 处 理 程 序 属性 的 前 

组 "on"。 第 二 个 参数 是 当 指 定 类 型 的 事件 发 生 时 应 该 调用 的 函数 。 最 后 
一 个 参数 是 布尔 值 。 通 第 情况 下 ， 会 给 这 个 参数 传递 false。 如 果 相 反 
传递 了 true， 那 么 男 数 将 注册 为 捕获 事件 处 理 程序 ， 并 在 事件 不 同 的 调 
度 阶 段 调 用 。17.3.6 世 涵盖 事件 捕获 。 你 应 该 可 以 忽略 第 三 个 参数 并 无 
须 传 递 false， 同 时 规范 最 终 应 该 会 改变 从 而 允许 这 么 做 ， 但 在 写本 章 
上 时， 名 略 这 个 参数 会 在 当前 某 些 济 宽 絮 中 出 错 。 


下 面 这 上 段 代码 在 <button> 元素 上 注册 了 dlick 事 件 的 两 个 处 理 程序 。 注 
意 所 用 两 个 技术 之 间 的 不 同 : 


<button id="my button">click me</button> 


<script> 


var b=document .getElementById("mybutton"); 


b.onclick=function(){alert("Thanks for clicking me! ");}; 


b.addEventListener("click",function(){alert("Thanks again! ");},false); 


</script> 


用 "click" 作 为 第 一 个 参数 调用 addFventListener0) 不 会 影响 onclick 属 性 的 
值 。 在 前 面 的 代码 中 ， 单 击 按钮 会 产生 两 个 alert() 对 话 框 。 更 重要 的 
是 ， 能 通过 多 次 调用 addEventListener() 为 同一 个 对 象 注册 同一 事件 类 型 
的 多 个 处 理 程序 函数 。 当 对 象 上 发 生 事件 时 ， 所 有 该 事件 类 型 的 注册 
处 理 程序 都 会 按照 注册 的 顺序 调用 。 使 用 相同 的 参数 在 同一 个 对 象 上 
多 次 调用 addEventListener() 是 没 用 的 ， 处 理 程序 仍然 只 注册 一 次 ， 同 时 
重复 调用 也 不 会 改变 调用 人 处理 程序 的 顺序 。 


相对 addEventListener() 的 是 removeEventListener() 方 法 ， 它 同样 有 三 个 
参数 ， 从 对 象 中 删除 事件 处 理 程序 画 数 而 非 添 加 ， 它 常用 于 临时 注册 
事件 处 理 程序 ， 然 后 不 久 束 删除 它 。 例 如 ， 当 你 要 得 到 mousedown 事 件 
时 ， 可 以 为 nousemove 和 mouseup 事 件 注册 临时 捕获 事件 处 理 程序 来 看 
看 用 户 是 否 拖 动 鼠 标 。 当 mouseup 事 件 到 来 后 ， 可 以 注销 这 些 事件 处 理 
程序 。 在 这 种 情况 下 ， 事 件 处 理 程序 移 除 代码 如 下 所 示 : 


document .removeEventListener("mousemove",handleMouseMove, true); 


document .removeEventListener("mouseup",handleMouseUp, true); 


17.2.4 attachEvent() 


IE9 之 前 的 下 不 支持 addEventListener() 和 removeEventListener()。IE5 及 以 
后 版 本 定义 了 类 似 的 方法 attachEvent() 和 detachEvent()。 


attachEvent() 和 detachEvent() 方 法 的 工作 原理 与 addEventListener() 和 
removeEventListener() 类 似 ， 但 有 如 下 例外 : 


:因为 IE 事 件 模型 不 文 持 事 件 捕获 ， 所 以 attachEvent() 和 detachEvent() 要 
求 只 有 两 个 参数 : 事件 类 型 和 处 理 程序 函数 。 


-IE 方法 的 第 一 个 参数 使 用 了 带 "on" 前 级 的 事件 处 理 程序 属性 名 ， 而 非 
没有 前 级 的 事件 类 型 。 例 如 ， 当 给 addEventListener() 传 递 "click" 时 ， 要 
给 attachEvent() 传 递 "onclick"。 


attachEvent() 允 许 相 同 的 事件 处 理 程序 函数 注册 多 次 。 当 特定 的 事件 类 
型 发 生 时 ， 注 册 函 数 的 调用 次 数 和 注册 次 数 一 样 。 


经 钟 可 以 看 到 的 事件 处 理 程序 注册 代码 是 在 文 持 addEventListener0 的 浏 
哆 絮 中 束 调 用 它 ， 否 则 就 用 attachEvent(): 


Var b=document.getElementById("mybutton"); 
var handler=function(){alert("Thanks! ");}; 
if(b.addEventListener) 
b.addEventListener("click",handler, false); 
else if(b,attachEvent ) 


b.attachEvent("onclick",handler); 


17.3 事件 处 理 程序 的 调用 


一 旦 注册 了 事件 处 理 程序 ， 浏 览 器 就 会 在 指定 对 象 上 发 生 指 定 类 型 事 
件 时 自动 调用 它 。 本 市 会 详细 介绍 事件 处 理 程 序 的 调用 ， 说 明 事 件 处 
理 程序 的 参数 、 调 用 上 下 文 (this 值 ) 、 调 用 作用 域 和 事件 处 理 程序 返 
回 值 的 意义 。 遗 憾 的 是 ， 这 些 内 容 中 的 一 部 分 在 IE8 及 以 前 版 本 中 和 在 
其 他 浏 斋 右 中 是 不 同 鸭 。 

除了 介绍 单个 处 理 程序 如 何 调用 ， 本 市 也 会 说 明 事 件 传 播 的 机 制 ， 即 
i 目标 和 文档 的 容器 元 素 上 触发 多 个 处 理 程 
予 鸭 二 用 。 


17.3.1 事件 处 理 程 序 的 参数 


通 肖 调用 事件 处 理 程 序 时 把 事件 对 象 作为 它们 的 一 个 参数 (有 一 个 例 
外 ， 后 面 会 介绍 ) 。 事 件 对 象 的 属性 提供 了 有 关 事 件 的 详细 信息 。 例 
如 ，type 属 性 指定 了 发 生 的 事件 类 型 。17.1 市 提 到 了 各 种 事件 类 型 的 一 
些 其 他 事件 对 象 属性 。 


在 IE8 及 以 前 版 本 中 ， 通 过 设置 属性 注册 事件 处 理 程序 ， 当 调用 它们 时 
并 未 传递 事件 对 象 。 取 而 代 之 ， 需 要 通过 全 局 对 象 window.event 来 获得 
事件 对 象 。 出 于 互通 性 ， 你 能 像 如 下 那样 编写 事件 处 理 程序 ， 这 样 如 
果 没 有 参数 就 使 用 window.event: 


function handler(event){ 


event=event | |window.event;// 处 理 程序 代码 出 现在 这 里 


} 


向 使 用 attachEvent() 注 册 的 事件 处 理 程序 传递 事件 对 象 ， 但 它们 也 能 使 


用 window.event 。 

记得 17.2.2 方 中 的 介绍 ， 当 通过 设置 HTML 属 性 注册 事件 处 理 程序 时 ， 
浏 哆 器 会 把 JavaScript 编 码 转换 到 一 个 函数 中 。 非 IE 浏 览 絮 使 用 event 参 
数 来 构造 面 数 ， 而 正在 构造 画 数 时 没有 要 求 参数 。 如 果 在 这 样 的 画 数 
中 使 用 event 标 识 符 ， 那 么 引用 的 正 是 window.event。 在 这 两 种 情况 下 ， 
HTML 事 件 处 理 程 序 都 能 作为 event 引 用 事件 对 象 。 


17.3.2 事件 处 理 程 序 的 运行 环境 
当 通 过 设置 属性 注册 事件 处 理 程序 时 ， 这 看 起 来 好 像 是 在 文档 元 素 上 
定义 了 新 方法 : 


e.onclick=function(){/* 人 处理 程序 代码 */}， 


事件 处 理 程序 在 事件 目标 上 定义 ， 所 以 它们 作为 这 个 对 象 的 方法 来 调 
用 (后 面 会 介绍 一 个 和 下 相关 的 例外 ) 并 不 出 人 意料 。 这 就 是 说 ， 在 


事件 处 理 程序 内 ，this 关 键 字 指 的 是 事件 目标 。 


甚至 当 使 用 addEventListener0) 注 册 时 ， 调 用 的 处 理 程序 使 用 事件 目标 作 

为 它们 的 this 值 。 但 是 ， 对 于 attachEvent0 来 讲 这 是 不 对 的 : 使 用 

attachEventO 注 册 的 处 理 程 序 作为 函数 调用 ， 它 们 的 this 值 是 全 局 
(Window) 对 象 。 可 以 用 如 下 代码 来 解决 这 个 问题 : 


* 在 指定 的 事件 目标 上 注册 用 于 处 理 指定 类 型 事件 的 指定 处 理 程序 画 数 


* 确 保 处 理 程 月 作为 事件 目标 的 方法 调用 


function addEvent(target, type,handler){ 


if(target.addEventListener) 


target.addEventListener(type,handler, false); 


else 


target.attachEvent("on"+type, 


function(event ){// 把 处 理 程序 作为 事件 目标 的 方法 调用 ， 


// 传 递 事件 对 象 


return handler.call(target, event),; 
}); 
} 


注意 使 用 这 个 方法 注册 的 事件 处 理 程序 不 能 删除 ， 因 为 传递 给 
attachEvent() 的 包装 函数 没有 保留 下 来 传递 给 detachEvent()。 


17.3.3 ”事件 处 理 程序 的 作用 域 


像 所 有 的 JavaScript 画 数 一 样 ， 事 件 处 理 程序 从 词法 上 讲 也 是 作用 域 。 
它们 在 其 定义 时 的 作用 域 而 非 调 用 时 的 作用 域 中 执行 ， 并 且 它 们 能 存 
取 闭 个 作用 域 中 的 任何 一 个 本 地 变量 。 例 如 ， 之 前 的 addEven0 记 数 
证 明 过 。 


但 是 ， 通 过 HTML 属 性 来 注册 事件 处 理 程序 是 一 个 例外 。 它 们 被 转换 为 

能 存 取 全 局 变量 的 顶级 函数 而 非 任何 本 地 变量 。 但 因为 历史 原因 ， 它 

们 运行 在 一 个 修改 后 的 作用 域 链 中 。 通 过 HTML 属 性 定义 的 事件 处 理 程 

序 能 好 像 本 地 变量 一 样 使 用 目标 对 象 、 容 器 <form>> 对 和 象 (如 果 有 ) 

和 Document 对 和 象 的 属性 。17.2.2 市 展示 了 如 何 从 HTML 事 件 处 理 程序 属 

,0 以 及 其 代码 近似 于 使 用 with 语 句 修 改 后 的 
MH ° 


HTML 属 性 最 不 目 然 的 地 方 包括 见长 的 代码 串 和 修改 后 的 作用 域 链 人 允许 
有 用 的 快捷 方式 。 可 以 使 用 tagName 符 代 this.tagName， 使 用 
getElementById0O 替 代 document.getElementById0。 并 且 ， 对 于 <<form > 
中 的 文档 元 素 ， 能 通过 ID 引用 任何 其 他 的 表单 元 素 ， 例 如 ， 用 zipcode 


替代 this.form.zipcode 。 


男 一 方面 ，HTMEL 事 件 处 理 程序 中 修改 的 作用 域 链 是 陷阱 之 源 ， 因 为 作 
用 域 链 中 每 个 对 象 的 属性 在 全 局 对 象 中 都 有 相同 名 字 的 属性 。 例 如 ， 

由 于 Document 对 象 定义 (很 少 使 用 ) open() 方 法 ， 因 此 HTML 事 件 处 理 
程序 想 调 用 Window 对 象 的 open() 方 法 就 必须 显 式 地 写 window.open 而 不 
是 open。 表 单 有 类 似 的 问题 但 破坏 性 更 大 ， 因 为 表单 元 素 的 名 字 和 ID 
在 包含 的 表单 元 素 上 定义 属性 ( 见 15.9.1 节 ) 。 人 例如， 如果 表 单 包含 一 
个 ID 是 "location" 的 元 素 ， 那 么 要 是 表单 的 所 有 HTMEL 事 件 处 理 程序 想 
引用 window 的 location 对 象 ， 就 必须 使 用 window.location 而 不 能 是 
location ° 


17.3.4 ”事件 处 理 程 序 的 返回 值 


通过 设置 对 象 属性 或 HTML 属 性 注册 事件 处 理 程序 的 返回 值 有 时 是 非常 
有 意义 的 。 通 常情 况 下 ， 返 回 值 false 就 是 告诉 浏览 器 不 要 执行 这 个 事 
件 相 关 的 默认 操作 。 例 如 ， 表 单 提交 按钮 的 onclick 事 件 处 理 程序 能 返 
回 false 阻 止 浏 览 絮 提交 表单 。 〈 当 用 户 的 输入 在 客户 端 验 证 失败 时 ， 
这 是 有 用 的 。) 类 似 地 ， 如 果 用 户 输入 不 合适 的 字符 ， 输 入 域 上 的 


onkeypress 事 件 处 理 程序 能 通过 返回 false 来 过 滤 键 盘 输 入 。 ( 例 17-6 就 
征用 这 种 方式 过 滤 键 到 输入 。) 


Window 对 和 象 的 onbeforeunload 事 件 处 理 程序 的 返回 值 也 非常 有 意义 。 当 

浏览 器 将 要 跳 转 到 新 页 面 时 触发 这 个 事件 。 如 果 事 件 处 理 程序 返回 一 

J ， 那 么 它 将 出 现在 询问 用 户 是 否 想 离开 当前 页 面 的 标准 对 话 
中 。 


理解 事件 处 理 程 序 的 返回 值 只 对 通过 属性 注册 的 处 理 程序 才 有 意义 这 
韭 常 重 要 。 接 下 来 我 们 将 看 到 使 用 addEventListener() 或 attachEvent() 注 
册 事 件 处 理 程序 转 而 必须 调用 preventDefault() 方 法 或 设置 事件 对 象 的 
returnValue 属 性 。 


17.3.5 ”调用 顺序 


文档 元 素 或 其 他 对 象 可 以 为 指定 事件 类 型 注册 多 个 事件 处 理 程序 。 当 
亨 : 


:通过 设置 对 象 属性 或 HTML 属 性 注册 的 处 理 程序 一 直 优 先 调 用 。 
使 用 addEventListener() 注 册 的 处 理 程序 按照 它们 的 注册 顺序 调用 4。 


-使 用 attachEvent() 注 册 的 处 理 程序 可 能 按照 任何 顺序 调用 ， 所 以 代码 不 
应 该 依赖 于 调用 顺序 。 


17.3.6 事件 传播 


当 事 件 目标 是 Window 对 和 象 或 其 他 一 些 单独 对 象 比如 
XMLHttpRequest) 时 ， 浏 览 器 简单 地 通过 调用 对 象 上 适当 的 处 理 程序 
啊 应 事件 。 当 事件 目标 是 文档 或 文档 元 素 时 ， 情 况 比较 复杂 。 


在 调用 在 目标 元 素 上 注册 的 事件 处 理 函 数 后 ， 大 部 分 事件 会 “ 冒 泡 ”到 | 
DOM 树 根 。 调 用 目标 的 父 元 素 的 事件 处 理 程 序 ， 然 后 调用 在 目标 的 祖 
父 元 素 上 注册 的 事件 处 理 程 序 。 这 会 一 直到 Document 对 象 ， 最 后 到 达 
Window 对 象 。 事 件 冒 泡 为 在 大 量 单独 文档 元 素 上 注册 处 理 程 序 提供 了 
替代 方案 ， 即 在 共同 的 祖先 元 素 上 注册 一 个 处 理 程 序 来 处 理 所 有 的 事 


件 。 例 如 ， 可 以 在 <form> 元 素 上 注册 "change" 事 件 处 理 程序 来 取代 在 
表单 的 每 个 元 素 上 注册 "change" 事 件 处 理 程序 。 


发 生 在 文档 元 素 上 的 大 部 分 事件 都 会 冒 泡 ， 值 得 注意 的 例外 是 focus、 
blur 和 scroll 事 件 。 文 档 元 素 上 的 load 事 件 会 冒 泡 ， 但 它 会 在 Document 对 
象 上 停止 冒 泡 而 不 会 传播 到 Window 对 象 。 只 有 当 整 个 文档 都 加 载 完毕 
时 才 会 触发 Window 对 和 象 的 load 事 件 。 


事件 冒 泡 是 事件 传播 的 第 三 个 “阶段 "。 目标 对 象 本 和 号 的 事件 处 理 程序 
调用 是 第 二 个 阶段 。 第 一 个 阶段 甚至 发 生 在 目标 处 理 程序 调用 之 前 ， 
称 为 “捕获 阶段。 回顾 之 前 addEventListener() 把 一 个 布尔 值 作为 其 第 三 
个 参数 。 如 果 这 个 参数 是 true， 那 么 事件 处 理 程序 被 注册 为 捕获 事件 处 
理 程序 ， 它 会 在 事件 传播 的 第 一 个 阶段 调用 。 事 件 冒 泡 得 到 广泛 的 支 
持 ， 它 能 用 在 包括 下 在 内 的 所 有 浏览 器 中 ， 且 无 论 事件 处 理 程序 用 哪 
种 方式 注册 (除非 它们 被 注册 为 捕获 事件 处 理 程序 ) 。 而 事件 捕获 只 
能 用 于 以 addEventListener() 注 册 旦 第 三 个 参数 是 true 的 事件 处 理 程序 

中 。 这 意味 着 事件 捕获 无 法 在 下 9 之 前 的 于 中 使 用 ， 所 以 在 写本 章 时 ， 
它 还 不 是 通用 的 技术 。 


事件 传播 的 捕获 阶段 像 反 癌 的 冒 泡 阶段 。 最 先 调 用 Window 对 象 的 捕获 
处 理 程序 ， 然 后 是 Document 对 象 的 捕获 处 理 程序 ， 接 着 是 body 对 象 
的 ， 再 然后 是 DOM 树 同 下 ， 以 此 类 推 ， 直 到 调用 事件 目标 的 父 元 素 的 
We ° 在 目标 对 象 本 身上 注册 的 捕获 事件 处 理 程序 不 会 
做 调用 。 


事件 捕获 提供 了 在 事件 没有 送 达 目标 之 前 查看 它们 的 机 会 。 事 件 捕获 
能 用 于 程序 调试 ， 或 用 于 后 面 介 绍 的 事件 取消 技术 ， 过 滤 掉 事件 从 而 
使 目标 事件 处 理 程序 绝 不 会 被 调用 。 事 件 捕获 常用 于 处 理 鼠 标 拖 放 ， 
因为 要 处 理 拖 放 事件 的 位 置 不 能 是 这 个 元 素 内 部 的 子 元 隶 。 请 看 例 17- 
2 


17.3.7 事件 取消 
17.3.4 节 介绍 了 用 属性 注册 的 事件 处 理 程 序 的 返回 值 能 用 于 取消 事件 的 
浏览 器 默认 操作 。 在 支持 addEventListener0 的 浏览 器 中 ， 也 能 通过 调用 


事件 对 象 的 preventDefault0 方 法 取消 事件 的 默认 操作 。 不 过 ， 在 正 9 之 
前 的 了 正中， 可 以 通过 设置 事件 对 象 的 returnValue 属 性 为 false 来 达到 同样 


。 下面 的 代码 假设 一 个 事件 处 理 程 序 ， 它 使 用 全 部 三 种 取消 技 


function cancelHandler (event){ 


var event=event| |window.event;// 用 于 IE/* 这 里 是 处 理事 件 的 代码 */ 


// 现 在 取消 事件 相关 的 默认 行为 


if(event .preventDefault)event .preventDefault();// 标 准 技术 


if(event.returnValue)event.returnValue=false;//IE 


return false;// 用 于 处 理 使 用 对 象 属性 注册 的 处 理 程序 


} 


当前 的 DOM 事 件 模型 草案 定义 了 Event 对 象 属性 defaultPrevented。 它 尚 
未 得 到 广 沁 支持 ， 但 其 目的 是 常态 下 这 个 属性 是 false， 但 如 果 
preventDefaut() 被 调用 则 它 将 变 成 true Bl 。 


取消 事件 相关 的 默认 操作 只 是 事件 取消 中 的 一 种 ， 我 们 也 能 取消 事件 
传播 。 在 文 持 addEventListener0 的 浏览 右 中 ， 可 以 调用 事件 对 象 的 一 个 
stopPropagation() 方 法 以 阻止 事件 的 继续 传播 。 如 果 在 同一 对 象 上 定义 
了 其 他 处 理 程序 ， 剩 下 的 处 理 程序 将 依旧 被 调用 ， 但 调用 
stopPropagation() 之 后 任何 其 他 对 象 上 的 事件 处 理 程序 将 不 会 被 调用 。 
stopPropagation() 方 法 可 以 在 事件 传播 期 间 的 任何 时 间 调 用 ， 它 能 工作 
在 捕获 期 阶段 、 事 件 目 标本 号 中 和 冒 泡 阶段 。 


IE9 之 前 的 下 不 支持 stopPropagation() 方 法 。 相 反 ，IE 事 件 对 象 有 一 个 
cancelBubble 属 性 ， 设 置 这 个 属性 为 true 能 阻止 事件 进一步 传播 。 (IE8 
0 所 以 冒 泡 是 唯一 待 取消 的 事 


当前 的 DOM 事 件 规范 草案 在 Event 对 象 上 定义 另 一 个 方法 ， 命 名 为 
stopImmediatePropagation()。 类似 stopPropagation()， 这 个 方法 阻止 了 任 
何其 他 对 象 的 事件 传播 ， 但 也 阻止 了 在 相同 对 象 上 注册 的 任何 其 他 事 


件 处 理 程序 的 调用 。 在 写本 章 时 ， 某 些 浏览 器 支持 
stopImmediatePropagation()， 但 男 外 的 都 不 支持 。 一 些 像 jQuery 和 YUI 
之 类 的 工具 库 定义 了 跨 平 台 的 stopImmediatePropagation() 方 法 。 


17.4 ”文档 加 载 事件 


现在 已 经 介绍 了 JavaScript 事 件 处 理 的 基本 原理 ， 我 们 将 开始 深入 探索 
具体 事件 类 别 ， 本 市 将 从 文档 load 事 件 开始 。 


大 部 分 Web 应 用 都 需要 Web 浏 览 器 通知 它们 文档 加 载 完 毕 和 为 操作 准备 
就 绪 的 时 间 。Window 对 象 的 load 事 件 就 是 为 了 这 个 目的 ， 第 13 章 详细 
地 讨论 过 它 ， 同 时 那 章 的 示例 13-5 使 用 了 onLoad0 工 具 函 数 。load 事 件 
直到 文档 和 所 有 图 片 加 载 完 毕 时 才 发 生 。 然 而 ， 在 文档 完全 解析 之 后 
但 在 所 有 图 片 全 部 加 载 完毕 之 前 开始 运行 脚本 通常 是 安全 的 ， 所 以 如 
果 基 于 "load" 发 生 之 前 的 事件 触发 脚本 会 提升 Web 应 用 的 启动 时 间 。 


当 文档 加 载 解析 完毕 且 所 有 延迟 (deferred) 脚本 都 执行 完毕 时 会 触发 
DOMContentLoaded 事 件 ， 此 时 图 片 和 异步 (async) 脚本 可 能 依旧 在 加 
载 ， 但 是 文档 已 经 为 操作 准备 束 绪 了 。 (13.3.1 市 介绍 过 延迟 脚本 和 异 
步 脚 本 。) Firefox 引 入 了 这 个 事件 ， 然 后 它 被 包括 Microsoft 的 IE9 在 内 
的 所 有 其 他 浏览 妖 厂 两 采用 。 尺 管 其 名 字 中 有 "DOM"， 并 属于 3 级 
DOM 事 件 标准 的 一 部 分 ， 但 HTML5 标 准 化 了 它 。 


正如 13.3.4 节 所 述 ，document.readyState 属 性 随 着 文档 加 载 过 程 而 变 。 
在 了 正中， 每 次 状态 改变 都 伴随 着 Document 对 象 上 的 readystatechange 事 
件 ， 当 下 接收 到 "complete" 状 态 时 使 用 这 个 事件 来 做 判断 是 可 行 的 。 
HTML5 标 准 化 了 readystatechange 事 件 ， 但 它 仅 在 load 事 件 之 前 立即 触 
发 ， 所 以 目前 尚 不 清楚 监听 '"readystatechange" 取 代 "load" 会 带 来 多 大 好 


例 17-1 定 义 了 whenReady() 琴 数 ， 它 非常 像 示例 13-5 的 onLoad() 琴 数 。 当 
文档 为 操作 准备 就 绪 时 ， 传 递 给 whenReady0 的 函数 将 会 作为 Document 
对 象 的 方法 调用 。 和 之 前 的 onLoad0 函 数 不 同 ，whenReady0 监 听 
DOMContentLoaded 和 readystatechange 事 件 ， 而 使 用 load 事 件 仅仅 是 为 
了 兼容 那些 不 文 持 之 前 事件 的 较 老 浏览 右 。 接 下 来 本 和 及 后 面 章 交 的 
一 些 例子 都 使 用 whenReady() 国 数 。 


例 17-1:， 当 文档 准备 束 绪 时 调用 函数 


DA 


* 传 递 画 数 给 whenReady( ) ， 当 文档 解析 完毕 且 为 操作 准备 就 绪 时 ， 


* 函 数 将 作为 文档 对 象 的 方法 调 


*DOMContentLoaded、readystatechange 或 1oad 事 件 发 生 时 会 触发 注册 函数 


* 一 旦 文档 准备 就 绪 ， 所 有 函数 都 将 被 调用 ， 任 何 传递 给 whenReady( ) 的 函数 都 将 立即 调用 


*/ 


var whenReady=(function(){// 这 个 函数 返回 whenReady( ) 画 数 


var funcs=[];// 当 获得 事件 时 ， 要 运行 的 画 数 


var ready=false;// 当 触发 事件 处 理 程序 时 ， 切 换 到 true 


// 当 文档 准备 就 绪 时 ， 调 用 事件 处 理 程序 


function handler(e){// 如 果 已 经 运行 过 一 次 ， 只 需要 返 区 


if(ready)return;// 如 果 发 生 readystatechange 事 件 ， 


// 但 其 状态 不 是 "complete" 的 话 ， 那 么 文档 尚未 准备 好 


if(e.type==="readystatechange"&&document.readyState!=="complete") 


return;// 运 行 所 有 注册 函数 


// 注 意 每 次 都 要 计算 funcs .length， 


// 以 防 这 些 函 数 的 调用 可 能 会 导致 注册 更 多 的 画 数 


for(var i=0;i<funcs.length;i++) 


funcs[i] .call(document );// 现 在 设置 ready 标 识 为 true， 并 移 除 所 有 画 数 


ready=true; 


funcs=null; 


// 为 接收 到 的 任何 事件 注册 处 理 程序 


if(document.addEventListener){ 


document .addEventListener("DOMContentLoaded",handler, false); 


document .addEventListener("readystatechange",handler, false); 


window.addEventListener("load",handler, false),; 


else if(document.attachEvent){ 


document.attachEvent("onreadystatechange",handler); 


window.attachEvent("onload",handler); 


| 


// 返 


whenReady( ) 函数 


return function whenReady(f){ 


全 


任 备 完毕 ， 个 前 要 运行 已 


if(ready)f.call(document );// 厂 ? 


else funcs.push(f);// 否 则 ， 加 入 队列 等 候 


}()); 


17.5 ”鼠标 事件 


与 鼠标 相关 的 事件 有 不 少 ， 表 17-1 全 部 把 它们 列 出 了 。 

除 "mouseenter" 和 "mouseleave" 外 的 所 有 鼠标 事件 都 能 冒 泡 。 链 接 和 提 
交 按 钮 上 的 click 事 件 都 有 默认 操作 且 能 够 阻止 。 可 以 取消 上 下 文 沫 单 
事件 来 阻止 显示 上 下 文 莱 单 ， 但 一 些 浏览 器 有 配置 选项 导致 不 能 取消 


上 下 文 菜单 。 


表 17.1， 鼠 标 事件 


类 型 
click 


contextmenu 


dblclick 
mousedown 
mouseup 
mousemove 


MOUSEOVEr 


mouseout 


mouseenter 


mouseleave 


说 明 

高 级 事件 ， 当 用 户 按 下 并 释放 忌 标 按键 或 其 他 方式 “激活 ”元 素 时 触发 
可 以 取消 的 事件 ， 当 上 下 文 菜单 即将 出 现时 触发 。 当 前 浏览 器 在 鼠标 右 
击 时 显示 上 下 文 菜单 ， 所 以 这 个 事件 也 能 像 click 事 件 那 样 使 用 

当 用 户 双击 鼠标 时 触发 

当 用 户 按 下 鼠标 按键 时 触发 

当 用 户 释放 忌 标 按键 时 触发 

当 用 户 移动 鼠标 时 触发 

当 忌 标 进入 元 素 时 触发 。relatedTarget (在 IE 中 是 fromElement) 指 的 是 鼠 
标 来 自 的 元 素 

当 鼠 标 离开 元 素 时 触发 。relatedTarget (在 IE 中 是 toElement) 指 的 是 鼠标 
要 去 往 的 元 素 

类 似 “mouseover”， 但 不 冒 泡 。IE 将 其 引入，HTML5 将 其 标准 化 ,但 沿 
未 广泛 实现 


类 似 “mouseout”， 但 不 冒 泡 。IE 将 其 | 人，HTML5 将 其 标准 化 ,但 尚 
未 广泛 实现 


传递 给 鼠标 事件 处 理 程序 的 事件 对 象 有 clientX 和 clientY 属 性 ， 它 们 指 
定 了 鼠标 指针 相对 于 包含 窗口 的 坐标 。 加 入 窗口 的 深 动 偏 移 量 ( 见 示 
例 15-8) 就 可 以 把 鼠标 位 置 转换 成 文档 坐标 。 


altKey、ctrIKey、metaKey 和 shiftKey 属 性 指定 了 当 事 件 发 生 时 是 否 有 各 
° 例如 ， 这 让 你 能 够 区 分 普通 单 击 和 按 着 Shift 键 的 


button 属 性 指定 当 事 件 发 生 时 哪个 鼠标 按键 按 下 ， 但 是 ， 不 同 浏览 笑 给 

这 个 属性 赋 不 同 的 什 ， 所 以 它 很 难 用 ， 更 多 详细 信息 请 看 Event 参 考 

页 。 某 些 浏览 器 只 在 单 击 左 键 时 才 触 发 click 事 件 ， 所 以 如 果 需 要 探测 

其 他 键 的 单 击 需要 监听 mousedown 和 mouseup 事 件 。 通 常 contextmenu 事 

Ge 但 如 上 所 述 ， 当 事件 发 生 时 可 能 无 法 阻止 上 下 
能 引 的 这 泵 。 


鼠标 事件 对 象 有 一 些 其 他 的 鼠标 特定 属性 ， 但 它们 并 不 常用 ， 有 具体 请 
看 Event 参 考 页 的 列表 。 


例 17-2 展 示 了 JavaScript 函 数 drag0， 它 会 在 mousedown 事 件 处 理 程序 中 
调用 ， 其 允许 用 户 拖 放 绝对 定位 的 文档 元 素 。drag0 能 够 在 DOM 和 正事 
件 模型 中 运行 。 


drag() 接 受 两 个 参数 。 第 一 个 是 要 拖 动 的 元 素 ， 它 可 以 是 发 生 
mousedown 事 件 的 元 素 或 包含 元 素 (例如 ， 你 可 能 允许 用 户 拖 动 的 元 素 
看 起 来 像 标 题 栏 ， 而 拖 动 的 包含 元 素 像 窗 口 )。 然 而 ,无论 是 哪 种 情 
况 ， 它 必须 是 使 用 CSS position 属 性 绝对 定位 的 文档 元 素 。 第 二 个 参数 
是 触发 mousedown 事 件 的 事件 对 象 。 下 面 是 一 个 使 用 drag() 的 简单 例 
子 ， 它 定义 了 用 户 在 按 下 Shift 键 时 能 够 拖 动 的 <img > : 


<img src="draggable.gif" 
style="position:absolute;left:100px;top:100px;" 
onmousedown="if(event.shiftkey)drag(this,event);"> 


drag() 芳 数 把 mousedown 事 件 发 生 的 位 置 转换 为 文档 坐标 ， 这 是 为 了 计 
算 鼠 标 指 针 到 正在 移动 的 元 素 左 上 角 之 间 的 距离 。 示 例 15-8 使 用 


getScrollOffsets0 帮 助 坐 标 转换 。 然 后 ，drag0 注 册 了 接着 mousedown 事 
件 发 生 的 mousemove 和 mouseup 事 件 的 事件 处 理 程序 。mousemove 事 件 
处 理 程序 用 于 响应 文档 元 素 的 移动 ， 而 mouseup 事 件 处 理 程序 用 于 注销 
自己 和 mousemove 事 件 处 理 程序 。 


值得 注意 的 是 mousemove 和 mouseup 处 理 程序 注册 为 捕获 事件 处 理 程 
序 。 这 是 因为 用 户 可 能 移动 鼠标 比 其 后 的 文档 元 素 更 快 ， 如 果 这 种 情 
况 发 生 ， 某 些 mousemove 事 件 会 发 生 在 原始 目标 元 素 之 外 。 没 有 捕获 ， 
这 些 事 件 将 无 法 分 派 正 确 的 处 理 程 序 。 正 事件 模型 无 法 像 标准 事 件 模 
型 那样 提供 事件 捕获 ， 但 它 在 这 种 情况 下 有 一 个 专门 用 于 捕获 鼠标 事 
件 的 setCapture() 方 法 。 下 面 的 示例 代码 会 展示 它 是 如 何 工作 的 。 

最 后 ， 注 意 drag() 中 定义 的 moveHandler 站 和 upHandler0 函 数 。 由 于 在 骨 
套 的 作用 域 中 定义 它们 ， 因 此 它们 能 使 用 drag() 的 参数 和 本 地 变量 ， 这 
将 大 大 人 简化 它们 的 实现 。 


例 17-2: 拖 动 文档 元 素 


se 


*Drag ,js: 拖 动 绝对 定位 的 HTML 元 素 


* 这 个 模块 定义 了 一 个 drag () 画 数 ， 它 用 于 mousedown 事 件 处 理 程序 的 调 


* 随 后 的 mnousemove 事 件 将 移动 指定 元 素 ，mouseup 事 件 将 终止 拖 动 


* 这 些 实现 能 同 标准 和 IE 两 种 事件 模型 一 起 工作 


| 
已 


* 它 需要 用 到 


其 他 地 方 介绍 的 getScroll0ffsets() 方 法 


*elementToDrag: 接收 mousedow 


* 它 必须 是 绝对 定位 的 元 素 


n 事 件 的 元 素 或 某 些 包含 元 素 


*event: mousedown 事 件 对 象 


类 Se 


function drag(elementToDrag,event){// 初 始 鼠 标 位 


var scroll=getScroll0ffsets();// 来 自 其 他 地 方 的 


* 它 的 style .left 和 style .top 值 将 随 


户 的 拖 动 而 改变 


Var startX=event.clientX+scroll.x; 


var startY=event.clientYtscroll,y;// 在 文档 坐标 下 ， 待 拖 动 元 素 的 初始 位 


// 因 为 elementToDrag 是 绝对 定位 的 ， 


// 所 以 我 们 可 以 假设 它 的 offsetParent 就 是 文档 的 body 元 素 


Var origX=elementToDrag.offsetLeft; 


var origY=elementToDrag.offsetTop;// 计 算 mousedown 


// 我 们 将 它 男 存 为 鼠标 移动 的 距离 


Var deltaX=startX-origxX; 


var deltaY=startY-origY;// 六 
理 程 序 


if(document.addEventListener ){// 标 准 事 f 


册 用 了 


山中 


I 


， 转 换 为 文档 坐标 


和 件 和 元 素 左上 角 之 间 的 距离 


向 应 


mousedown 寻 


模型 


// 在 document 对 象 上 注册 捕获 事件 处 更 


程 请 


件 发 


的 寻 


让 


的 mousemove 和 mouseup 习 


document.addEventListener("mousemove",moveHandler, true); 


document .addEventListener("mouseup",upHandler, true); 


else if(document .attachEvent){// 用 于 IE5~8 的 IE 事件 模型 


// 在 IE 事件 模型 中 ， 


// 捕 获 事件 是 通过 调用 元 素 上 的 setcapture( ) 捕 获 它们 


elementToDrag.setCcapture(); 


elementToDrag.attachEvent("onmousemove",moveHandler); 


elementToDrag.attachEvent ("onmouseup",upHandler );// 作 为 nouseup 事 件 看 待 鼠 标 捕获 的 丢失 


elementToDrag.attachEvent("onlosecapture", upHandler); 


// 我 们 处 理 了 这 个 事件 ， 不 让 任何 其 他 元 素 看 到 它 


if(event.stopPropagation)event.stopPropagation( ) ;// 标 准 模型 


else event.cancelBubble=true;//IE 


// 现 在 阻止 任何 默认 操作 


if(event .preventDefault)event.preventDefault( ) ;// 标 准 模型 


else event.returnValue=false;//IE/** 


* 当 元 素 正在 被 拖 动 时 ， 这 就 是 捕获 mousemove 事 件 的 处 理 程序 


* 它 用 于 移动 这 个 元 素 


eA 


function moveHandler(e){ 


if(!1e)e=window.event;//IE 事 件 模 型 


// 移 动 这 个 元 素 到 当前 鼠标 位 


// 通 过 滚动 条 的 位 置 和 初始 


HH 


Var scroll=getSscrolloffsets(); 


elementToDrag.style.left=(e.clientX+scroll.x-deltaX)+"px"; 


elementToDrag.style.top=(e.clientY+scroll.y-deltaY)+"px";// 同 时 不 让 全 


if(e.stopPropagation)e.stopPropagation( );// 标 ? 


else e.cancelBubble=true;//IE 


}/™ 


发 


Se 


类 fp 


的 偏 移 量 来 调整 


这 是 捕获 在 拖 动 结束 时 发 4 


人 


的 处 


里 程序 


E 的 最 终 mouseup 导 


function upHandler(e){ 


if(!1e)e=window.event;//IE 事 件 模 型 


// 汶 


FE 销 捕 


if(document.removeEventListener){//DOM 事 


document .removeEventListener("mouseup",upHandler, true); 


document .removeEventListener("mousemove",moveHandler, true); 


else if(document.detachEvent){//IE 5+ 事 但 


elementToDrag.detachEvent("onlosecapture", upHandler); 


大 寻 


人 


处 :到 


程序 


件 模型 


模型 


全 


FE 何 


他 元 素 看 到 这 个 寻 


elementToDrag.detachEvent("onmouseup",upHandler); 


elementToDrag.detachEvent("onmousemove",moveHandler); 


elementToDrag.releaseCapture(); 


// 并 且 不 让 事件 进一步 传播 


if(e.stopPropagation)e.stopPropagation() ;// 标 准 模型 


else e.cancelBubble=true;//IE 


下 面 的 代码 展示 了 在 HTML 文 件 中 如 何 使 用 drag() ( 它 是 示例 16-2 带 拖 
动 功能 的 简化 版 ) : 

<script src="getScrolloffsets.js"></script><!--drag( ) 需 要 这 个 --> 

<script src="Drag.js"></script> 


<1-- 定 义 drag()-->> 


< 1-- 要 拖 动 的 元 素 - - > 


<div style="position:absolute;left:100px;top:100px;width:250px; 


background-color:white;border:solid black;"> 


<!- -通过 "标题 栏 " 拖 动 整 个 元 素 ， 注 意 onmousedown 属 性 - - > 


<div style="background-color:gray;border-bottom:dotted black; 


padding:3px;font-family:sans-serif;font-weight:bold;" 


onmousedown="drag(this.parentNode,event);"> 


拖 动 我 < ! - -标题 栏 的 内 容 - - > 


</div> 


<!- -可 拖 动 元 素 的 内 容 - - > 


<p> 这 是 一 个 测试 。 测 试 中 ， 测 试 中 ， 测 试 中 ，</p> <p> 测 试 </p><p> 测 试 </p> 


</div> 


这 里 的 关键 是 内 部 <div> 元 素 的 onmousedown 属 性。 注意 ， 它 使 用 
this.parentNode 指 定 整 个 容器 元 聚 将 被 拖 动 。 


17.6 ”鼠标 访 轮 事 件 


所 有 的 现代 浏览 器 都 文 持 鼠标 滚 纶 ， 并 在 用 户 深 动 深 轮 时 触发 事件 。 
浏览 器 通常 使 用 鼠标 深 轮 深 动 或 缩放 文档 ， 但 可 以 通过 取消 
mousewheel 事 件 来 阻止 这 些 默 认 探 作 。 


有 一 些 互 用 性 问题 影响 滚轮 事件 ， 但 编写 路 平台 的 代码 依旧 可 行 。 在 
写本 章 时 ， 除 Firefox 之 外 的 所 有 浏览 器 都 支持 "mousewheel" 事 件 ， 但 
Firefox 使 用 "DOMMouseScroll"， 而 3 级 DOM 事 件 规范 草案 建议 使 用 事 
件 名 "wheel" 蔡 代 "mousewheel"。 除 了 事件 名 的 不 同 ， 回 各 种 事件 传递 
的 事件 对 象 也 使 用 了 不 同 的 属性 名 来 指定 深 轮 发 生 的 旋转 量 。 最 后 注 
意 ， 基 础 硬件 也 会 导致 鼠标 深 轮 之 间 的 区 别 。 某 些 硬件 允许 癌 前 问 后 
的 一 维 滚动 ， 而 男 一 些 (尤其 是 在 Mac 上 ) 也 允许 向 左 向 右 滚动 (在 这 
些 鼠 标 上 , “该 轮 ? 其 实 是 轨迹 球 ) 。3 级 DOM 规 范 草案 甚至 包括 支持 二 
维 鼠 标 “ 深 轮 "， 除 了 上 下 左右 ， 它 还 能 报告 顺 时 针 或 逆 时 针 旋 转 。 


传递 给 "mousewheel" 处 理 程序 的 事件 对 象 有 wheelDelta 属 性 ， 其 指定 用 
户 滚 动 滚轮 有 多 远 。 远 离 用 户 方 辐 的 一 次 鼠标 滚轮 “ 单 击 ” 的 wheelDelta 
值 通 常 是 120， 而 接近 用 户 方 向 的 一 次 * 单 击 ” 的 值 是 -12018-。 在 Safari 和 
Chrome 中 ， 为 了 文 持 使 用 二 维 轨迹 球 而 非 一 维 滚轮 的 Apple 鼠 标 ， 除 了 
wheelDelta 属 性 外 ， 事 件 对 象 还 有 wheelDeltaX 和 wheelDeltaY， 而 
wheelDelta 和 wheelDeltaY 的 值 一 直 相 同 。 


在 Firefox 中 ， 可 以 使 用 非 标准 的 DOMMouseScroll 事 件 取代 
mousewheel， 使 用 事件 对 象 的 detail 属 性 取代 wheelDelta。 但 是 ，detail 
属性 值 的 缩放 比率 和 正 负 符号 不 同 于 wheelDelta，detail 值 乘 以 -40 和 
wheelDelta 值 相等 。 


在 写本 章 时 ，3 级 DOM 事 件 规范 草案 标准 定义 了 wheel 事 件 作为 
mousewheel 和 DOMMouseScroll 的 标准 版 本 。 传 递 给 wheel 事 件 处 理 程序 
的 事件 对 象 将 有 deltaX、deltaY 和 deltaZ 属 性 ， 以 指定 三 个 维度 的 旋转 。 
这 些 值 必须 乘 以 -120 才 和 mousewheel 事 件 的 wheelDelta 值 和 正 负 符 号 相 
匹配 。 


对 于 所 有 这 些 事件 类 型 来 说 ， 其 事件 对 象 束 像 鼠 标 事件 对 象 ， 它 包括 
鼠标 指针 的 坐标 和 键盘 辅助 键 的 状态 。 


例 17-3 演 示 了 如 何 使 用 鼠标 该 轮 事件 和 如 何 实现 跨 平 台 的 互 用 性 。 它 定 
义 了 enclose0) 函 数 在 一 个 较 大 的 内 容 元 素 (比如 图 片 ， 周围 包装 了 一 个 
指定 尺寸 的 “ 窗 体 ”* 或 “ 视 口 >， 并 定义 了 鼠标 深 轮 事件 处 理 程序 让 用 户 既 
能 在 视 口内 移动 内 容 元 于 也 能 调整 视 口 大 小 。 可 以 像 下 面 这 样 在 代码 
中 使 用 enclose() 国 数 : 


<script src="whenReady.js"></script> 


<script src="Enclose.js"></script> 


<script> 


whenReady(function( ){ 


enclose(document .getElementById("content"),400,200, -200, -300); 


}); 


</script> 


<style>div,.enclosure{border:solid black 1i0px;margin:10px;}</style> 


<img id="content"src="testimage.jpg"/> 


为 了 能 够 在 所 有 和 常用 浏览 器 中 正确 地 工作 ， 例 17-3 必 须 执 行 一 些 浏览 器 
测试 《参见 13.4.5T) 。 这 个 示例 提前 使 用 了 3 级 DOM 事 件 规 范 草案 ， 
包括 在 代码 中 使 用 了 wheel 事 件 ， 当 浏 贤 器 实现 它 时 即 可 使 用 (4-。 它 也 
包含 未 来 的 一 些 证 明 ， 当 Firefox 开 始 支 持 wheel 或 mousewheel 事 件 时 就 
停止 使 用 DOMMouseScroll。 注意 ， 例 17-3 也 是 演示 元 素 几 何 形状 和 
CSS 定 位 技术 的 示例 ， 这 些 技术 会 在 15.8 六 和 16.2.1 节 中 说 明 。 


例 17-3: 处 理 鼠 标 深 轮 事件 


// 把 内 容 元 素 装 入 到 一 个 指定 大 小 (最 小 是 50x50) 的 窗 体 或 视 口 内 


// 可 选 参数 contentX 和 contentY 指 定 内 容 相 对 于 窗 体 的 初始 偏 移 量 


// 如 果 指 定 ， 它 们 必须 <=0) 


// 这 个 窗 体 有 mousewheel 事 件 


ul 
他 
沪 
Ht 


里 程序 ， 


ly 


// 它 允许 用 


平移 元 素 和 缩放 窗 体 


function enclose(content, framewidth, frameheight,contentX,contentY){// 这 些 参数 不 仅仅 是 初始 
值 ， 


// 它 们 保存 当前 状态 ， 能 被 nousewhee1l 处 理 程序 使 用 和 修改 


framewidth=Math.max(framewidth, 50); 


frameheight=Math.max(frameheight, 50); 


contentX=Math.min(contentx,0)||0; 


contentY=Math.min(contentY,0)||9;// 创 建 frame 元 素 ， 且 设置 CSS 类 名 和 样式 


var frame=document.createElement("div"); 


frame.className="enclosure";// 这 样 我 们 能 在 样式 表 中 定义 样式 


frame.style.width=framewidth+"px";// 设 置 frame 的 尺寸 


frame.style.height=frameheight+"px"; 


A 


滚动 条 ， 不 能 淤 出 


frame.style.overflow="hidden";// 没 


frame.style.boxSizing="border-box";//border-box 简 化 了 调整 frame 大 小 的 计算 


frame.style.webkitBoxSizing="border-box"; 


frame.style.MozBoxSizing="border-box";// 把 frame 放 入 文档 中 ， 并 把 内 容 移 入 frame 中 
content.parentNode.insertBefore(frame,content); 

frame .appendCchild(content ) ;// 确 定 元 素 相对 于 frame 的 位 置 
content.style.position="relative",; 

content.style.1left=contentX+"px"; 
content.style.top=contentY+"px";// 我 们 将 需要 针对 下 面 一 些 特定 浏览 器 怪 辛 进行 处 理 

var isMacWebkit=(navigator.userAgent.indexof("Macintosh")!==-1&&% 
navigator.userAgent.indexof ("webKit")!==-1); 

var isFirefox=(navigator.userAgent.indexof("Gecko")!==-1);// 注 册 mousewheel 事 


frame .onwheel=wheelHandler;// 未 来 浏览 


Te 口号 


frame .onmousewhee1L=wheelHandler;// 大 多 数 当前 浏览 


if(isFirefox)// 仅 Firefox 


frame.addEventListener("DOMMouseScroll",wheelHandler, false); 


function wheelHandler (event){ 


var e=event | |window.event;// 标 准 或 TE 事件 对 象 


// 查 找 wheel 事 件 对 象 、mousewheel 事 件 对 象 (包括 2D 和 14D 形式) 


时 程序 


// 和 Firefox 的 DOMMouseScrol1 事 件 对 象 的 属性 ， 
// 从 事件 对 象 中 提取 旋转 量 
// 绽 放 delta 以 便 一 次 鼠标 滚轮 " 单 击 "相对 于 屏幕 的 缩放 增 量 是 30 像 素 
// 如 果 未 来 浏览 器 在 同一 事件 上 同时 


触发 "wheel" 和 "mousewheel",， 


让 全 


// 这 里 最 终 会 重 


// 所 以 ， 和 希望 取消 whee1 事 件 将 阻止 nousewhee] 寻 


事件 的 产 4 


FT 


Var deltaX=e.deltaX*-30||//wheel] 


e.wheelDeltaX/4||//mousewheel 


0;// 属 性 未 定义 


var deltaY=e.deltaY*-30||//wheel 


e.wheelDeltaY/4||//webkit 中 的 mousewhee1 


地 
|r 
I 


(e.wheelDeltaY===undefined&&%&// 如 


没有 2D 属 性 ， 


Kr 
a 
[至 


e.wheelDelta/4)||//¥ 


了 么 就 用 1D 的 滚轮 


性 


mm 


e.detail*-10||//Firefox 的 DOMMouseScroll 事 


0;// 属 性 未 定义 


// 在 大 多 数 浏 览 器 


二 


遇 


次 鼠标 滚轮 和 


应 的 delta 是 120 
// 但 是 ， 在 Mac 中 ， 鼠 标 滚 轮 似乎 对 速度 更 敏感 ， 


// 


delta 值 通常 要 大 120 倍 ， 使 


App1le 鼠 标 至 少 如 此 


// 使 


浏 宽 器 测试 解决 这 个 问题 


if(isMacwebkit)f{ 


deltaX/=30; 


deltaY/=30; 


// 如 果 在 Firefox (未 来 版 本 ) 中 得 到 mousewhee1 或 whee1 事 件 ， 


// 那 么 就 不 再 需要 DOMMouseScrol1 


if(isFirefox&&e.type!=="DOMMouseScroll1") 


frame.removeEventListener("DOMMouseScroll",wheelHandler, false);// 获 取 内 容 元 素 的 当前 


var contentbox=content.getBoundingClientRect(); 


var contentwidth=contentbox.right-contentbox.1eft; 


var contentheight=contentbox.bottom-contentbox.top; 


if(e.altKkey){f// 如 果 按 下 Alt 键 ， 就 可 以 调整 frame 大 小 


if(deltax){ 


framewidth-=deltaX;// 新 宽度 ， 但 不 能 比 内 容 大 


framewidth=Math.min(framwidth,contentwidth); 


framewidth=Math.max(framewidth,50);// 


也 不 能 比 50 小 


frame.style.width=framewidth+"px";// 在 frame 上 设置 它 


if(deltaY){ 


frameheight-=deltaY;// 同 样 的 操作 对 frame 的 高 度 做 一 遍 


frameheight=Math.min(frameheight,contentheight); 


尺寸 


frameheight=Math .max(frameheight-deltaY, 50); 


frame.style.height=frameheight+"px"; 


} 

} 

else{// 没 有 按 下 Alt 加 
if(deltaX){// 不 能 再 滚动 


var minoffset=Math.min(framewidth-contentwidth,0);// 把 deltaxX 添 加 到 contentX 中 ， 但 不 能 小 9 


minoffset 


了 


外 助 键 ， 就 可 以 平移 frame 中 的 内 容 


contentX=Math.max(contentX+deltaX,minoffset); 


contentX=Math.min(contentX,0);// 或 比 0 大 


content.style.left=contentX+"px";// 设 置 新 的 偏 移 二 


if(deltaY){ 


由 


由 


出 


var minoffset=Math.min(frameheight-contentheight,0);// 把 deltaY 添 加 到 contentY， 但 不 能 小 3 


minoffset 


contentY=Math.max(contentY+deltaY,minoffset); 


contentY=Math.min(contentY,0);// 或 比 0 大 


content.style.top=contentY+"px";// 设 置 新 的 人 


// 不 让 这 个 习 


到 台 


F} 冒 泡 ， 阻 止 人 


E 何 默认 操作 


扁 移 量 


// 这 会 阻止 浏览 器 使 用 mousewhee1l 事 件 滚动 文档 


// 希 望 对 于 相同 的 鼠标 滚动 


// 调 用 wheel 事 件 上 的 preventDefault( ) 也 能 阻止 nousewhee1 事 件 的 产生 


if(e.preventDefault)e.preventDefault(); 


if(e.stopPropagation)e.stopPropagation(); 


e.cancelBubble=true;//IE 事 件 


e.returnValue=false;//IE 事 件 
return false; 
} 


} 


17.7 ” 拖 放 事件 


例 17-2 展 示 了 如 何在 应 用 中 响应 鼠标 拖 动 。 使 用 像 那 样 的 技术 人 允许 在 网 
页 中 拖 起 和 “放置 > 元素 ， 但 真正 的 “ 拖 放 ?是 另 一 回 事 。 拖 放 (Drag-and- 
Drop，DnD) 是 在 “ 拖 放 源 (drag source) ”和 “ 拖 放 目标 (drop 

target) ”之 间 传 输 数 据 的 用 户 界 面 ， 它 可 以 存在 相同 应 用 之 间 也 可 是 不 
同 应 用 之 癌 。 拖 放 是 复杂 的 人 机 交互 ， 用 于 实现 拖 放 的 API 总 是 很 复 
局、: 


它们 必须 和 故 层 OS 结合 ， 使 它们 能 够 在 不 相关 的 应 用 间 工 作 。 

它们 必须 适用 于 “移动 *、“ 复 制 * 和 “链接 ”数据 传输 操作 ， 人 允许 拖 放 源 
和 拖 放 目标 通过 设置 限制 允许 的 操作 ， 然 后 让 用 户 选 择 〈 通 利 使 用 键 
盘 辅 助 刍 ) 许可 设置 。 

它们 必须 为 拖 放 源 提供 一 种 方式 指定 行 拖 动 的 图 标 或 图 像 。 

:它们 必须 为 拖 放 源 和 拖 放 目标 的 DnD 交 互 过 程 提 供 基 于 事件 的 通知 。 


在 Microsoft 在 IE 的 早期 版 本 引入 了 DnD API 。 它 并 不 是 精心 设计 且 良 好 
归档 的 API， 但 其 他 浏览 器 都 尝试 复 制 它 ， 且 HTML5 标 准 化 了 类 似 正 
DnD API 的 东西 并 增加 了 使 API 更 易于 使 用 的 新 特性 。 在 写本 章 时 ， 这 
些 新 的 易于 使 用 的 DnD API 尚 未 实现 ， 所 以 本 节 包 括 了 IE API 来 表示 对 
HTM5 标 准 祝福 。 


IE DnD API 难 以 使 用 以 及 当前 浏览 右 的 不 同 实现 使 得 无 法 共同 使 用 API 
一 些 较 复 杂 的 部 分 ， 但 它 允 许 Web 应 用 像 普通 的 桌面 应 用 一 样 参 与 应 用 
间 DnD。 浏 览 器 一 直 能 够 实现 简单 的 DnD。 如 果 在 web 浏览 器 中 选择 了 
文本 ， 非 常 容 易 把 文本 拖 到 字 处 理 器 中 。 同 时 如 果 在 字 处 理 器 中 选择 
一 个 URL， 你 能 把 它 拖 到 浏 顺 器 中 并 使 浏 上 顺 器 访问 这 个 URL。 本 贡 演 
示 了 如 何 创建 自 定义 拖 放 源 和 自 定义 拖 放 目 标 ， 前 者 传输 数据 而 不 是 
其 文本 内 容 ， 后 者 以 某 种 方式 啊 应 拖 放 数据 而 不 是 仅 显示 它 。 


DnD 总 是 基于 事件 且 JavaScript API 包 含 两 个 事件 集 ， 一 个 在 拖 放 源 上 
触发 ， 另 一 个 在 拖 放 目标 上 触发 。 所 有 传递 给 DnD 事 件 处 理 程序 的 事 
件 对 象 都 类 似 鼠 标 事件 对 象 ， 另 外 它 拥有 dataTransfer 必 性。 这 个 属性 
引用 DataTransfer 对 象 ， 该 对 象 定 义 DnD API 的 方法 和 属性 。 


拖 放 源 事 件 相 当 简 单 ， 我 们 束 从 它们 开始 。 任 何 有 HTML draggab le 属 
性 的 文档 元 素 都 是 拖 放 源 。 当 用 户 开 始 用 鼠标 在 拖 放 源 上 拖 动 时 ， 浏 
多 句 并 没有 选择 元 素 内 容 ， 相 反 ， 它 在 这 个 元 素 上 触发 dragstart 事 件 。 
这 个 事件 的 处 理 程序 就 调用 dataTransfer.setData0 指 定 当 前 可 用 的 拖 放 源 
数据 (和 数据 类 型 。 ( 当 新 的 HTML5 API 实 现时 ， 可 以 用 
dataTransfer.items.add() 代 替 。) 这 个 事件 处 理 程序 也 可 以 设置 
dataTransfer.effectAllowed 来 指定 文 持 “移动 ”\“ 复 制 ? 和 “链接 ”传输 探 作 
中 的 几 种 ， 同 时 它 可 以 调用 dataTransfer.setDragImage() 或 
dataTransfer.addElement() (在 那些 支持 这 些 方 法 的 浏览 器 中 ) 指定 图 片 
或 文档 元 素 用 做 拖 动 时 的 视觉 表现 。 


在 拖 动 的 过 程 中 ， 浏 贤 亏 在 拖 放 源 上 触发 拖 动 事件 。 如 肝 想 更 新 拖 动 
图 片 或 修改 提供 的 数据 ， 可 以 监听 这 些 事件 ， 但 一 般 不 需要 注册 “ 拖 
动 ” 事 件 处 理 程 序 。 


当 放 置 数据 发 生 时 会 触发 dragend 事 件 。 如 果 拖 放 源 文 持 “ 移 动 ” 操 作 ， 
它 就 会 检查 dataTransfer.dropEffect 去 看 看 是 否 实际 执行 了 移动 操作 。 如 
果 执 行 了 ， 数 据 就 被 传输 到 其 他 地 方 ， 你 应 该 从 拖 放 源 中 删除 它 。 


实现 简单 的 自 定 义 拖 放 源 只 需要 dragstart 事 件 。 例 17-4 束 是 这 样 的 例 
子 ， 它 在 <span>> 元 素 中 用 "hh:mm" 格 式 显示 当前 时 间 ， 并 每 分 钟 更 新 
一 次 时 间 。 假 设 这 是 示例 要 做 的 一 切 ， 用 户 能 选择 时 钟 中 显示 的 文 
本 ， 然 后 拖 动 这 个 时 间 。 但 在 这 个 例子 中 JavaScript 代 码 通 过 设置 时 钟 
元 素 的 draggable 属 性 为 tue 和 定义 ondragstart 事 件 处 理 程序 函数 来 使 得 
时 钟 成 为 目 定 义 拖 放 源 。 事 件 处 理 程序 使 用 dataTransfersetData0 指 定 一 
个 完整 的 时 间 戳 字符 串 (包括 日 期 秒 和 时 区 信息 ) 作为 待 拖 动 的 数 
它 还 调用 dataTransfer.setDragIcon() 指 定 待 拖 动 的 图 片 (一 个 时 钟 图 
标 ) 。 


例 17-4: 一 个 目 定 义 拖 放 源 


<script src="whenReady.js"></script> 
<script> 


whenReady(function(){ 


var clock=document .getElementById("clock");// 时 钟 元 素 


var icon=new Image();// 用 于 拖 动 的 图 片 


icon.src="clock-icon.png";// 图 片 URL 


= 


// 每 分 钊 Miwa 次 时 间 


function displayTime(){ 


var now=new Date() ;// 获 取 当 前 时 间 


var hrs=now.getHours(),mins=now.getMinutes(); 


if(mins<10)mins="QO"+mins,; 


clock.innerHTML=hrs+":"+mins;// 显 示 当 前 时 间 


setTimeout (displayTime, 60990);// 一 分 钟 后 将 再 次 运行 


displayTime();// 使 


Fh 能 够 拖 动 


// 我 们 也 能 通过 HTML 属 性 


的 : <span draggable="true">.,.. 


clock.draggable=true;// 设 


f 处 涅 程 请 


clock,ondragstart=function(event ){ 


Var event=event| |window.event;// 


于 IE 兼 容 性 
//dataTransfer 属 性 是 拖 放 API 的 关键 


el 


lie 


var dt=event.dataTransfer;// 告 诉 浏 
LA 


览 器 正在 拖 动 的 是 什么 
到 Date( ) 构 造 画 数 用 做 一 个 返回 时 间 惟 字符 串 的 画 数 
dt.setData("Text"y Date()+"xXn");// 在 支持 的 浏览 器 中 ， 告 诉 它 拖 动 图 标 来 表现 时 间 和 惟 
// 没 有 这 行 代码 ， 浏 览 器 也 可 以 使 用 时 钟 文本 图 像 作为 拖 动 的 值 
if(dt.setDragImage)dt.setDragImage(icon, 0,0); 
}; 
}); 
</script> 
<style> 
#cClock{/* 使 时 钊 


好 看 一 些 */ 


font:bold 24pt sans;background:#ddf;padding:10px; 


border:solid black 2px;border-radius:10px; 


</style> 


<hi> 从 时 钟 中 


出 时 间 惟 < /hi> 


起 


<span id="clock"></span><1-- 时 间 显示 在 这 里 - - > 


<textarea cols=60 rows=20></textarea><1!1-- 把 时 间 惟 放置 在 这 里 - - > 


拖 放 目 标 比 拖 放 源 更 棘手 。 任 何 文档 元 素 都 可 以 是 拖 放 目标 ， 这 不 需 
要 像 拖 放 源 一 样 设置 HTML 属 性 ， 只 需要 简单 地 定义 合适 的 事件 监听 程 
序 。 (但 是 使 用 新 的 HTML5 DnD API， 将 可 以 在 拖 放 目标 上 定义 
dropzone 属 性 来 取代 定义 后 面 介绍 的 一 部 分 事件 处 理 程序 。) 有 4 个 事 
件 在 拖 放 目 标 上 触发 。 当 拖 放 对 象 (dragged object) 进入 文档 元 素 
时 ， 浏 览 器 在 这 个 元 素 上 触发 dragenter 事 件 。 拖 放 目 标 应 该 使 用 
dataTransfer.types 属 性 确定 拖 放 对 象 的 可 用 数据 是 否 是 它 能 理解 的 格 
式 。 (也 可 以 检查 data Transfer.effectAllowed 确 保 拖 放 源 和 拖 放 目标 同 
意 使 用 移动 、 复 制 和 链接 操作 中 的 一 个 。) 如 果 检 查 成 功 ， 拖 放 目 标 
必须 要 让 用 户 和 浏览 器 都 知道 它 对 放置 感 兴趣 。 可 以 通过 改变 它 的 边 
框 或 背景 颜色 来 加 用户 反馈 。 令 人 吃惊 的 是 ， 拖 放 目 标 通 过 取消 事件 
来 告知 浏览 器 它 对 放置 感 兴趣 。 


如 果 元 素 不 取消 浏览 堪 发 送 给 它 的 dragenter 事 件 ， 浏 览 右 将 不 会 把 它 作 
为 这 次 拖 放 的 拖 放 目标 ， 并 不 会 癌 它 再 发 送 任何 事件 。 但 如 有 果 拖 放 目 
标 取 消 了 dragenter 事 件 ， 浏 贤 器 将 发 送 dragover 事 件 表示 用 户 继续 在 目 
标 上 拖 动 对 象 。 再 一 次 令 人 吃惊 的 是 ， 拖 放 目 标 必 须 监听 且 取 消 所 有 
这 些 事情 来 表明 它 继续 对 放置 感 兴趣 。 如 果 拖 放 目 标 想 指定 它 只 允许 
移动 、 复 制 或 链接 操作 ， 它 应 该 使 用 dragover 事 件 处 理 程序 来 设置 


dataTransfrer.dropEffect ° 


如 果 用 户 移 动 拖 放 对 象 离开 通过 取消 事件 表明 有 兴趣 的 拖 放 目标 ， 那 
么 在 拖 放 目 标 上 将 触发 dragleave 事 件 。 这 个 事件 的 处 理 程序 应 该 恢复 
元 素 的 边框 或 背景 颜色 或 取消 任何 其 他 为 啊 应 dragenter 事 件 而 执行 的 可 
视 化 反馈 。 遗 憾 的 是 ，dragenter 和 dragleave 事 件 会 冒 泡 ， 如 果 拖 放 目 标 
内 部 有 崔 套 元 素 ， 想 知道 dragleave 事 件 表示 拖 放 对 象 从 拖 放 目标 离开 
到 目标 外 的 事件 还 是 到 目标 内 的 事件 非常 困难 。 


最 后 ， 如 果 用 户 把 拖 放 对 象 放置 到 拖 放 目 标 上 ， 在 拖 放 目标 上 会 触发 
drop 事 件 。 这 个 事件 的 处 理 程序 应 该 使 用 dataTransfer.getData0 获 取 传 输 
的 数据 并 做 一 些 适 当 的 处 理 。 另 外 ， 如 果 用 户 在 拖 放 目标 放置 一 或 多 
个 文件 ，dataTransfer.files 属 性 将 是 一 个 类 数组 的 File 对 象 。 ( 见 例 18-11 
的 说 明 。) 使 用 新 的 HTML5 API，drop 事 件 处 理 程序 将 能 遍历 
dataTransferitems[] 的 元 素 去 检查 文件 和 非 文件 数据 。 


例 17-5 滨 示 如 何 使 < 由 > 元 聂 成 为 拖 放 目标 ， 同 时 如 何 使 它们 中 的 <1li 
> 元素 成 为 拖 放 源 。 这 个 示例 是 一 段 不 唐 突 的 JavaScript -代码 ， 它 查 
找 class 属 性 包 人 台 "dnd" 的 <u > 元素 ， 在 它 找 到 的 此 类 列表 上 注册 DnD 
事件 处 理 程序 。 这 些 事件 处 理 程 序 使 列表 本 身 成 为 拖 放 目标 ， 在 这 个 
列表 上 放置 的 任何 文本 会 变 成 新 的 列表 项 并 插入 到 列表 尾部 。 这 些 事 
件 处 理 程序 也 监听 列表 项 的 拖 动 ， 使 得 每 个 列表 项 的 文本 可 用 于 传 

输 。 拖 放 源 事件 处 理 程序 允许 “复制 >? 和 “移动 ”操作 ， 并 在 移动 操作 下 放 
置 对 象 时 会 删除 原 有 列表 项 。 〈 但 是 ， 请 注意 并 不 是 所 有 的 浏览 器 都 
文 持 移动 操作 。,) 


例 17-5: 作为 拖 放 目 标 和 拖 放 源 的 列表 


*DnD API 相 当 复杂 ， 且 浏览 器 也 不 完全 兼容 


* 这 个 例子 基本 正确 ， 但 每 个 浏览 器 会 有 一 点 不 同 ， 每 个 似乎 都 有 自身 独 有 的 bug 


* 这 些 代 码 不 会 尝试 浏览 器 特有 的 解决 方案 


*/ 


whenReady (function( ){// 当 文档 准备 就 绪 时 运行 这 个 函数 


// 查 找 所 有 的 <ul class='dnd' > 元 素 ， 并 对 其 调用 dnd( ) 画 数 


var lists=document.getElementsByTagName("ul"); 


var regexp=/\bdnd\b/; 


for(var i=0;i<]ists.length;i++) 


if(regexp.test(lists[i].className))dnd(1lists[i]);// 为 列表 元 素 添加 拖 放 事 件 处 理 程 


function dnd(list){ 


var original_class=list.className;// 保 存 原 始 CSS 类 


var entered=0;// 跟 踪 进 入 和 


次 


入 列表 时 调 


这 个 处 理 程序 


// 当 拖 放 对 象 首次 


// 它 会 检查 拖 放 对 象 包含 的 数据 格式 它 是 否 能 处 理 


// 如 果 能 ， 它 返回 false 来 表示 有 兴趣 放置 
// 在 这 种 情况 下 ， 它 会 高 亮 拖 放 目 标 ， 让 用 户 知道 该 兴趣 


list.ondragenter=function(e){ 


e=e | |window.event;// 标 准 或 TE 事件 


var from=e.relatedTarget;//dragenter 和 dragleave 事 


// 它 使 得 在 像 <ul> 元 素 有 <1i> 子 元 素 的 情况 下 


// 何 时 高 亮 显示 或 取消 高 亮 显示 元 素 变 得 


束 手 


// 在 定义 relatedTarget 的 


// 否 则 ， 我 们 需要 通过 统计 进入 和 离开 的 次 数 


// 如 果 从 列表 外 面 进入 或 第 一 次 进入 ， 


// 那 么 需要 做 一 些 处 理 


entered++' 


if((from&&!ischild(from,1ist))||entered==1){// 所 


; 


浏览 器 中 ， 我 们 能 跟踪 它 


me 


牛 冒 泡 ， 


的 DnD 信 息 都 如 


EdataTransfer 对 象 上 


var dt=e.dataTransfer;//dt.types 对 象 列 上 


可 


的 拖 放 数 和 


居 的 类 型 或 格式 


//HTML5 定 义 这 个 对 象 有 contains( ) 方 法 


// 在 一 些 浏览 器 中 ， 它 是 一 个 有 index0f( ) 方 法 的 数组 


ml 


// 在 IE8 以 及 之 前 版 本 


FPF， 它 根本 不 存在 


var types=dt .types;// 可 用 数据 格式 是 什么 


// 如 果 没 有 任何 类 型 的 数据 或 可 用 数据 是 纯 文本 格式 ， 


// 那 么 高 亮 显示 列表 让 用 户 知道 我 们 正在 监听 拖 放 ， 


// 同 时 返回 false 让 浏览 器 知晓 


if(!types||//IE 


(types.contains&&types.contains("text/plain"))||//HTMLS 


(types.indexof&&types.indexof("text/plain")!=-1))//webkit 


list.className=original class+"droppable",; 


return false; 


// 如 果 我 们 无 法 识别 数据 类 型 ， 我 们 不 希望 拖 放 


Ho 


return;// 没 有 取消 


return false;// 如 果 不 是 第 一 次 进入 ， 我 们 继续 保持 兴趣 


};// 当 鼠标 指针 最 停 在 列表 上 时 ， 会 调用 这 个 处 理 程序 


// 我 们 必须 定义 这 个 处 理 程序 并 返回 false， 否 则 这 个 拖 放 操 作 将 取消 


list.ondragover=function(e){return false;};// 当 拖 放 对 象 移出 列表 或 从 其 子 元 素 中 移出 时 ， 


个 处 理 程序 


// 如 果 我 们 真正 离开 这 个 列 寻 


(不 是 仅仅 从 一 个 列表 项 到 另 一 个 ) ， 


从 让 


// 那 么 取消 高 亮 显示 它 


list.ondragleave=function(e){ 


e=e| |window.event,; 


密 


var to=e.relatedTarget;// 如 果 我 们 要 到 列表 以 外 的 元 素 或 打破 离开 和 进入 次 数 的 于 


// 那 么 取消 高 亮 显示 列 


entered--，; 


if((to&&!ischild(to,1ist))||entered<=0){ 


list.className=original_class; 


entered=0; 


return false; 


};// 当 实际 放置 时 ， 会 调用 这 个 程序 


// 我 们 会 接受 放下 的 文本 


癌 
I 


放 到 一 个 新 的 <1i> 元 素 中 


list.ondrop=function(e){ 


e=e||window,event ;// 获 得 寻 


a 
FF 


// 获 得 放置 的 纯 文本 数据 


//"Text" 是 "text/plain" 的 昵称 ， 


//IE 不 支持 "text/plain"， 所 以 在 这 里 使 用 "Text" 


喜 


var dt=e.dataTransfer;//dataTransfer 对 象 


var text=dt.getData("Text");// 获 取 放 置 的 纯 文本 数据 


// 如 果 得 到 一 些 文本 ， 把 它 放 入 列表 尾部 的 新 项 中 


if(text)t{ 


ER 


var item=document .createElement("1i");// 创 建新 <1i> 


item.draggable=true;// 使 它 可 拖 动 


item.appendchild(document .createTextNode(text));// 添 加 文本 


list.appendchild(item);// 把 它 添加 到 列表 中 


// 恢 复 列 表 的 原始 样式 且 重 置 进入 次 数 


list.className=original_class; 


entered=0; 


return false; 


};// 使 原始 所 有 列表 项 都 可 拖 动 


Var items=list.getElementsByTagName("1i"); 


for(var i=0;i<items.length;i++) 


items[i].draggable=true;// 为 拖 动 列表 项 注册 事件 处 理 程序 


// 注 意 我 们 把 处 理 程序 放 在 列 寺 


A 
EF 


// 让 事件 从 列表 项 向 上 冒 泡 


// 当 在 列表 中 开始 拖 动 对 象 ， 会 调用 这 个 处 理 程序 


list.ondragstart=function(e){ 


Var e=e| |window.event,; 


var target=e.target||e.srcElement;// 如 果 它 不 是 从 <1i> 向 上 冒 泡 ， 那 么 忽略 它 


if(target.tagName!=="LI")return false;// 获 得 最 重要 的 dataTransfer 对 象 


var dt=e.dataTransfer;// 设 置 拖 动 的 数据 和 数据 类 型 


dt.setData("Text", target.innerText||target.textContent );// 设 置 允许 复制 和 移动 这 些 数 扫 


dt.effectAllowed="copyMove"; 


};// 当 成 功 的 放置 后 ， 将 调用 这 个 处 理 程序 


list.ondragend=function(e){ 


e=e| |window.event; 


ll 


var target=e.target||e.srcElement;// 如 果 这 个 拖 放 操 作 是 move， 那 么 要 删除 列表 项 


// 在 IE8 中 ， 它 


二 


将 是 "none"， 除 非 在 之 前 的 ondrop 处 理 程序 中 显 式 设置 它 为 nove 


// 但 为 IE 强 制 设置 "move" 会 阻止 其 他 浏览 器 给 用 户 选 择 复制 还 是 移动 的 机 会 


if(e.dataTransfer.dropEffect==="move") 


target.parentNode.removeChild(target); 


// 这 是 在 ondragenter 和 ondragleave 使 用 的 工具 函数 


// 如 果 a 是 b 的 子 元 素 则 返回 true 


function ischild(a,b){ 


for(;a;a=a.parentNode)if(a===b)return true; 


return false; 


17.8 文本 事件 


浏览 器 有 3 个 传统 的 键盘 输入 事件 。keydown 事 件 和 keyup 事 件 是 低级 事 
件 ， 下 一 廊 会 介绍 。 不 过 ，keypress 事 件 是 较 高 级 的 事件 ， 它 表示 产生 
了 一 个 可 打印 字符 。3 级 DOM 事 件 规 范 草 案 定义 一 个 更 通用 的 textinput 
事件 ， 不 管 来 源 〈 例 如 : 键 型 、 粘 贴 或 拖 放 形 式 的 数据 传输 、 亚 洲 语 
言 输入 法 、 声 音 或 手写 识别 系统 ) ， 无 论 何 时 用 户 输 入 文本 时 都 会 触 
发 它 。 在 写本 草 时 ，textinput 事 件 尚未 得 到 支持 ， 但 Webkit 浏 多 器 文 持 
一 个 非常 类 似 的 "textInput”( 使 用 大 写字 母 1) 事件 。 


建议 中 的 textinput 事 件 和 已 经 实现 的 textInput 事 件 都 传递 一 个 简单 的 事 
件 对 象 ， 它 有 一 个 用 于 保存 输入 文本 的 data 属 性 。 〈 另 一 个 属性 
inputMethod 是 建议 用 于 指定 输入 源 ， 但 它 沿 未 实现 。) 对 于 键盘 输 
入 ，data 属 性 通常 只 保存 单个 字符 ， 但 其 他 输入 源 通 常 可 能 包含 多 个 字 
符 。 


通过 keypress 事 件 传递 的 对 象 更 加 混乱 。 一 个 keypress 事 件 表示 输入 的 
单个 字符 。 事 件 对 象 以 数字 Unicode 编 码 的 形式 指定 字符 ， 所 以 必须 用 
String.fromCharCode() 把 它 转换 成 字符 串 。 在 大 多 数 浏 唤 絮 中 ， 事 件 对 
象 的 keyCode 属 性 指定 了 输入 字符 的 编码 。 但 是 由 于 历史 的 原因 ，， 
Firefox 使 用 的 是 charCode 必 性。 大 多 数 浏览 右 只 在 当 产 生 可 打印 字符 时 
触发 keypress 事 件 。 但 是 Firefox 在 产生 非 打 印字 符 时 也 触发 keypress 事 
件 。 为 了 检测 这 种 情况 (这 样 就 能 忽略 非 打 印字 符 ) ， 可 以 查找 有 
charCode 属 性 但 值 为 0 的 事件 对 象 。 


可 以 通过 取消 textinput、textInput 和 keypress 事 件 来 阻止 字符 输入 ， 这 意 
味 着 可 以 使 用 这 些 事 件 来 过 滤 输 入 。 例 如 ， 你 可 能 想 阻 止 用 户 在 只 接 
受 数字 数据 的 域 中 输入 字母 。 例 17-6 是 一 段 不 唐 突 的 JavaScript 代 码 模 
块 ， 它 恰好 实现 了 这 种 过 滤 。 它 查找 有 额外 属性 〈 非 标准 ) data- 


allowed-chars 的 <input type=text> 元素。 这 个 模块 在 这 类 文本 输入 域 上 
注册 了 textinput、textInput 和 keypress 事 件 的 处 理 程序 来 限制 用 户 只 能 输 
入 出 现在 许可 属性 值 中 的 字符 。 例 17-6 顶 部 注释 的 开头 部 分 包含 使 用 这 
个 模块 的 一 些 HTML 代 码 示 例 。 


例 17-6: 过 滤 用 户 输入 


pA 


*InputFilter .js: 不 唐 突 地 过 滤 <input > 元 素 的 键盘 输入 


* 这 个 模块 查找 文档 中 拥有 "data-allowed-chars" 属 性 的 所 有 < input type="text"> 元 素 


* 它 为 所 有 这 类 元 素 都 注册 keypress、textInput 和 textinput 事 件 处 理 程序 ， 


* 来 限制 用 户 只 能 输入 出 现在 许可 属性 值 中 的 字符 


se 


* 如 果 < input> 元 素 也 有 一 个 "data-messageid" 属 性 ， 


Ti 


* 那 么 认为 这 个 值 是 另 一 个 文档 元 素 的 id 


* 如 户 输入 了 不 允许 的 字符 ， 那 么 会 显示 消息 元 素 


* 如 果 用 户 输入 了 允许 的 字符 ， 那 么 会 隐藏 消息 元 素 


* 这 个 信息 id 元 素 用 于 向 用 户 说 明 拒 绝 输 入 的 原因 


* 它 通常 应 该 由 CSS 控 制 样式 ， 所 以 它 开始 不 可 见 


* 下 面 是 使 用 这 个 模块 的 HTML 代 码 示例 


* 邮 政 编 码 : <input id="zip"type="text" 


*data-allowed-chars="0123456789"data-messageid="zipwarn"> 


*<span id="zipwarn"style="color:red;visibility:hidden"> 只 支持 数字 </span> 


* 这 个 模块 相当 地 不 唐 突 ， 它 没有 定义 全 局 命名 空间 中 的 任何 符 


全 


*/ 


whenReady (function( ) {// 当 文档 加 载 完 毕 时 ， 运 行 这 个 函数 


// 查 找 所 有 <input> 元 素 


var inputelts=document .getElementsByTagName("input");// 遍 历 它们 


for(var i=0;i<inputelts.length;i++){ 


var elt=inputelts[i];// 跳 过 不 是 文本 域 或 没有 data-allowed-chars 属 性 的 元 素 


if(elt,.type!="text"||!elt.getAttribute("data-allowed-chars")) 


hu 


continue;// 在 input 元 素 上 注册 事件 处 理 程序 函数 


T 


// 传 统 的 keypress 事 件 处 理 程序 能 够 在 任 


可 地 方 运行 


//textInput (混合 大 小 写 ) 在 2010 年 后 Safari 和 Chrome 支 持 


//textinput (小 写 ) 是 3 级 DOM 事 件 规范 草案 中 的 版 本 


if(elt.addEventListener){ 


elt.addEventListener("keypress",filter,false); 


elt.addEventListener("textIinput",filter, false); 


elt.addEventListener("textinput",filter, false); 


else{f// 不 支持 addEventListener() 的 IE 也 不 会 支持 textinput 


elt.attachEvent("onkeypress",filter); 


准 
| 


里 程 请 


// 这 是 用 于 过 滤 用 户 输入 的 keypress、textInput 和 textinput 寻 


function filter(event ){// 获 取 习 


Ww 
证 


FF 对象 和 目标 元 素 对 象 


var e=event||window.event ;// 标 准 或 IE 模型 


var target=e.target||e.srcElement;// 标 准 或 TE 模型 


var text=null;// 输 入 的 文本 


// 获 取 输 入 的 字符 或 文本 


if(e.type==="textinput"||e.type==="textInput")text=e. data; 


iT 


else{// 这 是 传统 的 keypress 事 伯 


// 对 于 可 打印 键 的 keypress 事 件 ，Firefox 使 用 charCode 


var code=e.charCcode| |e.keyCode;// 如 果 按 下 的 是 任何 形式 的 功能 键 ， 不 要 过 小 它 


if(code<32||//ASCII 控 制 字 符 


e.charCode==0| |// 功 能 键 ( 仅 指 Firefox) 


e.ctrlKey||e.altkKey)// 按 下 辅助 键 


地 
E 


return;// 不 过 滤 这 个 导 


// 把 字符 编码 转化 为 字符 串 


Var text=String.fromCharCode(code); 


// 现 在 需要 从 input 元 素 中 寻找 所 需 信 息 


var allowed=target .getAttribute("data-allowed-chars");// 合 法 字符 


var messageid=target.getAttribute("data-messageid");// 信 息 元 素 id 


if(messageid)// 如 果 存 在 消息 元 素 ijd， 那 么 获取 这 个 元 素 


var messageElement=document .getELementById(messageid) ;// 遍 历 输入 文本 中 的 字符 


for(var i=0;i<text.length;i++){ 


Var c=text.charAt(i); 


if(allowed.indexof(c)==-1){// 这 是 不 允许 的 字符 吗 ? 


六 人 


// 如 果 存 在 不 合法 字符 ， 显 示 消 息 元 素 


if(messageElement)messageElement.style.visibility="visible";// 取 消 默 认 行为 ， 所 有 不 会 插入 文 
本 


if(e.preventDefault)e.preventDefault(); 


if(e.returnValue)e.returnVvalue=false; 


return false; 


// 如 果 所 有 的 字符 都 合法 ， 隐 藏 存在 的 消息 元 素 


if(messageElement)messageElement.style.visibility="hidden"; 


}); 


keypress 和 textinput 事 件 是 在 新 输入 的 文本 真正 插入 到 珍 焦 的 文档 元 到 
前 触发 ， 这 就 是 这 些 事件 处 理 程序 能 够 取消 事件 和 阻止 文本 插入 的 原 
° 浏 贤 絮 也 实现 了 在 文本 搬入 到 元 于 后 才 触 发 的 input 事 件 类 型 
input。 虽 然 这些 事 件 不 能 取消 ， 不 能 指定 其 事件 对 象 中 的 最 新 文本 ， 
但 它们 能 以 某 种 形式 提供 元 素 文 本 内 容 发 生 改 变 的 通知 。 例 如 ， 如 采 
人 那么 可 以 像 如 下 这 样 使 用 
input 


姓氏 : <input type="text"oninput="this.value=this.value.toUpperCase();"> 


HTML5 标 准 化 了 input 事 件 ， 除 正 外 的 所 有 浏览 器 都 支持 它 。 在 下 中 ， 

可 以 使 用 不 标准 的 propertychange 事 件 检测 文本 输入 元 隶 的 value 属 性 改 

的 效果 。 例 17-7 展 示 可 以 用 一 种 路 平台 的 方式 强制 所 有 输 
写 o 


例 17-7: 使 用 propertychange 事 件 探测 文本 输入 


function forceToUpperCase(element){ 


element .oninput=upcase 


A 2 


element .onpropertychange=upcaseOonPropertyChange;// 简 易 案 例 ， 用 于 input 事 件 的 处 理 程序 


function upcase(event){this.value=this.value.toUpperCcase( );}// 疑 难 案例 : 


propertychange 事 件 的 处 理 程序 


function upcaseOnPropertyChange(event){ 


var e=event | |window.event;// 如 果 value 属 性 发 生 改 变 


if(e.propertyName==="value"){// 移 除 onpropertychange 处 理 程序 ， 避 免 人 循环 调 


this.onpropertychange=nu11;// 把 值 都 变 成 大 写 


this.value=this.value,.toupperCase();// 然 后 恢复 原来 的 propertychange 处 理 程序 


this.onpropertychange=upcaseonPropertyChange 
} 
} 


} 


17.9 键盘 事件 


当 用 户 在 键盘 上 按 下 或 释放 按键 时 ， 会 发 生 keydown 和 keyup 事 件 。 它 
们 由 辅助 键 、 功 能 键 和 字母 数字 键 产生 中 如 果 用 户 按键 时 间 足 够 长 会 
， 那 么 在 keyup 事 件 到 达 之 前 会 收 到 多 个 keydown 事 


这 些 事件 相关 的 事件 对 象 都 有 数字 属性 keyCode， 指 定 了 按 下 的 键 是 哪 
个 。 对 于 产生 可 打印 字符 的 按键 ，keyCode 值 是 按键 上 出 现 的 主要 字符 
的 Unicode 编 码 。 无 论 Shift 键 处 于 什么 状态 ， 字 母 键 总 是 产生 大 写 
keyCode 值 ， 这 有 是 因为 它们 出 现在 物理 键 副 上 。 类 似 地 ， 即 使 为 了 输入 
标点 字符 而 按 下 了 Shift 键 ， 但 数字 键 产 生 的 keyCode 值 区 是 出 现在 对 应 
键 上 的 数字 。 对 于 不 可 打印 键 ，keyCode 属 性 将 是 一 些 其 他 值 。 
keyCode 值 尚未 标准 化 ， 但 适当 的 跨 浏览 紫 兼 容 性 是 可 行 的 。 例 17-8 包 
人 一 个 从 keyCode 值 到 功能 键 名 字 的 映射 。 


类 似 鼠 标 事 件 对 象 ， 键 盘 事 件 对 象 有 altKey、ctrIKey、metakey 和 
shiftKey 属 性 ， 当 事件 发 生 时 ， 如 有 果 对 应 的 辅助 键 被 按 下 ， 那 么 它们 会 
被 设置 为 true。 


keydown 和 keyup 事 件 及 keyCode 属 性 已 经 使 用 了 十 多 年 ， 但 从 未 标准 
化 。3 级 DOM 事 件 规范 草案 标准 化 了 keydown 和 keyup 事 件 类 型 ， 但 没 
有 党 试 标准 化 keyCode。 相 反 ， 它 定义 了 新 属性 key， 它 会 以 字符 串 的 
形式 包含 键 名 。 如 有 果 按 键 对 应 的 是 一 个 可 打印 字符 ， 那 么 key 属 性 将 仅 
仅 是 这 个 可 打印 字符 。 如 有 果 按 键 是 功能 键 ， 那 么 key 属 性 将 是 

像 "F2"、"Home" 或 "Left" 这 样 的 值 。 


在 写本 章 时 ，3 级 DOM 事 件 的 key 属 性 尚未 在 任何 浏览 右 中 实现 。 但 
是 ， 像 Safari 和 Chrome 这 类 基于 Webkit 的 浏览 器 为 这 些 事件 的 事件 对 象 
定义 了 一 个 keyIdentifier 属 性 。 类 似 key，keyldentifier 是 字符 串 而 非 数 
字 ， 并 且 对 于 功能 键 ， 它 是 像 "Shift"、"Enter" 这 样 有 用 的 值 。 对 于 可 打 
印字 符 ， 该 属性 保存 了 这 个 字符 的 Unicode 编 码 的 字符 串 表 示 形 式 ， 其 
用 处 要 小 一 些 。 例 如 ， 对 于 A 键 ， 它 是 "U+0041"。 


例 17-8 定 义 了 一 个 Keymap 类 ， 把 

像 "PageUp"、"Alt_Z" 和 "ctrl+alt+shift+F5" 这 些 按键 标识 符 映 射 到 
JavaScript 函 数 ， 这 些 函 数 会 作为 按键 的 响应 而 调用 。 以 JavaScript 对 象 
的 形式 把 按键 的 绑 定 传 给 Keymap0O 构 造 函 数 ， 在 对 象 中 属性 名 是 按键 
标识 符 ， 而 属性 值 是 处 理 程序 函数 。 使 用 bind0 和 unbind() 方 法 添加 和 
移 除 绑 定 。 使 用 install0) 方 法 在 HTML 元 素 (通常 是 Document 对 象 ) 上 
配置 Keymap“。 通 过 在 元 素 上 注册 keydown 事 件 处 理 程序 配置 Keymap 。 
每 次 键 被 按 下 ， 处 理 程序 检查 是 否 有 与 按键 相关 的 函数 。 如 果 有 ， 就 
调用 它 。 在 keydown 事 件 处 理 程序 中 如 果 能 定义 3 级 DOM 事 件 的 key 属 
性 束 会 优先 使 用 它 。 如 果 没 有 ， 它 会 查找 Webkit 的 KkeyIdentifier 属 性 然 
后 使 用 它 。 和 否则 ， 它 退回 使 用 不 标准 的 keyCode 属 性 。 例 17-8 开 头 有 段 
很 长 的 注释 来 解释 这 个 模块 的 更 多 详细 信息 。 


例 17-8: 键盘 快捷 键 时 Keymap 类 


DA 


*Keymap .js: 绑 定 键盘 事件 和 处 理 程序 函数 


* 这 个 模块 定义 一 个 Keymap 类 


* 这 个 类 的 实例 表示 按键 标识 符 (下 面 有 定义 ) 到 处 理 程序 函数 的 映射 


*Keymap 能 配置 到 HTML 元 素 上 以 处 理 keydown 事 件 


* 当 此 类 事件 发 生 时 ，Keymap 会 使 用 它 的 映射 来 调用 合适 的 处 理 程序 


x 当 个 


i 


建 Keymap 了 时， 


* 能 传 入 一 个 JavaScript 对 象 ， 它 


长 示 Keymap 绑 定 的 初始 设 


* 对 象 的 属性 名 是 按键 标识 符 ， 而 属性 值 是 处 理 程序 函数 


* 在 外 


建 Keymap 之 后 ， 


* 通 过 给 bind ( ) 方 法 传 入 按键 标识 符 和 处 理 程序 画 数 可 以 添加 一 个 新 绑 定 


* 能 给 unbind( ) 方 法 传 入 按键 标识 符 来 移 除 绑 定 


过 给 Keymap 的 jnstall( ) 方 法 传 入 像 document 对 象 这 样 的 HTML 元 素 ， 然 后 就 可 以 使 用 


屿 


*install( ) 方 法 给 指定 的 对 象 添加 onkeydown 事 件 处 理 程序 


* 当 调用 这 个 处 理 程序 时 ， 


* 它 判断 按 下 键 的 按键 标识 符 ， 


* 如 果 有 这 个 按键 标识 符 的 任何 绑 定 ， 就 调用 对 应 的 处 理 程序 函数 


ET 


* 一 个 Keymap 可 以 在 多 个 HTML 元 素 上 配 


* 按 键 标识 符 


* 按 键 标识 符 是 一 个 区 分 大 小 写 的 字符 串 ， 


* 它 表示 按键 加 上 同一 时 刻 按 下 的 辅助 键 


* 按 键 的 名 字 通 常 是 按键 上 的 字符 不 会 变 ) 


* 法 定 的 键 名 包括 "A" 二 7 短 uF2" "PageUp" ~ Left" i "Backspace" 和 "Esc" 


请 参阅 模 菇 


的 Keymap .keyCodeToKeyName 对 象 中 


P 的 键 名 列表 
有 有 3 级 DOM 规 范 定 义 的 键 名 于 


当 实 现时 这 个 类 


事件 对 象 的 key 属 ! 


* 按 键 标识 符 也 可 能 


含 辅助 键 前 绥 


* 这 些 前 


前 缀 是 ALt、Ctr1L、Meta 和 Shift 


* 它 们 区 分 大 小 写 ， 


必须 使 


习 


* 


tMac 中 ， 


和 按键 名 或 彼此 分 
* 例 如 : "SHIFT+A"、"Alt_F2"、"meta-v" 和 "ctrl alt left" 


Meta 是 Commnad 键 ，Alt 是 0ption 键 
* 一 些 浏览 器 把 Windows 键 映射 到 Meta 辅 助 键 


* 处 理 程序 函数 


Keymap 的 文档 或 文档 元 素 上 作为 


其 方法 调 


* 工 ) Keydown 寻 


件 的 引 


件 对 象 


*2 ) 按 站 


下 的 按键 的 


标识 符 


* 多 型 


程序 的 返 下 


值 就 是 keydown 处 理 程序 的 返 匠 


* 如 果 处 


值 
里 程序 卫 关 


数 返 臣 


false, 


*Keymap 将 停止 冒 泡 并 取消 和 keydown 事 件 相关 的 默认 操作 


* 限制 


* 在 所 有 按键 上 绑 定 一 个 事件 处 理 函 数 是 不 可 能 的 


* 操 作 系 统 会 限制 一 些 按键 序列 (例如 ，Alt+F4) 


* 而 浏览 器 本 身 也 可 能 限制 其 他 一 些 按键 序列 (比如 : Ctr1l+S) 


* 这 些 代码 受 限 于 浏览 器 、0S 和 本 地 设置 。 功 能 键 和 有 辅助 键 的 功能 键 工 作 得 很 好 ， 


* 而 没有 辅助 键 的 字母 数字 键 也 工作 得 很 好 


*Ctr1 和 Alt 与 字母 键盘 键 的 结合 非常 强健 


* 在 美国 标准 键盘 布局 上 ， 


* 能 够 支持 大 多 数 不 需 要 Shift 刍 的 标点 字符 (=[] ; '…，, 八 但 不 包括 连 字 符 ) 


* 但 是 它们 不 特别 适合 其 他 链表 布局 ， 应 该 避免 


Wh 


// 这 是 构造 画 数 


function Keymap(bindings){ 


this.map={};// 定 义 按键 标识 符 - > 处 理 程序 映射 


if(bindings){// 给 它 复制 初始 绑 定 


for(name in bindings)this,.bind(name,bindings[name]); 


// 绑 定 指定 的 按键 标识 符 和 指定 的 处 理 程序 函数 


Keymap ,prototype,bind=function(key,func){ 


this.map[Keymap.normalize(key)]=func; 


个 


】}; 7// 删 除 指定 按键 标识 符 的 绑 


Keymap ,prototype,unbind=function(key){ 


delete this.map[Keymap.normalize(key)]; 


};// 在 指定 HTML 元 素 上 配置 keymap 


Keymap .prototype.install=function(element ){// 这 是 事件 处 理 程 


Var keymap=this,; 


if(element.addEventListener) 


element.addEventListener("keydown",handler, false); 


else if(element.attachEvent) 


element.attachEvent("onkeydown",handler); 


};// 这 个 方法 基于 Keymap 绑 定 分 派 按键 事件 


Keymap .prototype.dispatch=function(event,element){// 


Var modifiers="" 


ny 


var keyname=null;// 按 照 标准 的 小 写字 母 顺序 构建 辅助 键 字 符 


始 没有 


zh 


甫 助 键 和 键 名 


if(event.altkKey)modifiers+="alt_"; 
if(event.ctrlkKey)modifiers+="ctrl_"; 
if(event.metakey)modifiers+="meta _"; 


if(event.shiftkey)modifiers+="shift_";// 如 遇 


A 
实 


现 3 级 DOM 规 范 的 key 属 性 ， 获 取 keyname 很 容易 
if(event .key)keyname=event .key;// 在 Safari 和 Chrome 上 用 keyIdentifier 获 取 功 能 键 键 名 
else if(event.keyIdentifier&&event.keyIdentifier.substring(0,2)!=="U+") 
keyname=event .keyIdentifier;// 否 则 ， 使 


keyCode 属 性 和 后 本 


而 
上 


游 


码 到 键 名 的 映射 


else keyname=Keymap.keyCodeToKeyName[event.keyCode];// 如 果 不 能 找 H 
件 


bt 键 名 ， 只 能 返 


可 并 忽略 这 个 
if(!1keyname)return;// 标 准 的 按键 id 是 加 


助 键 加 上 小 写 的 键 名 


var keyid=modifiers+keyname.toLowerCcase();// 现 在 查看 按键 标 


识 符 是 否 绑 定 了 任何 东西 
var handler=this.map[keyid]; 

if(handler ){// 如 果 这 个 键 有 处 理 程序 ， 调 用 它 

// 调 用 处 理 程序 函数 

var retval=handler,.call(element,event,keyid);// 如 果 处 理 程序 返 蕊 
if(retval=== 


false， 取 消 默认 操作 
false){ 


阻止 冒 泡 


if(event.stopPropagation)event.stopPropagation();//DOM 模 型 


else event.cancelBubble=true;//IE 模 型 


if(event.preventDefault)event.preventDefault();//DOM 


else event.returnVvalue=false;//IE 


山中 


Hf 


// 返 回 处 理 程序 的 返回 值 


return retVval 


};// 用 于 把 按键 标识 符 转 换 成 标准 形式 的 工具 函数 


// 在 非 Mac 人 硬件， 我 们 这 晤 


把 "meta" 了 映射 到 "ctr1l",， 


[ue 


// 这 样 在 Mac 中 "Meta+C" 将 变 成 "Command+C"， 其 他 都 是 "Ctrl1+Cn 


Keymap ,normalize=function(keyid){ 


keyid=keyid.toLowerCase( );// 一 切 都 小 写 


var words=keyid.split(/\s+|[\-+_]/);// 分 割 辅助 键 和 键 名 


var keyname=words.pop();// 键 名 是 最 后 一 个 


keyname=Keymap .aliases[keyname]||keyname;// 它 是 别名 吗 ? 


words .sort();// 排 序 剩 下 的 辅助 链 


words .push(keyname );// 添 加 到 序列 化 名 字 后 鱼 


return words.join("_");// 把 它们 拼接 起 来 


}; 


Keymap .aliases={// 把 按键 的 常见 别名 映射 到 它们 的 "正式 名 " 


"escape" :"esc", // 键 名 使 用 3 级 DOM 规 范 的 定义 和 后 面 的 编码 到 键 名 的 映射 


"delete" :"del",// 所 有 的 键 和 值 都 必须 


Ws 


\ 写 


"return":"enter", 


"ctrl":"control", 


"space":"spacebar", 


"ins":"insert" 


TI 
于 


};// 传 统 的 keydown 事 件 对 象 的 keyCode 属 性 是 不 标准 


// 但 下 面 的 值 似乎 可 以 在 大 多 数 浏览 器 和 0S 中 可 行 


Keymap .keyCodeToKeyName={// 使 用 词 或 方向 键 的 按键 


8:"Backspace",9:"Tab",13:"Enter",16:"Shift",17:"Control",18:"Alt", 


19:"Pause",20:"CapsLock",27:"Esc",32:"Spacebar",33:"PageUp", 


34:"PageDown",35:"End",36:"Home",37:"Left",38:"Up",39:"Right", 


40:"Down", 45:"Insert", 46:"Del", // 主 键盘 (〈 非 数字 小 键盘 ) 上 的 数字 键 


48:"0", 49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7", 56:"8", 57:"9", // 字 母 按键 ， 注 意 我 
们 不 区 分 大 小 写 


65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"6",72:"H", 73:"1", 


74: Sy 75 WK 76: es 77:"M", 78: "'N", 79:"0",80: "Pp",81: "Q", 82: VR 


83:"S",84:"T", 85:"U",86:"V", 87:"W", 88:"X", 89:"Y",90:"Z",// 数 字 小 键盘 的 数字 和 标点 符号 按键 
(Opera 不 支持 这 些 ) 


96:"0",97:"1",98:"2",99:"3", 100:"4", 101:"5", 102:"6", 103:"7", 194:"8" 105:"9", 


106:"Multiply",107:"Add", 109:"Subtract",110:"Decimal",111:"Divide", // 功 能 键 


112:"F1", 113:"F2",114:"F3", 115:"F4", 116:"F5",117:"F6", 


118:"F7", 119:"F8",120:"F9", 121:"F10", 122:"F11", 123:"F12", 


124:"F13",125:"F14", 126: "F15",127:"F16",128:"F17",129:"F18", 


130:"F19", 131:"F20", 132:"F21", 133:"F22",134:"F23", 135:"F24",// 不 需要 按 下 Shift 键 的 标点 符号 
键 


// 连 字符 不 兼容 ，FF 返 回 的 编码 和 减 号 一 样 


59:;";",61:"=",186:";",187:"=", //Firefox 和 0pera 返 回 59, 61 


188:",",190:".",191:"/",192:"",219:"[",220:"\\", 221:"]",222:""" 


[包括 HIML5 规 范 在 内 的 一 些 资料 基于 它们 注册 的 方式 从 技术 上 区 分 
(handler) 和 监听 程序 (listener) ， 但 本 书 视 这 两 个 技术 术 
语 为 同义词 。 


[2] 标准 为 不 同 的 事件 类 型 定义 了 事件 对 象 接 口 的 等 级 层次 。 例 如 ， 
Event 接 口 定 义 了 无 额外 详细 信息 的 基础 事件 ，MouseEvent 了 于 接口 定义 
了 在 传递 鼠标 事件 的 事件 对 象 中 有 用 的 附加 字段 ， 而 KeyEvent 子 接口 
定义 了 可 用 于 键盘 事件 的 字段 。 在 本 书 中 ， 第 四 部 分 把 所 有 的 第 用 事 
件 接口 都 并 入 到 Event 参 考 页 。 


[3] 在 名 字 中 使 用 "DOM" 的 唯一 常用 事件 就 是 DOMContentLoaded。 这 
个 事件 由 Mozilla 引 入 ,但 绝 不 属于 DOM 事 件 标 准 的 一 部 分 。 


[4] 2 级 DOM 事 件 规范 并 未 定义 调用 顺序 ， 但 当前 的 浏览 器 都 是 按照 注 
册 顺 序 调用 所 有 事件 处 理 程 序 ， 并 且 3 级 DOM 事 件 规范 草案 标准 化 了 这 
种 行为 。 

[5] 第 19 章 介绍 的 jQuery 事件 对 象 有 一 个 defaultPrevented(0) 方 法 而 非 属 
性 。 


[6] 这 里 的 * 单 击 ” 指 的 是 滚动 深 轮 的 最 小 单位 ， 所 以 我 们 得 到 的 
0 正 负 值 表示 滚轮 的 两 个 方向 ， 其 最 小 
丝 为 120。 


[7] 这 是 有 风险 的 ， 如 果 未 来 的 实现 不 匹配 当前 使 用 的 规范 草案 ， 那么 
这 将 适得其反 ， 示 例 将 无 法 运行 。 


[81] 更 文 为 Unobtrusive Javascript， 在 网 页 中 编写 JavaScript 的 一 种 通用 方 
法 。 详 细 内 容 请 看 http:Wen.wikipedia.org/wikiUnobtrusive_JavaScript 。 


[9] 辅助 键 (modifier key) 一 般 是 指 Shift 键 、Ctrl (control) 键 、Alt 
键 、AltGr (Alternate Graphic) 键 、Super 键 Window 键盘 上 指 Window 
键 ，Mac 0S 键 盘 指 的 是 Command 键 ，Sun 键 一 指 的 是 Meta 键 ) 和 Fn 键 
( Function ， 常 见于 笔记 本 键盘 ) ， 更 多 细 市 请 看 
http:/Wen.wikipedia.org/wikiComputer_keyboard。 功 能 键 (function key) 
一 般 是 指 类 似 F1、F2 这 些 以 F 加 数字 组 成 的 键 ， 更 多 细 市 请 看 
http://en.wikipedia.org/wiki/Function Keys。 


第 18 章 ”脚本 化 HITP 


超 文本 传输 协议 (HyperText Transfer Protocol，HTTP) 规定 Web 浏 览 句 
如 何 从 web 服务 右 获 取 文 档 和 癌 Web 服 务 右 提交 表单 内 容 ， 以 及 Web 服 
务 妖 如何 响 应 这 些 请 求 和 提交 。Web 浏 唤 絮 会 处 理 大量 HTTP。 通 常 ， 
HTTP 并 不 在 脚本 的 控制 下 ， 只 是 当 用 户 单 击 链接 、 提 交 表 单 和 输入 
URL 时 才 发 生 。 


但 是 ， 用 JavaScript 代 码 操 纵 HTTP 是 可 行 的 。 当 用 脚本 设置 window 对 
和 象 的 location 属 性 或 调用 表单 对 象 的 submit() 方 法 时 ， 都 会 初始 化 HTTP 
请 求 。 在 这 两 种 情况 下 ， 浏 览 器 会 加 载 新 页 面 。 这 种 用 脚本 控制 HTTP 
的 方法 在 多 框架 页 面 中 非常 有 用 ， 但 这 并 非 我 们 在 此 讨论 的 主题 。 相 
反 ， 本 章 会 说 明 在 没有 导致 Web 浏 览 器 重新 加 载 任何 窗口 或 窗 体 的 内 容 
情况 下 ， 脚 本 如 何 实现 Web 浏 览 絮 与 服务 器 之 间 的 通信 。 


术语 Ajax 描述 了 一 种 主要 使 用 脚本 操纵 HITP 的 Web 应 用 架构 [1-。Ajax 
应 用 的 主要 特点 是 使 用 脚本 操纵 HITP 和 Web 服 务 器 进行 数据 交换 ， 不 
会 导致 页 面 重 载 。 避 免 页 面 重 载 (这 是 Web 初 期 的 标准 做 法 ) 的 能 力 使 
Web 应 用 感觉 更 像 传 统 的 桌面 应 用 。Web 应 用 可 以 使 用 Ajax 技术 把 用 户 
的 交互 数据 记录 到 服务 器 中 ;也 可 以 开始 只 显示 简单 页 面 ， 之 后 按 需 
加 载 额 外 的 数据 和 页 面 组 件 来 提升 应 用 的 局 动 时 间 。 


Comet 是 和 使 用 脚本 操纵 HTTP 的 Web 应 用 架构 相关 的 术语 上 。 在 某 种 
意义 上 ，Comet 和 Ajax 相反 。 在 Comet 中 ，Web 服 务 器 发 起 通信 并 异步 
发 送 消 息 到 客户 端 。 如 果 Web 应 用 需要 响应 服务 端 发 送 的 消息 ， 则 它 会 
使 用 Ajax 技术 发 送 或 请 求 数据 。 在 Ajax 中 ， 客 户 端 从 服务 端 “ 拉 ” 数 据 ， 
而 在 Comet 中 ， 服 务 端 向 客户 端 “ 推 "数据 。Comet 还 包括 其 他 名 词 

(如 “服务 器 推 >、“Ajax 推 > 和 “HTTP 流 ”) 。 


实现 Ajax 和 Comet 的 方式 有 很 多 种 ， 而 这 些 底层 的 实现 有 时 称 为 传输 协 
议 (transport) 。 例 如 ，<img> 元素 有 一 个 src 属 性 。 当 脚本 设置 这 个 
属性 为 URL 时 ， 浏 览 器 发 起 的 HTTP GET 请 求 会 从 这 个 URL 下 载 图 片 。 
因此 ， 脚 本 通过 设置 <img > 元 素 的 src 属 性 ， 且 把 信息 作为 图 片 URL 的 
查询 字符 串 部 分 ， 束 把 能 经 过 编码 信息 传递 给 Web 服务 器 。Web 服 务 器 
实际 上 必须 返回 某 个 图 片 来 作为 请 求 结果 ， 但 它 一 定 要 不 可 见 : 例 
如 ， 一 个 1x1 像 素 的 透明 图 片 3。 


<img> 元 素 无 法 实现 完整 的 Ajax 传输 协议 ， 因 为 数据 交换 是 单 向 的 : 
客户 端 能 发 送 数据 到 服务 器 ， 但 服务 器 的 响应 一 直 是 张 独 片 导 致 客户 
端 无 法 轻易 从 中 提取 信息 。 然 而 ，<iframe> 元素 更 加 强大 ， 为 了 把 < 
iframe> 作为 Ajax 传输 协议 使 用 ， 脚 本 首先 要 把 发 送 给 web 服务 右 的 信 
息 编码 到 URL 中 ， 然 后 设置 <iframe>> 的 src 属 性 为 该 URL。 服 务 器 能 创 
建 一 个 包含 啊 应 内 容 的 HTML 文 档 ， 并 把 它 返 回 给 Web 浏 览 器 ， 并 日 在 
<iframe> 中 显示 它 。<iframe> 需要 对 用 户 不 可 见 ， 例 如 可 以 使 用 
CSS 隐 藏 它 。 脚 本 能 通过 遍历 <iframe> 的 文档 对 象 来 读 取 服 务 端的 响 
应 。 注 意 ， 这 种 访问 受 限 于 13.6.2 节 介绍 的 同 源 策 略 问题 。 


实际 上 ，<script> 元 素 的 src 属 性 能 设置 URL 并 发 起 HTTP GET 请 求 。 
使 用 < script> 元 素 实现 脚本 操纵 HITP 是 非常 吸引 人 的 ， 因 为 它们 可 以 
跨 域 通信 而 不 受 限 于 同 源 策 上 略 。 通 常 ， 使 用 基于 < script> 的 Ajax 传输 
协议 时 ， 服 务 器 的 响应 采用 JSON 编 码 ( 见 6.9 闻 ) 的 数据 格式 ， 当 执行 
脚本 时 ，JavaScript 解 析 器 能 目 动 将 其 “解码 *”。 由 于 它 使 用 JSON 数 据 格 
式 ， 因 此 这 种 Ajax 传 输 协议 也 叫做 "JSONP"。 


虽然 在 <iframe> 和 <script> 传输 协议 之 上 能 实现 Ajax 技术 ， 但 通常 还 
有 更 人 简单 的 方式 。 一 段 时 间 以 来 ， 所 有 浏览 絮 都 支持 XMLHttpRequest 
对 象 ， 它 定义 了 用 脚本 操纵 HTTP 的 API。 除 了 常用 的 GET 请 求 ， 这 个 
API 还 包含 实现 POST 请 求 的 能 力 ， 同 时 它 能 用 文本 或 Document 对 象 的 
形式 返回 服务 器 的 啊 应 。 虽 然 它 名 字 叫 XMLHttpRequest API， 但 并 未 
没有 限定 只 能 使 用 XML 文档 ， 它 能 获取 任何 类 型 的 文本 文档 。18.1 闻 
涵盖 XMLHttpRequest API 和 本 章 的 大 部 分 。 本 章 的 大 部 分 Ajax 示例 都 
将 使 用 XMLHttpRequest 对 象 来 实现 协议 方案 ， 我 们 也 将 在 18.2 市 演示 
0 基于 <script> 的 传输 协议 ， 因 为 <script> 元素 有 规避 同 源 限 
j 的 能 力 。 


XML 是 可 选 的 


"Ajax" 中 的 X 表 示 XML ， 这 个 HTTP (XMLHttpRequest) 的 主要 客户 端 
API 在 其 名 字 中 突出 了 XML， 并 且 后 面 我 们 将 看 到 XMLHttpRequest 对 
象 的 其 中 一 个 属性 叫 responseXML 。 它 看 起 来 像 说 明 XML 是 用 脚本 操 
纵 HITP 的 重要 部 分 ， 但 实际 上 它 不 是 ， 这 些 名 字 只 是 XML 流行 时 的 遗 
迹 。 当 然 ，Ajax 技 术 能 和 XML 文档 一 起 工作 ， 但 使 用 XML 只 是 一 种 选 
择 ， 实 际 上 很 少 使 用 。XMLHttpRequest 规 范 列 出 了 这 个 令 人 困惑 名 字 
的 不 足 之 处 : 


对 象 名 XMLHttpRequest 是 为 了 兼容 Web ， 虽 然 这 个 名 字 的 每 个 部 分 都 
可 能 造成 误导 。 首 先 ， 这 个 对 象 文 持 包括 XML 在 内 的 任何 基于 文本 的 
格式 。 其 次 ， 它 能 用 于 HTTP 和 HTTPS 请 求 (一 些 实现 支持 除了 HTTP 
和 HTTPS 之 外 的 协议 ， 但 规范 不 包括 这 些 功 能 ) 。 最 后 ， 它 所 支持 的 
请 求 是 一 个 广义 概念 ， 指 的 是 对 于 定义 的 HTTP 方 法 的 涉及 HTTP 请 求 
或 响应 的 所 有 活动 。 


Comet 传 输 协 议 比 Ajax 更 精妙 ， 但 都 需要 客户 端 和 服务 器 之 间 建 立 ( 必 
要 时 重新 建立 ) 连接 ， 同 时 需要 服务 器 保持 连接 处 于 打开 状态 ， 这 样 
它 才 能 够 发 送 异 步 信 息 。 隐 藏 的 <iframe> 能 像 Comet 传 输 协 议 一 样 有 
用 ， 例 如 ， 如 果 服 务 絮 以 <iframe> 中 竺 执行 的 <script> 元 素 的 形式 发 
送 每 条 消 轧 。 实 现 Comet 的 一 种 更 可 靠 跨 平 台 方 案 是 客户 端 建立 一 个 和 
服务 器 的 连接 〈 使 用 Ajax 传输 协议 ) ， 同 时 服务 器 保持 这 个 连接 打开 
直到 它 需要 推送 一 条 消息 。 服 务 器 每 发 送 一 条 消息 就 关闭 这 个 连接 ， 
这 样 可 以 确保 客户 端正 确 接 收 到 消息 。 处 理 该 消 轧 之 后 ， 客 户 端 马上 
为 后 续 的 消息 推送 建立 一 个 新 连接 。 


实现 可 靠 的 跨 平 台 Comet 传 输 协议 是 非常 有 挑战 性 的 ， 所 以 大 部 分 使 用 
Comet 染 构 的 Web 应 用 开发 者 依赖 于 像 Dojo 这 样 的 Web 框 染 库 中 的 传输 
协议 。 在 写本 章 时 ， 浏 览 器 正 开 始 实 现 HTML5 相 关 草 案 中 的 Server- 
Sent 事 件 ， 它 用 EventSource 对 和 象 的 形式 定义 了 人 简单 的 Comet API。18.3 
也 锌 盖 EventSource API 且 演示 了 一 个 使 用 XMLHttpRequest 实 现 的 倘 单 
模拟 示例 。 


在 Ajax 和 Comet 之 上 构建 更 高 级 的 通信 协议 是 可 行 的 。 例 如 ， 这 些 客户 
并/ 服务 器 技术 可 以 用 做 RPC (Remote Procedure Call， 远 程 过 程 调 用 ) 
机 制 或 发 布 /订阅 事件 系统 的 基础 。 


但 是 ， 本 章 不 会 介绍 像 上 面 这 样 更 高 级 的 协议 ， 我 们 重点 在 能 使 Ajax 
和 Comet 可 用 的 API 上 。 


18.1 使 用 XMLHttpRequest 


浏览 硕 在 XMLHttpRequest 类 上 定义 了 它们 的 HITP API。 这 个 类 的 每 个 
实例 都 表示 一 个 独立 的 请 求 /响应 对 ， 并 且 这 个 对 象 的 属性 和 方法 允许 
指定 请 求 细 节 和 提取 响应 数据 。 很 多 年 前 Web 浏 哆 器 束 开 始 文 持 
XMLHttpRequest， 并 且 其 API 已 经 到 了 WwW3C 制 订 标 准 的 最 后 阶段 。 同 
时 ，W3cC 正 在 制订 “2 级 XMLHttpRequest" 标 准 草案 。 本 节 涵 盖 


XMLHttpRequest 核 心 API， 也 包括 当前 至 少 被 两 球 浏览 如 支持 的 部 分 2 
级 XMLHttpRequest 标 准 草 案 (我 们 将 其 称 为 XHR2) 。 


当然 ， 使 用 这 个 HTTP API 必 须 做 的 第 一 件 事 束 是 实例 化 
XMLHttpRequest 对 和 象 : 


Var request=new XMLHttpRequest(); 
你 也 能 重用 已 存在 的 XMLHttpRequest， 但 注意 这 将 会 终止 之 前 通过 该 
对 象 挂 起 的 任何 请 求 。 

IE6 中 的 XMLHttpRequest 
Miicrosoft 最 早 把 XMLHttpRequest 对 象 引 入 到 了 E5 中 ， 且 在 IE5 和 IE6 中 它 


只 是 一 个 ActiveX 对 象 。IE7 之 前 的 版 本 不 支持 韭 标 准 的 
XMLHttpRequest() 构 造 画 数 ， 但 它 能 像 如 下 这 样 模拟 : 


// 在 IE5 和 IE6 中 模拟 XMLHttpRequest( ) 构 造 丽 数 


if(window.XMLHttpRequest===undefined)t{ 


window.XMLHttpRequest=function(){ 


try{// 如 果 可 用 ， 则 使 用 ActiveX 对 象 的 最 新 版 本 


return new ActiveXOobject("Msxml2.XMLHTTP.6.0"); 


} 


catch(e1)t{ 


try{// 否 则 ， 回 退 到 较 旧 的 版 本 


return new ActiveXOobject("Msxm]l2.XMLHTTP.3.0"); 
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catch(e2){// 否 则 ， 抛 错 

throw new Error("XMLHttpRequest is not supported"); 
} 

} 

}; 


} 


一 个 HTTP 请 求 由 4 部 分 组 成 : 


:HTTP 请 求 方 法 或 “动作 ” (verb) 


:正在 请 求 的 URL 
一 个 可 选 的 请 求 头 集合 ， 其 中 可 能 包括 身份 验证 信息 
一 个 可 选 的 请 求 主体 


服务 器 返回 的 HTTP 响 应 包含 3 部 分 ， 
一 个 数字 和 文字 组 成 的 状态 码 ， 用 来 显示 请 求 的 成 功 和 失败 
一 个 响应 头 集合 

-响应 主体 


接 下 来 的 前 面 两 三 会 展示 如 何 设置 HTITP 请 求 的 每 个 部 分 和 如 何 查 询 
HTTP 啊 应 的 每 个 部 分 ， 随 后 的 核心 章节 会 渔 盖 更 多 的 专门 议题 。 


HTTP 的 基础 请 求 / 响 应 架构 非常 简单 并 且 易 于 使 用 。 但 在 实践 中 会 有 各 
种 各 样 随 之 而 来 的 复杂 问题 : 客户 端 和 服务 器 交换 cookie， 服 务 器 重 定 
向 浏览 器 到 其 他 服务 器 ， 缓 存 革 些 资源 而 剩 下 的 不 缓存 ， 革 些 客 户 端 
通过 代理 服务 器 发 送 所 有 的 请 求 等 。XMLHttpRequest 不 是 协议 级 的 
HTTP API 而 是 浏览 器 级 的 API。 浏览 器 需 要 考虑 cookie、 重 定 问 、 绥 存 
和 代理 ， 但 代码 只 需要 担心 请 求 和 响应 。 


XMLHttpRequest 和 本 地 文件 


网 页 中 可 以 使 用 相对 URL 的 能 力 通 常 意味 着 我 们 能 使 用 本 地 文件 系统 
来 开发 和 测试 HTML， 并 避免 对 Web 服 务 器 进行 不 必要 的 部 署 。 然 后 当 
使 用 XMLHttpRequest 进 行 Ajax 编 程 时 ， 这 通常 是 不 可 行 的 。 
XMLHttpRequest 用 于 同 HTTP 和 HTTPS 协 议 一 起 工作 。 理 论 上 ， 它 能 够 
同 像 FTP 这 样 的 其 他 协议 一 起 工作 ， 但 比如 像 请 求 方法 和 响应 状态 码 等 
部 分 API 是 HTTP 特 有 的 。 如 果 从 本 地 文件 中 加 载 网 页 ， 那 么 该 页 面 中 
的 脚本 将 无 法 通过 相对 URL 使 用 XMLHttpRequest， 因 为 这 些 URL 将 相 
对 于 file:VURL 而 不 是 http:VXURL。 而 同 源 策略 通常 会 阻止 使 用 绝对 
http://URL (请 参见 18.1.6 节 ) 。 结 果 是 当 使 用 XMLHttpRequest 时 ， 为 
0 (或 运行 一 个 本 地 服务 
召 谨 O 


18.1.1 指定 请 求 
创建 XMLHttpRequest 对 象 之 后 ， 发 起 HTTP 请 求 的 下 一 步 是 调用 


XMLHttpRequest 对 象 的 open() 方 法 去 指定 这 个 请 求 的 两 个 必需 部 分 : 方 
法 和 URL 。 
人 


request .open("GET", // 开 始 一 个 HTTP GET 请 求 


"data.csv");//URL 的 内 容 


open() 的 第 一 个 参数 指定 HTTP 方 法 或 动作 。 这 个 字符 串 不 区 分 大 小 
写 ， 但 通常 大 家 用 大 写字 母 来 匹配 HTTP 协 议 。"GET" 和 "POST" 方 法 是 
得 到 广泛 支持 的 。"GET" 用 于 常规 请 求 ， 它 适用 于 当 URL 完 全 指定 请 求 
资源 ， 当 请 求 对 服务 器 没有 任何 副作用 以 及 当 服 务 器 的 啊 应 是 可 缓存 
时 。"POST" 方 法 音 用 于 HTML 表 单 。 它 在 请 求 主体 中 包含 额外 数据 
(表单 数据 ) 且 这 些 数据 常 存 储 到 服务 器 上 的 数据 库 中 (副作用 ) 。 
相同 URL 的 重复 POST 请 求 从 服务 器 得 到 的 响应 可 能 不 同 ， 同 时 不 应 该 
缓存 使 用 这 个 方法 的 请 求 。 


除了 "GET" 和 "POST" 之 外 ，XMLHttpRequest 规 范 也 允许 
把 "DELETE"、"HEAD"、"OPTIONS" 和 "PUT" 作 为 open() 的 第 1 个 参 
数 。 ("HTTPCONNECT"、"TRACE" 和 "TRACK" 因 为 安全 风险 已 被 明 


确 茜 止 。) 旧 浏 览 器 并 不 支持 所 有 这 些 方法 ， 但 至 少 "HEAD" 得 到 广泛 
文 持 ， 例 18-13 演 示 如 何 使 用 它 。 


open() 的 第 2 个 参数 是 URL， 它 是 请 求 的 主题 。 这 是 相对 于 文档 的 
URL， 这 个 文档 包含 调用 open0) 的 脚本 。 如 果 指 定 绝对 URL、 协 议 、 主 
机 和 端口 通常 必须 匹配 所 在 文档 的 对 应 内 容 : 跨 域 的 请 求 通 常会 报 

错 。 (但 是 当 服务 器 明确 允许 跨 域 请 求 时 ，2 级 XMLHttpRequest 规 范 会 
允许 它 ， 见 18.1.6 节 。 ) 


如 果 有 请 求 头 的 话 ， 请 求 进程 的 下 个 步骤 是 设置 玄 。 例 如 ，POST 请 求 
需要 "Content-Type" 头 指定 请 求 主 题 的 MIME 类 型 


request,.SsetRequestHeader("Content-Type"，"text/Vplain") ， 


如 果 对 相同 的 头 调用 setRequestHeader0 多 次 ， 新 值 不 会 取代 之 前 指定 的 
本 相反 ，HITTP 请 求 将 包含 这 个 头 的 多 个 副本 或 这 个 头 将 指定 多 个 


你 不 能 目 己 指定 "Content-Length"、"Date"、"Referer" 或 "User- 
Agent" 头 ，XMLHttpRequest 将 目 动 添加 这 些 头 而 防止 伪造 它们 。 类 似 
地 ，XMLHttpRequest 对 象 自动 处 理 cookie、 连 接 时 间 、 字 符 集 和 编码 
判断 ， 所 以 你 无 法 向 setRequestHeader0 传 递 这 些 头 : 


Accept-Charset Content-Transfer-Encoding TE 
Accept-Encoding Date Trailer 
Connection Expect Transfer-Encoding 
Content-Length Host Upgrade 

Cookie Keep-Alive User-Agent 
Cookie2 Referer Via 


你 能 为 请 求 指定 "Authorization" 头 ， 但 通 币 不 需要 这 么 做 。 如 果 请 求 一 
个 受 密码 保护 的 URL， 把 用 户 名 和 密码 作为 第 4 个 和 第 5 个 参数 传递 给 
open()， 则 XMLHttpRequest 将 设置 合适 的 涉 。 〈 接 下 来 我 们 将 了 解 关 于 


人 。 可 选 的 用 户 名 和 密码 参数 会 在 第 四 部 分 有 介 
给。 


使 用 XMLHttpRequest 发 起 HTTP 请 求 的 最 后 一 步 是 指定 可 选 的 请 求 主 体 
并 向 服务 器 发 送 它 。 使 用 send0) 方 法 像 如 下 这 样 做 : 


request.send(null),; 


GET 请 求 绝对 没有 主体 ， 所 以 应 该 传递 null 或 省 略 这 个 参数 。POST 请 
求 通常 拥有 主体 ， 同 时 它 应 该 匹配 使 用 setRequestHeader0O 指 定 
的 "Content-Type" 头 。 


顺序 问题 


HTTP 请 求 的 各 部 分 有 指定 顺序 : 请求 方 法 和 URL 首 先 到 达 ， 然 后 是 请 
求 头 ， 最 后 是 请 求 主体 。 XMLHttpRequest 实 现 通常 直到 调用 send() 方 法 
才 开 始 启动 网 络 。 但 XMLHttpRequest API 的 设计 似乎 使 每 个 方法 都 将 
写 入 网 络 流 。 这 意味 着 调用 XMLHttpRequest 方 法 的 顺序 必须 匹配 HTTP 
请 求 的 架构 。 例 如 ，setRequestHeader(0) 方 法 的 调用 必须 在 调用 open0) 之 
前 但 在 调用 send() 之 后 ， 否 则 它 将 抛 出 异常 。 


例 18-1 使 用 了 我 们 目前 介绍 的 所 有 XMLHttpRequest 方 法 。 它 用 POST 方 
法 发 送 文本 字符 串 给 服务 器 ， 并 忽略 服务 器 返回 的 任何 响应 。 


例 18-1: 用 POST 方法 发 送 纯 文 本 给 服务 器 


function postMessage(msg){ 


var request=new XMLHttpRequest();// 新 请 求 


request.open("POST", "/10g.php");// 用 POST 向 服务 器 端 发 送 脚 本 


// 用 请 求 主体 发 送 纯 文本 消息 


request.setRequestHeader ("Content-Type",// 请 求 主体 将 是 纯 文本 


"text/plain;charset=UTF-8"); 


request.send(msg);// 把 msg 作 为 请 求 主体 发 送 


// 请 求 完成 ， 我 们 将 忽略 任何 响应 和 任何 错误 


} 


注意 例 18-1 中 的 send0 方 法 启动 请 求 ， 然 后 返回 ， 当 它 等 待 服务 器 的 响 
应 时 并 不 阻塞 。 接 下 来 章节 介绍 的 几乎 都 是 异步 处 理 HTTP 响 应 。 


18.1.2 ”取得 啊 应 


一 个 完整 的 HTTP 啊 应 由 状态 码 、 啊 应 头 集 合 和 响应 主体 组 成 。 这 些 都 
可 以 通过 XMLHttpRequest 对 象 的 属性 和 方法 使 用 : 


.status 和 statusText 属 性 以 数字 和 文本 的 形式 返回 HTTP 状态 码 。 这 些 属 
性 保存 标准 的 HTTP 值 ， 像 200 和 "OK" 表 示 成 功 请 求 ，404 和 和 "Not 
Found" 表 示 URL 不 能 匹配 服务 器 上 的 任何 资源 。 


.使 用 getResponseHeaderO0 和 getAl]ResponseHeaders0) 能 查询 啊 应 头 。 
XMLHttpRequest 会 自动 处 理 cookie: 它 会 从 getAllResponseHeaders() 尖 
返回 集合 中 过 滤 抒 cookie 头 ， 而 如 采 给 getResponseHeaderO) 传 递 "Set- 
Cookie" 和 "Set-Cookie2" 则 返回 null 。 


. 吧 应 主体 可 以 从 responseText 属 性 中 得 到 文本 形式 的 ， 从 responseXML 
属性 中 得 到 Document 形 式 的 。 〈 这 个 属性 名 是 有 历史 的 : 它 实 际 上 对 
XHTML 和 XML 文 档 有 效 ， 但 XHR2 说 它 也 应 该 对 普通 的 HTML 文 档 工 
上, 。) 关于 responseXML 的 更 多 内 容 请 看 18.1.2 节 下 面 的 “2. 啊 应 解 

区 2 条 o 


XMLHttpRequest 对 象 通常 (除了 见 18.1.2 末 下面 的 “1. 同 步 响应 ” 节 的 内 
容 ) 异步 使 用 : 发 送 请 求 后 ，send() 方 法 立即 返回 ， 直 到 响应 返回 ， 前 
面 列 出 的 啊 应 方法 和 属性 才 有 效 。 为 了 在 啊 应 准备 就 绪 时 得 到 通知 ， 
必须 监听 XMLHttpRequest 对 象 上 的 readystatechange 事 件 〈 或 者 18.1.4 节 
描述 新 的 XHR 进 度 事件 ) 。 但 为 了 理解 这 个 事件 类 型 ， 你 必须 理解 
readyState 属 性 。 


readyState 是 一 个 整数 ， 它 指定 了 HTTP 请 求 的 状态 ， 同 时 表 18-1 列 出 了 
它 可 能 的 值 。 第 一 列 的 符号 是 XMLHttpRequest 构 造 画 数 定义 的 常量 。 
这 些 铝 量 是 XMLHttpRequest 规 苑 的 一 部 分 ， 但 老 的 浏 质 郑 和 下 8 没有 
定义 它们 ， 通 常 看 到 使 用 硬 编码 值 4 来 表示 XMLHttpRequestDONE。 


表 18-1; XMLHttpRequest 的 readyState 值 


前 量 值 含义 

UNSENT 0 open() 尚 未 调用 
OPENED l open() 已 调用 
HEADERS_RECEIVED 2 接收 到 头 信息 
LOADING 3 接收 到 啊 应 主体 
DONE 4 啊 应 完成 


理论 上 ， 每 次 readyState 属 性 改变 都 会 触发 readystatechange 事 件 。 实 际 
中 ， 当 readyState 改 变 为 0 或 1 时 可 能 没有 触发 这 个 事件 。 当 调用 send0) 
时 ， 即 使 readyState 仍 处 于 OPENED 状 态 ， 也 通常 触发 它 。 某 些 浏览 器 
在 LOADING 状 态 时 能 触发 多 次 事件 来 给 出 进度 反馈 。 当 readyState 值 改 
变 为 4 或 服务 器 的 啊 应 完成 时 ， 所 有 的 浏 贤 絮 都 触发 readystatechange 事 
件 。 因 为 在 响应 完成 之 前 也 会 触发 事件 ， 所 以 事件 处 理 程序 应 该 一 直 
检验 readyState 值 。 


为 了 监听 readystatechange 事 件 ， 请 把 事件 处 理 函 数 设 置 为 
XMLHttpRequest 对 象 的 onreadystatechange 必 性。 也 能 使 用 
addEventListener() (或 在 IE8 以 及 之 前 版 本 中 使 用 attachEvent()) ， 但 通 
常 每 个 请 求 只 需要 一 个 处 理 程序 ， 所 以 只 设置 onreadystatechange 更 容 
易 o 


例 18-2 定 义 了 getText(0 函 数 来 演示 如 何 监听 readystatechange 事 件 。 事 件 
处 理 程序 首先 要 确保 请 求 完 成 。 如 果 这 样 ， 它 会 检查 响应 状态 码 来 取 
保 请 求 成 功 。 然 后 它 查找 "Content-Type" 头 来 验证 啊 应 主体 是 否 是 期 望 


的 类 型 。 如 果 3 个 条 件 都 得 到 满足 ， 它 会 把 响应 主体 (以 文本 形式 ) 发 
送 给 指定 的 回调 画 数 


例 18-2: 获取 HTTP 员 应 的 onreadystatechange 


// 发 出 一 个 HTTP GET 请求 以 获得 指定 URL 的 内 容 


// 当 响应 成 功 到 达 ， 验 证 它 是 否 是 纯 文 本 


// 如 果 是 ， 把 它 传递 给 指定 回调 画 数 


function getText(url,callback){ 


var request=new XMLHttpRequest();// 创 建新 请 求 


request .open("GET", url);// 指 定 待 获取 的 URL 


沪 
| 


里 程序 


request .onreadystatechange=function(){// 直 义 习 


// 如 果 请 求 完 成 ， 则 它 是 成 功 的 


if(request.readyState===4&&request.status===200)f{ 


Var type=request.getResponseHeader("Content-Type"); 


if(type.match(/Atext/) )// 确 保 响应 是 文本 


callback(request.responseText );// 把 它 传递 给 回调 函数 


}; 


request .send(null);// 立 即 发 送 请 求 


1. 同 步 响 应 


由 于 其 本 身 的 性 质 ， 异 步 处 理 HTTP 响 应 是 最 好 的 方式 。 然 而 ， 
XMLHttpRequest 也 文 持 同步 啊 应 。 如 有 果 把 false 作 为 第 3 个 参数 传递 给 
open0， 那 么 send(0) 方 法 将 阻塞 直到 请 求 完 成 。 在 这 种 情况 下 ， 不 需 
使 用 事件 处 理 程序 : 一 旦 send0 返 回 ， 仅 需要 检查 XMLHttpRequest 对 象 
的 status 和 responseText 属 性 。 比 较 例 18-2 中 getText() 浪 数 的 同步 代码 : 


// 发 起 同步 的 HTTP GET 请 求 以 获得 指定 URL 的 内 容 


// 返 回响 应 文本 ， 或 如 果 请 求 不 成 功 或 响应 不 是 文本 就 报错 


function getTextSync(url){ 


var request=new XMLHttpRequest();// 创 建新 请 求 


request.open("GET", url, false);// 传 递 false 实 现 同步 


request .send(null);// 立 即 发 送 请 求 


// 如 果 请 求 不 是 200 0K， 就 报错 


if(request.status!==200)throw new Error(request.statusText );// 如 果 类 型 错误 ， 就 报错 


Var type=request.getResponseHeader("Content-Type"); 
if(!type.match(/^text/)) 
throw new Error("Expected textual response;got:"+type); 


return request.responseText,; 


同步 请 求 是 吸引 人 的 ， 但 应 该 避免 使 用 它们 。 客 户 闻 JavaScript 古 单线 
程 的 ， 当 send(0 方 法 阻塞 时 ， 它 通 利 会 导致 整个 浏 喃 郁 UI 冻 结 。 如 采 连 
接 的 服务 融 啊 应 慢 ， 那 么 用 户 的 浏览 善 将 冻结 。 然 而 ， 参 见 22.4 下 可 接 
受 的 使 用 同步 请 求 的 场景 。 


2. 啊 应 解码 


在 前 面 的 示例 中 ， 我 们 假设 服务 絮 使 用 
像 "text/plain"、"text/html" 或 "text/css" 这 样 的 MIME 类 型 发 送 文 本 响应 ， 
然后 我 们 使 用 XMLHttpRequest 对 和 象 的 responseText 属 性 得 到 它 。 


但 是 还 是 其 他 方式 来 处 理 服务 器 的 啊 应 。 如 果 服 务 器 发 送 XML 或 
XHTML 文档 作为 其 啊 应 ， 你 能 通过 responseXML 属 性 获得 一 个 解析 形 
式 的 XML 文档 。 这 个 属性 的 值 是 一 个 Document 对 象 ， 可 以 使 用 第 15 章 
介绍 的 技术 搜索 和 遍历 它 。 (XHR2 草 案 规范 指出 浏览 器 也 应 该 自动 解 
析 "text/html" 类 型 的 响应 ， 使 它们 也 能 通过 responseXML 属 性 获取 其 
Document 文 档 对 象 ， 但 在 写本 章 时 当前 浏览 器 还 没有 这 么 做 。) 


如 果 服 务 器 想 发 送 诸如 对 象 或 数组 这 样 的 结构 化 数据 作为 其 响应 ， 它 
应 该 传输 JSON 编 码 (参见 6.9 节 ) 的 字符 串 数据 。 当 接收 它 时 ， 可 以 把 
responseText 属 性 传递 给 JSON.parse0。 例 18-3 是 例 18-2 的 归纳 : 它 实 现 
指定 URL 的 GET 请 求 并 当 URL 的 内 容 准 备 歼 绪 时 把 它们 传递 给 指定 的 
回调 函数 。 但 它 不 是 一 直 传 递 文本 ， 而 是 传递 Document 对 象 或 使 用 
JSON.parse0 编 码 的 对 象 或 字符 串 。 


例 18-3: 解析 HTTP 啊 应 


// 发 起 HTTP GET 响应 以 获取 指定 URL 的 内 容 


// 当 响应 到 达 时 ， 把 它 以 解析 后 的 XML Document 对 象 、 解 析 后 的 JSON 对 象 


// 或 字符 串 形 式 传递 给 回调 函数 


function get(url,callback){ 


var request=new XMLHttpRequest();// 创 建新 请 求 


request .open("GET", url);// 指 定 待 获取 的 URL 


request.onreadystatechange=function(){// 定 义 事件 监听 器 


// 如 果 请 求 完成 且 成 功 


if(request.readyState===4 人 此 &request.status===200){// 获 得 响应 的 类 型 


这 样 我 们 不 能 在 将 来 得 到 HTML 文 


var type=request.getResponseHeader("Content-Type");// 检 查 类 型 ， 
档 


if(type.indexof("xml")!==-1&&request.responseXML) 


callback(request.responseXML);//Document 对 象 响应 


callback(JSON.parse(redquest.responseText) );/V/JSON 响 应 


else 


callback(request .responseText );// 字 符 串 响应 
} 

}; 

request .send(null);// 立 即 发 送 请 求 


} 


例 18-3 检 查 该 啊 应 的 "Content-Type" 头 且 专 门 处 理 "application/json" 影 
啊 。 你 可 能 希望 特殊 编码 的 男 一 个 响应 类 型 

是 "application/javascript" 或 "text/javascript"。 你 能 使 用 XMLHttpRequest 
请 求 JavaScript 脚 本 ， 然 后 使 用 全 局 eval() (参见 4.12.2 节 ) 执行 这 个 脚 
本 。 但 是 ， 在 这 种 情况 下 不 需要 使 用 XMLHttpRequest 对 象 ， 因 为 < 
script> 元 素 本 刁 操 纵 HITP 脚 本 的 能 力 完 全 可 以 实现 加 载 并 执行 脚本 。 
见 示 例 13-4， 且 记 住 <script> 元 素 能 发 起 跨 域 HTTP 请 求 ， 而 
XMLHttpRequest API 则 禁 


Web 服 务 端 通常 使 用 二 进 制 数 据 (例如 ， 图 片 文 件 ) 响应 HTTP 请 求 。 
responseText 属 性 只 能 用 于 文本 ， 且 它 不 能 妥善 处 理 二 进 制 啊 应 ， 即 使 
对 最 终 字 符 串 使 用 了 charCodeAt() 方 法 。XHR2 定 义 了 处 理 二 进 制 响 应 


的 方法 ， 但 在 写本 章 时 ， 浏 览 器 厂商 还 没有 实现 它 。 进 一 步 详情 请 参 
见 22.6.2 节 。 


服务 句 啊 应 的 正常 解码 是 假设 服务 絮 为 这 个 啊 应 发 送 了 "Content- 
Type" 头 和 正确 的 MIME 类 型 。 例 如 ， 如 果 服 务 絮 发 送 XML 文 档 但 没有 
设置 适当 的 MIME 类 型 ， 那 和 XMLHttpRequest 对 象 将 不 会 解析 它 且 设 
置 responseXML 属 性 。 或 者 ， 如 果 服 务 需 在 "Content-Type" 头 中 包含 了 
背 误 的 "charset" 参 数 ， 那 么 XMLHttpRedquest 将 使 用 错误 的 编码 来 解析 员 
应 ， 并 且 responseText 中 的 字符 可 能 是 错 的 。XHR2 定 义 了 
overrideMimeType() 方 法 来 解决 这 个 问题 ,并且 大 量 的 浏 宽 絮 已 经 实现 
了 它 。 如 采 相 对 于 服务 器 你 更 了 解 资 源 的 MIME 类 型 ， 那 么 在 调用 
send0) 之 前 把 类 型 传递 给 overrideMimeTypeO0， 这 将 使 XMLHttpRequest 
忽略 "Content-Type" 头 而 使 用 指定 的 类 型 。 假 设 你 将 下 载 XML 文 件 ， 而 
你 计划 把 它 当 成 纯 文本 对 每 。 可 以 使 用 setOverrideMimeType() 让 
XMLHttpRequest 知 道 它 不 需要 把 文件 解析 成 XML 文 档 : 


he 


// 不 要 把 响应 作为 XML 文档 处 理 


request .overrideMimeType("text/plain;charset=utf-8") 


18.1.3 ”编码 请 求 主体 


HTTP POST 请 求 包 括 一 个 请 求 主 体 ， 它 包含 客户 端 传 递 给 服务 右 的 数 
据 。 在 例 18-1 中 ， 请 求 主体 是 简单 的 文本 字符 串 。 但 是 ， 我 们 通常 使 用 
HTTP 请 求 发 送 的 都 是 更 复杂 的 数据 。 本 节 演 示 这 样 做 的 一 些 方法 。 


1. 表 单 编码 的 请 求 


考虑 HITML 表 单 。 当 用 户 提交 表单 时 ， 表 单 中 的 数据 (每 个 表单 元 素 的 
名 字 和 值 ) 编码 到 一 个 字符 串 中 并 随 请 求 发 送 。 默 认 情况 下 ，HIML 表 
单 通过 POST 方 法 发 送 给 服务 器 ， 而 编码 后 的 表单 数据 则 用 做 请 求 主 
体 。 对 表单 数据 使 用 的 编码 方案 相对 简单: 对 每 个 表单 元 素 的 名 字 和 
值 执行 普通 的 URL 编 码 (使 用 十 六 进 制 转 义 码 替 换 特殊 字符 ) ， 使 用 
等 号 把 编码 后 的 名 字 和 值 分 开 ， 并 使 用 "区 ”符号 分 开 名 / 值 对 。 一 个 简 
单 表单 的 编码 像 如 下 这 样 : 


find=pizza&zipcode=02134&radius=1km 


表单 数据 编码 格式 有 一 个 正式 的 MIME 类 型 : 


application/x-www-form-urlencoded 


当 使 用 POST 方 法 提交 这 种 顺序 的 表单 数据 时 ， 必 须 设置 "Content- 
Type" 请 求 头 为 这 个 值 。 


注意 ， 这 种 类 型 的 编码 并 不 需要 HTML 表 单 ， 在 本 章 我 们 实际 上 将 不 需 
要 直接 使 用 表单 。 在 Ajax 应 用 中 ， 你 布 望 发 送 给 服务 硕 的 很 可 能 十 一 
个 JavaScript 对 象 。 〈 这 个 对 象 可 能 从 HTML 表 单 的 用 户 输入 中 得 到 ， 

但 这 里 不 是 问题 。) 前 面 展示 的 数据 变 成 JavaScript 对 象 的 表单 编码 形 
式 可 能 是 : 

{ 

find:"pizza", 

zipcode:02134, 

radius:"1ikm" 

} 

表 早 编码 在 Web 上 如 此 广泛 使 用 ， 同 时 所 有 服务 絮 问 的 编程 语言 都 能 得 
到 民 好 的 文 持 ， 所 以 非 表单 数据 的 表单 编码 通常 也 是 容易 实现 的 事 

情 。 例 18-4 展 示 了 如 何 实现 对 象 属性 的 表单 编码 。 

例 18-4: 用 于 HTTP 请 求 的 编码 对 象 


* 编 码 对 象 的 属 | 


| 于 
HT 


* 如 果 它 们 是 来 自 HTML 表 单 的 名 / 值 对 ， 使 


*/ 


function encodeFormData(data)t{ 


if(!data)return"";// 返回 字符 串 


var pairs=[];// 为 了 保存 名 = 值 对 


japplication/x-www-form-urlencoded 格 式 


for(var name in data){// 为 每 个 名 字 


if(!1data.hasownProperty(name))continue;// 跳 过 继承 属性 


if(typeof data[name]==="function")continue;// 跳 过 方法 


Var value=data[name].toString(); 


本 


Ee 


// 把 值 转换 成 字符 串 


name=encodeURIComponent(name .replace("%20","+") ) ;// 编 码 名 字 


value=encodeURIComponent (value.replace("%20", "+"));// 编 码 值 


主 名 = 值 对 


pairs.push(name+"="+Value ) ;/V/ 记 但 


" 们 "连接 的 名 / 值 对 


return pairs.join(' 尺 ');// 返 回 使 


使 用 已 定义 的 encodeFormData0 落 数 ， 我 们 能 容易 地 写 出 像 例 18-5 中 

postData() 落 数 这 样 的 工具 函数 。 需 要 注意 的 是 ， 简 单 来 说 ，postData() 
函数 〈 在 随后 的 示例 中 有 相似 的 函数 ) 不 能 处 理 服 务 器 的 响应 。 当 响 
应 完成 ， 它 传递 整个 XMLHttpRequest 对 象 给 指定 的 回调 函数 。 这 个 回 


调 芳 数 人 负责 检 查 啊 应 状态 码 和 提取 啊 应 文本 。 


例 18-5: 使 用 表单 编码 数据 发 起 一 个 HTTP POST 请 求 


function postData(url,data,callback){ 


Var request=new XMLHttpRequest(); 


request .open("POST", url1);// 对 指定 URL 发 生 P0ST 请 求 


request.onreadystatechange=function( ){// 简 单 的 事件 处 理 程序 


if(request.readyState===4&&callback)// 当 响应 完成 


callback(request );// 调 用 回调 函数 


}; 


request.setRequestHeader("Content-Type",// 设 置 Content-Type 


"application/x-www-form-urlencoded"); 


request.send(encodeFormData(data));// 发 送 表 


NSS 


人 码 的 数据 


表单 数据 同样 可 以 通过 GET 请 求 来 提交 ， 有 既然 表单 提交 的 目的 是 为 了 
执行 只 读 查 询 ， 因 此 GET 请 求 比 POST 请 求 更 合适 。 ( 当 提 交 表 单 的 目 
标 仅 仅 是 一 个 只 读 查 询 ，GET 比 POST 更 合适 。) GET 请 求 从 来 没有 主 
体 ， 所 以 需要 发 送 给 服务 器 的 表单 编码 数据 “负载 ?要 作为 URL (后 跟 
一 个 问号 ) 的 查询 部 分 。encodeFormData0 工 具 函 数 也 能 用 于 这 种 GET 
请 求 ， 旦 例 18-6 演 示 了 如 何 使 用 它 。 


例 18-6: 使 用 表单 编码 数据 发 起 GET 请 求 


function getData(url,data,callback){ 


Var request=new XMLHttpRequest(); 


request .open("GET", url+// 通 过 添加 的 编码 数据 获取 指定 的 url 


"?3"+encodeFormData(data) )， 


request .onreadystatechange=function( ){// 简 单 事件 处 理 程序 
if(request.readystate===4&&callback)callback (request ); 

}; 

request .send(null);// 发 送 请 求 

} 

HTML 表 单 在 提交 的 时 候 会 对 表单 数据 进行 URL 编 码 ， 但 使 用 


XMLHttpRequest 能 给 我 们 编码 目 己 想 要 的 任何 数据 。 随 厦 服 务 器 上 的 
适当 文 择 ， 我 们 的 pizza 查 询 数据 将 编码 成 一 个 更 清晰 的 URL， 如 下 : 


http:V/restaurantfinder .exampJe,.com/02134/1Kkm/pizza 


2.JSON 编 码 的 请 求 

在 POST 请 求 主 体 中 使 用 表单 编码 是 常见 惯例 ， 但 在 任何 情况 下 它 都 不 
是 HTTP 协议 的 必需 品 。 近 年 来 ， 作 为 Web 交 换 格式 的 JSON 已 经 得 到 普 
及 。 例 18-7 展 示 如 何 使 用 JSON.stringify() (参见 6.9 节 ) 编码 请 求 主体 。 
注意 这 个 示例 和 例 18-5 的 不 同 仅 在 最 后 两 行 。 


例 18-7: 使 用 JSON 编 码 主体 来 发 起 HITP POST 请 求 


function postJSON(ur]l, data,callback){ 
var request=new XMLHttpRequest(); 


request .open("POST", ur1);// 对 指定 URL 发 送 POST 请 求 


request .onreadystatechange=function( ){// 简 单 的 事件 处 理 程序 


if(request.readysState===4&&callback)// 当 响应 完成 时 


callback(request );// 调 用 回调 函数 

}; 
request.setRequestHeader("Content-Type","application/json"); 
request.send(JSON.stringify(data)); 


} 


3.XML 编 码 的 请 求 


XML 有 时 也 用 于 数据 传输 的 编码 。JavaScript 对 象 的 用 表单 编码 或 JSON 
0 也 能 用 XML 文档 来 表示 它 。 例 如 ， 它 看 起 
水 如 不 : 


<query> 

<find zipcode="02134"radius="1km"> 
pizza 

</find> 


</query> 


在 目前 展示 的 所 有 示例 中 ，XMLHttpRequest 的 send() 方 法 的 参数 是 一 个 
字符 串 或 null。 实 际 上 ， 可 以 在 这 里 传 入 XML Document 对 象 。 例 18-8 
建 一 个 简单 的 XML Document 对 象 并 使 用 它 作 为 HTTP 请 求 


例 18-8: 使 用 XML 文档 作为 其 主体 的 HITP POST 请 求 


// 在 XML 中 编 


编码 什么 东西 、 在 哪儿 和 半径 ， 然 后 向 指定 的 URL 发 送 POST 请 求 
// 当 接收 到 响应 时 ， 调 用 回调 函数 


function postQuery(url,what,where,radius,callback){ 


Var request=new XMLHttpRequest(); 


request .open("POST", url);// 对 指 


E 的 URL 发 送 POST 请 求 


request .onreadystatechange=function( ){// 简 


的 


件 处 理 程序 
if(request.readystate 


4&&callback)callback(request); 


};//Create an XML document with root element<query> 


var doc=document.implementation.createDocument("","query",null); 


var query=doc.documentElement;//<query> 元 素 


var find=doc.createElement("find");// 创 建 <find> 元 素 


query.appendchild(find);// 


把 它 添加 到 < query> 


UD 


find.setAttribute("zipcode",where);// 设 


<find> 的 属性 


find.setAttribute("radius"， radius ) ， 


find.appendchild(doc.createTextNode(what));// 


设置 <find> 的 内 容 
// 现 在 向 服务 器 发 送 XML 编 码 的 数据 
// 注 意 将 自动 设 


置 Content -Type 头 


request.send(doc); 


注意 : 例 18-8 不 曾 为 请 求 设置 "Content-Type" 头 。 当 给 send0) 方 法 传 入 
XML 文档 时 ， 并 没有 预先 指定 "Content-Type" 头 ， 但 XMLHttpRequestyq 
象 会 自动 设置 一 个 合适 的 头 。 类似 地 ， 如 果 给 send0 传 入 一 个 字符 串 
但 没有 指定 Content-Type 头 ， 那 么 XMLHttpRequest 将 会 添 

加 "extplain;charset=UTF-8" 头 。) 在 例 18-1 的 代码 中 显 式 设置 了 这 个 
头 ， 但 实际 上 对 于 纯 文本 的 请 求 主 体 并 不 需要 这 么 做 。 


4. 上 传 文件 


HTML 表 单 的 特性 之 一 是 当 用 户 通 过 <input type="file" > 元 素 选择 文件 
时 ， 表 单 将 在 它 产生 的 POST 请 求 主体 中 发 送 文件 内 容 。HTML 表 单 始 
终 能 上 传 文件 ， 但 到 目前 为 止 它 还 不 能 使 用 XMLHttpRequest API 做 相 
同 的 事情 。 然 后 ，XHR2 API 外 许 通过 向 send0 广 法 传 入 Fle 对象 来 实现 


没有 File0 对 象 构造 画 数 ， 脚 本 仅 能 获得 表示 用 户 当 前 选择 文件 的 File 对 
象 。 在 支持 File 对 象 的 浏览 器 中 ， 每 个 <input type="file" > 元素 有 一 个 
files 属 性 ， 它 是 File 对 象 中 的 类 数组 对 象 。 拖 放 API (参见 17.7 节 ) 人 允许 
通过 拖 放 事件 的 dataTransfer.files 属 性 访问 用 户 “ 拖 放 ” 到 元 素 上 的 文件 。 
我 们 将 在 22.6 广 和 22.7 广 看 到 更 多 天 于 File 对 和 象 的 内 容 。 但 现在 来 讲 ， 

可 以 将 它 当 做 一 个 用 户 选 择 文件 完全 不 透明 的 表示 形式 ， 适 用 于 通过 
send(0 来 上 传 文件 。 例 18-9 是 一 个 目 然 的 JavaScript 函 数 ， 它 对 某 些 文件 
上 传 元 素 添加 了 change 事 件 处 理 程 序 ， 这 样 它们 能 上 自动 把 任何 选择 过 的 
文件 内 容 通过 POST 方法 目 动 发 送 到 指定 的 URL 。 


例 18-9: 使 用 HTTP POST 请 求 上 传 文件 


// 查 找 有 data-uploadto 属 性 的 全 部 <input type="file" > 元 素 ， 


// 并 注册 onchange 事 件 处 理 程序 


// 这 样 任何 选择 的 文件 都 会 自动 通过 POST 方 法 发 送 到 指定 的 "uploadto"URL 


// 服 务 器 的 响应 是 忽略 的 


whenReady (function( ){// 当 文档 准备 就 绪 时 运行 


sp 


的 input 元 素 


var elts=document .getElementsByTagName("input");// 所 


for(var i=0;1i<elts,.length;i++){// 遍 历 它们 


var input=elts[i]; 


if(input.type!=="file")continue;// 跳 过 所 有 非 文 件 上 传 元 素 


var url=input .getAttribute("data-uploadto");// 获 取 上 传 URL 


if( 1url)continue;// 跳 过 任何 没有 URL 的 元 素 


input.addEventListener("change", function(){// 当 用 户 选 择 文件 时 


var file=this.files[9];// 假 设 单个 文件 选择 


if(!file)return;// 如 果 没 有 文件 ， 不 做 任何 事情 


var xhr=new XMLHttpRequest();// 创 建新 请 求 


xhr .open("POST", Url);// 向 这 个 URL 发 送 POST 请 求 


xhr .send(file);// 把 文件 作为 主体 发 送 


},false); 
} 


}); 


正如 我 们 在 22.6 广 所 看 到 的 ， 文 件 类 型 是 更 通用 的 二 进 制 大 对 象 
(Blob) 类 型 中 的 一 个 子 类 型 。XHR2 人 允许 向 send0) 方 法 传 入 任何 Blob 

对 象 。 如 果 没 有 显 式 设 置 Content-Type 头 ， 这 个 Blob 对 象 的 type 属 性 用 

于 设置 待 上 传 的 Content-Type 头 。 如 果 需 要 上 传 已 经 产生 的 二 进 制 数 

， 人 
J 请 求 


5.multipart/form-data 请 求 


当 HTML 表 单 同 时 包含 文件 上 传 元 素 和 其 他 元 素 时 ， 浏 宽 右 不 能 使 用 普 
通 的 表单 编码 而 必须 使 用 称 为 "multipart/form-data" 的 特殊 Content-Type 


来 用 POST 方法 提交 表单 。 这 种 编码 包括 使 用 长 * 边 界 ?" 字 人 符 串 把 请 求 主 
体 分 离 成 多 个 部 分 。 对 于 文本 数据 ， 手 动 创建 "multipart/form-data" 请 求 
主体 是 可 能 的 ， 但 很 复杂 。 


XHR2 定 义 了 新 的 FormData API， 它 容易 实现 多 部 分 请 求 主体 。 首 先 ， 
使 用 FormData0 构 造 函数 创建 FormData 对 象 ， 然 后 按 需 多 次 调用 这 个 对 
象 的 append0 方 法 把 个 体 “ 部 分 ”( 可 以 是 字符 串 、File 或 Blob 对 象 ) 添 
加 到 请 求 中 。 最 后 ， 把 FormData 对 象 传递 给 send() 方 法 。send() 方 法 将 
对 请 求 定 义 合 适 的 边界 字符 串 和 设置 "Content-Type" 头 。 例 18-10 演 示 了 
FormData 的 使 用 ， 同 时 我 们 将 在 例 18-11 再 次 看 到 它 。 


例 18-10: 使 用 POST 方 法 发 送 multipart/form-data 请 求 主体 


function postFormData(url,data,callback){ 


throw new Error("FormData is not implemented"); 


var request=new XMLHttpRequest();// 新 HTTP 请 求 


request .open("POST", url1);// 对 指定 URL 发 送 POST 请 求 


request .onreadystatechange=function( ){// 简 单 的 事件 处 理 程序 


if(request.readyState===4&%&callback)// 当 了 响应 完成 时 


callback (request );// 调 用 回调 函数 


}; 


Var formdata=new FormData( ); 


for(var name in data){ 


上 


if(!1data.hasownProperty(name))continue;// 跳 过 继承 的 属性 


en 
| 二 


var value=data[name]; 


// 每 个 属性 变 成 请 求 的 一 个 部 分 


// 这 里 允许 File 对 象 


formdata.append(name,value) ;// 作 为 一 部 分 添加 名 / 值 对 


} 


// 在 multipart/form-data 请 求 主体 中 发 送 名 / 值 对 


/ 


Sw 


每 对 都 是 请 求 的 一 个 部 分 ， 注 意 ， 当 传 入 FormData 对 象 时 


//send( ) 会 自动 设置 Content -Type 头 


request.send(formdata); 


} 


18.1.4 HTTP 进 度 事 件 


在 之 前 的 示例 中 ， 使 用 readystatechange 事 件 探 测 HTTP 请 求 的 完成 。 
XHR2 规 范 草 案 定 义 了 更 多 有 用 的 事件 集 ， 有 些 已 经 在 Firefox、Chrome 
和 Safari 中 得 到 支持 。 在 这 个 新 的 事件 模型 中 ，XMLHttpRequest 对 象 在 
中 所 以 它 不 再 需要 检查 readyState 
Ea O 


在 支持 它们 的 浏览 器 中 ， 这 些 新 事件 会 像 如 下 这 样 触发 。 当 调用 send() 
时 ， 触 发 单个 loadstart 事 件 。 当 正在 加 载 服 务 器 的 啊 应 时 ， 
XMLHttpRequest 对 象 会 发 生 progress 事 件 ， 通 常 每 隔 50 这 秒 左 右 ， 所 以 
可 以 使 用 这 些 事件 给 用 户 反 馈 请 求 的 进度 。 如 果 请 求 快 速 完成 ， 它 可 
能 从 不 会 触发 progress 事 件 。 当 事件 完成 ， 会 触发 load 事 件 。 


一 个 完成 的 请 求 不 一 定 是 成 功 的 请 求 ， 例 如 ，load 事 件 的 处 理 程 序 应 该 
检查 XMLHttpRequest 对 象 的 sta tus 状 态 码 来 确定 收 到 的 是 "200 OK" 而 不 
是 "404 Not Found" 的 HTTP 响应。 


HTTP 请 求 无 法 完成 有 3 种 情况 ， 对 应 3 种 事件 。 如 果 请 求 超 时 ， 会 触发 
timeout 事 件 。 如 果 请 求 中 止 ， 会 触发 abort 事 件 。 (18.1.5 节 包含 超时 和 
abort 方 法 的 内 容 。) 最 后 ， 像 太 多 重 定向 这 样 的 网 络 错误 会 阻止 请 求 
完成 ， 但 这 些 情况 发 生 时 会 触发 error 事 件 。 


对 于 任何 具体 请 求 ， 浏 览 右 将 只 会 触发 load、abort、timeout 和 error 事 件 
中 的 一 个 。XHR2 规 范 草 案 指出 一 日 这 些 事件 中 的 一 个 发 生 后 ， 浏 顺 喜 
应 该 触发 loadend 事 件 。 但 在 写本 章 时 ， 尚 未 有 浏览 器 实现 loadend 事 

件 。 


可 以 通过 XMLHttpRequest 对 象 的 addEventListener(0) 方 法 为 这 些 progress 
事件 中 的 每 个 都 注册 处 理 程序 。 如 果 每 种 事件 只 有 一 个 事件 处 理 程 

序 ， 通 常 更 容易 的 方法 是 只 设置 对 应 的 处 理 程序 属性 ， 比 如 onprogress 
a 以 使 用 这 些 事 件 属性 是 否 存 在 来 测试 浏 贤 絮 是 否 文 持 
progress 事 件 : 


wy 


if("onprogress"in(new XMLHttpRequest())){// 支 持 progress 事 


} 


除了 像 type 和 timestamp 这 样 常用 的 Event 对 象 属性 外 ， 与 这 些 progress 事 
件 相 关联 的 事件 对 象 还 有 3 个 有 用 的 属性 。loaded 属 性 是 目前 传输 的 字 
人 数值 。total 属 性 是 自 "Content-Length" 头 传输 的 数据 的 整体 长 度 ( 单 
位 是 字 节 ) ， 如 果 不 知道 内 容 长 度 则 为 0。 最 后 ， 如 果 知道 内 容 长 度 则 
lengthComputable 属 性 为 tue; 否则 为 false。 显 然 ，total 和 loaded 属 性 对 
progress 事 件 处 理 程序 相当 有 用 : 


request.onprogress=function(e){ 


if(e.lengthComputable) 


progress.innerHTML=Math.round(100*e.loaded/e.total)+"%Complete"; 


} 


人 过度 村 人 


除了 为 监控 HITTP 员 应 的 加 载 定 义 的 这 些 有 用 的 事件 外 ，XHR2 也 给 出 
了 用 于 监控 HTTP 请 求 上 传 的 事件 。 在 实现 这 些 特 性 的 浏览 器 中 ， 
XMLHttpRequest 对 象 将 有 upload 属 性 。upload 属 性 值 是 一 个 对 象 ， 它 定 
义 了 addEventListener() 方 法 和 整个 progress 事 件 集合 ， 比 如 onprogress 和 
onload。 《但 upload 对 象 没 有 定义 onreadystatechange 属 性 ，upload 仅 能 
触发 新 的 事件 类 型 。) 


你 能 仅仅 像 使 用 常见 的 progress 事 件 处 理 程序 一 样 使 用 upload 事 件 处 理 
程序 。 对 于 XMLHttpRequest 对 象 X， 设 置 x.onprogress 以 监控 啊 应 的 下 载 
进度 ， 并 且 设 置 x.upload.onprogress 以 监控 请 求 的 上 传 进度 。 


例 18-11 演 示 了 如 何 使 用 upload progress 事 件 把 上 传 进度 反馈 给 用 户 。 这 
个 示例 也 演示 了 如 何 从 拖 放 API 中 获得 File 对 象 和 如 何 使 用 FormData 
API 在 单个 XMLHttpRequest 请 求 中 上 传 多 个 文件 。 在 写本 书 时 ， 这 些 功 
能 依旧 在 草案 中 ， 并 且 这 些 示例 不 能 在 所 有 的 浏览 右 中 工作 。 


例 18-11: 监控 HTTP 上 传 进度 


// 查 找 所 有 含有 "fileDropTarget" 类 的 元 素 


DH 


// 并 注册 DnD 事 件 处 理 程 序 使 它们 能 响应 文件 的 拖 放 


// 当 文件 放下 时 ， 上 传 它们 到 data-uploadto 属 性 指定 的 URL 


whenReady(function(){ 


var elts=document .getElementsByClassName("fileDropTarget"); 


for(var i=0;i<elts.length;i++){ 


var target=elts[i]; 


var url=target.getAttribute("data-uploadto"); 


if(!url)continue; 


createFileUploadDropTarget(target, url); 


UD 


六 


此 我 们 能 拒绝 放下 


function createFileUploadDpropTarget(target,url){// 跟 踪 当 前 是 否 正 在 上 传 ， 


// 我 们 可 以 处 理 多 个 并 发 上 传 


// 但 对 这 个 例子 使 用 进度 通知 太 困 难 J 


var uploading=false; 


console.log(target, url); 


target.ondragenter=function(e){ 


console.log("dragenter"); 


if(uploading)return;// 如 果 正 在 忙 ， 忽 上 略 拖 放 


Var types=e.dataTransfer.types; 


if(types&& 


((types.contains&&types.contains("Files"))|| 


(types.indexof&&types,.indexof("Files")!==-1)))t{ 


target.classList.add("wantdrop"); 


return false; 


target.ondragover=function(e){if(!uploading)return false;}; 


target.ondragleave=function(e){ 


if(!uploading)target.classList.remove("wantdrop"); 


}; 


target.ondrop=function(e){ 


if(uploading)return false; 


var files=e.dataTransfer.files,; 


if(files&&files.length)t{ 


uploading=true,; 


Var message="Uploading files:<ul>"; 


for(var i=0;i<files.length;i++) 


message+="<1i>"+files[il].name+"</1i>"; 


message+="</ul>"; 


target.innerHTML=message; 


target.classList.remove("wantdrop"); 


target.classList.add("uploading"),; 


Var xhr=new XMLHttpRequest(); 


xhr.open("POST", ur1); 


Var body=new FormData( ); 


for(var i=0;i<files.length;i++)body.append(i,files[i]); 


xhr .upload.onprogress=function(e){ 


if(e.lengthComputable){ 


target.innerHTML=message+ 
Math.round(e.loaded/e.total*100)+ 


"%Complete",; 


}; 

xhr .upload.onload=function(e){ 
uploading=false; 
target.classList.remove("uploading"); 
target.innerHTML="Drop files to upload"; 
}; 

xhr.send(body); 


return false; 


target.classList.remove("wantdrop"); 


}); 


18.1.5 ”中止 请 求 和 超时 


可 以 通过 调用 XMLHttpRequest 对 象 的 abort() 方 法 来 取消 正在 进行 的 
HTTP 请 求 。abort() 方 法 在 所 有 的 XMLHttpRequest 有 版 本 和 XHR2 中 可 
用 ， 调 用 abort() 方 法 在 这 个 对 象 上 触发 abort 事 件 。 (在 写本 章 时 ， 某 些 


浏览 器 支持 abort 事 件 。 可 以 通过 XMLHttpRequest 对 象 的 "onabort" 属 性 
是 否 存 在 来 判断 。) 


调用 abort(0) 的 主要 原因 是 完成 取消 或 超时 请 求 消耗 的 时 间 太 长 或 当 啊 应 
变 得 无 天 时 。 假 设 使 用 XMLHttpRequest 为 文本 输入 域 请 求 目 动 完 成 推 
存 。 如 果 用 户 在 服务 器 的 建议 达到 之 前 输入 了 痢 字 符 ， 这 时 等 竺 请 求 
不 再 有 趣 ， 应 该 中 止 。 


XHR2 定 义 了 timeonut 属 性 来 指定 请 求 自 动 中 止 后 的 宣 秒 数 ， 也 定义 了 
timeout 事 件 用 于 当 超 时 发 生 时 触发 〈 不 是 abort 事 件 ) 。 在 写本 章 时 ， 
浏览 器 不 支持 这 些 自 动 超时 〈 并 且 它 们 的 XMLHttpRequest 对 象 没 有 
timeout 和 ontimeout 属 性 ) 。 可 以 用 setTimeout() (参见 14.1 节 ) 和 abort() 
方法 实现 自己 的 超时 。 例 18-12 演 示 如 何 这 么 做 。 


例 18-12: 实现 超时 


// 发 起 HTTP GET 请 求 获取 指定 URL 的 内 容 


// 如 果 


= 


应 成 功 到 达 ， 传 入 responseText 给 回调 画 数 


// 如 果 响 应 在 timeout 毫 秒 内 没有 到 达 ， 中 止 这 个 请 求 


在 abort ( ) 后 触发 "readystatechange" 


CC 


// 浏 览 器 可 外 


// 如 果 是 部 分 请 求 结果 到 达 ， 甚 至 可 能 设置 status 属 性 


// 所 以 需要 设置 一 个 标记 ， 当 部 分 且 超时 的 响应 到 达 时 不 会 调用 回调 画 数 


// 如 果 使 用 Load 事件 就 没有 这 个 风险 


function timedGetText(ur1,timeout, callback){ 


var request=new XMLHttpRequest();// 创 建新 请 求 


var timedout=false;// 是 否 超 时 


// 启 动 计 时 器 ， 在 timeout 毫 秒 后 将 中 止 请 求 


var timer=setTimeout(function(){// 如 果 触 发 ， 启 动 一 个 计时 器 


timedout=true;// 设 置 标记 


request .abort();// 然 后 中 止 请 求 


}, 


timeout ) ;// 中 止 请 求 之 前 的 时 长 


request .open("GET", url);// 获 取 指定 的 URL 


request .onreadystatechange=function( ){// 定 义 事件 处 理 程序 


if(request.readysState!==4)return;// 忽 略 未 完成 的 请 求 


if(timedout)return;// 忽 略 中 止 请 求 


clearTimeout (timer );// 取 消 等 待 的 超时 


if(request.status===200)// 如 果 请 求 成 功 


callback(request.responseText);// 把 response 传 给 回调 函数 


}; 


request .send(null);// 立 即 发 送 请 求 


18.1.6 ”路 域 HTTP 请 求 


作为 同 源 策略 (参见 13.6.2 市 ) 的 一 部 分 ，XMLHttpRequest 对 象 通常 仅 
可 以 发 起 和 文档 具有 相同 服务 器 的 HTTP 请 求 。 这 个 限制 关闭 了 安全 漏 
洞 ， 但 它 演 手 答 脚 并 且 也 阻止 了 大 量 合适 使 用 的 跨 域 请 求 。 可 以 在 < 
form > 和 <iframe> 元 素 中 使 用 跨 域 URL， 而 浏览 器 显示 最 终 的 跨 域 文 
档 。 但 因为 同 源 策 略 ， 浏 览 器 不 允许 原始 脚本 碍 找 跨 域 文 档 的 内 容 。 
使 用 XMLHttpRequest， 文 档 内 容 都 是 通过 responseText 属 性 暴露 ， 所 以 


同 源 策略 不 允许 XMLHttpRequest 进 行 跨 域 请 求 。 (注意 <script> 元素 
并 未 真正 受 限于 同 源 策略 : 它 加 载 并 执行 任何 来 源 的 脚本 。 如 果 我 们 
看 18.2 订 ， 跟 域 请 求 的 灵活 性 使 得 < script> 元 素 成 为 取代 
XMLHttpRequest 的 主流 Ajax 传输 协议 。) 


XHR2 通 过 在 HTTP 响 应 中 选择 发 送 合 适 的 CORS (Cross-Origin 
Resource Sharing， 跨 域 资 源 共 享 ) 允许 跨 域 访问 网 站 。 在 写本 书 时 ， 
Firefox、Safari、Chrome 的 当前 版 本 都 文 持 CORS， 而 IE8 通 过 这 里 没有 
列 出 的 专用 XDomainRequest 对 象 文 持 它 。 作 为 Web 程 序 员 ， 使 用 这 个 
功能 并 不 需要 做 什么 额外 的 工作 : 如 果 浏 览 器 文 持 XMLHttpRequest 的 
CORS 且 实现 跨 域 请 来 的 网 站 决定 使 用 CORS 人 允许 跨 域 请 求 ， 那 么 同 源 
策略 将 不 放宽 而 跨 域 请 求 就 会 正常 工作 。 


虽然 实现 CORS 文 持 的 跨 域 请 求 工作 不 需要 做 任何 事情 ， 但 有 一 些 安全 
细节 需要 了 解 。 首 先 ， 如 果 给 XMLHttpRequest 的 open0 方 法 传 入 用 户 名 
和 和 密码， 那么 它们 绝对 不 会 通过 跨 域 请 求 发 送 (这 使 分 布 式 密码 破解 
攻击 成 为 可 能 ) 。 除 外 ， 跨 域 请 求 通 常 也 不 会 包含 其 他 任何 的 用 户 证 
书 : cookie 和 HTTP 身 份 验证 令 牌 (token) 通常 不 会 作为 请 求 的 内 容 部 
分 发 送 且 任何 作为 跨 域 啊 应 来 接收 的 cookie 都 会 丢 齐 。 如 果 跨 域 请 求 需 
要 这 几 种 凭证 才能 成 功 ， 那 么 必须 在 用 send0) 发 送 请 求 前 设置 
XMLHttpRequest 的 withCredentials 属 性 为 tue。 这 样 做 不 常见 ， 但 测试 
withCredentials 的 存在 性 是 测试 浏 贤 絮 是 否 支 持 CORS 的 一 种 方法 。 


示例 8-13 是 常见 的 JavaScript 代 码 ， 它 使 用 XMLHttpRequest 实 现 HTTP 
HEAD 请 求 以 下 载 文档 中 <a> 元 素 链接 资源 的 类 型 、 大 小 和 时 间 等 信 
上 息 。 这 个 HEAD 请 求 按 需 发 起 ， 且 由 此 产生 的 链接 信息 会 出 现在 工具 提 
示 中 。 这 个 示例 假设 跨 域 链接 的 信息 不 可 用 ， 但 通过 支持 CORS 的 浏 贤 
器 党 试 下 载 它 。 


例 18-13: 使 用 HEAD 和 CORS 请 求 链接 详细 信息 


FA 


*linkdetails.js 


生 的 所 有 <a> 元 素 


bn 
[还 


生 但 没有 title 属 


旺 
本 


* 这 个 常见 的 JavaScript 模 块 查询 有 href 属 


* 并 给 它们 注册 onmouseover 事 件 处 理 程序 


T 
AE 


信息 


这 个 事件 处 理 程序 使 用 XMLHttpRequest HEAD 请 求 取得 链接 资源 的 详 


* 然 后 把 这 些 详细 信息 设置 为 链接 的 title 属 性 


en 


* 这 样 它们 将 会 在 工具 提示 中 显示 


的 


whenReady(function( ){// 是 否 有 机 会 使 用 跨 域 请 求 ? 


var supportsCORS=(new XMLHttpRequest()).withcredentials!==undefined;// 遍 历 文档 中 的 所 有 链 


接 


var links=document .getElementsByTagName('a'); 


for(var i=0;i<]links.length;i++){ 


var link=links[i]; 


vi- 


if(!11link.href)continue;// 跳 过 没有 


ey 
泪 


接 的 锚 点 


if(1Link.title)continue;// 跳 过 已 经 有 工具 提示 的 链接 


// 如 有 果 这 是 一 个 跨 域 链接 


if(link.host!==]jocation.host||link.protocol!==location.protocol) 


link.title=" 站 外 链接 ";// 假 设 我 们 不 能 得 到 任何 信息 


if(!supportsCORS)continue;// 如 果 没 有 CORS 支 持 就 退出 


// 否 则 ， 我 们 能 了 解 这 个 链接 的 更 多 信息 


// 所 以 继续 前 进 ， 注 册 事 件 处 理 程 序 ， 于 是 我 们 可 以 尝试 


让 
A 


// 注 册 事 件 处 理 程序 ， 当 鼠标 登 停 时 下 载 链接 讨 


信 / 己 \ 


if(link.addEventListener) 


link.addEventListener("mouseover",mouseoverHandler, false); 


else 


link.attachEvent("onmouseover",mouseoverHandler); 


function mouseoverHandler(e){ 


var link=e.target||e.srcElement;//<a> 元 素 


var url=link.href;// 链 接 URL 


var req=new XMLHttpRequest();// 新 请 求 


req.open("HEAD", url1);// 仅 仅 询问 头 信息 


req.onreadystatechange=function(){// 事 件 处 理 程序 


if(req.readyState!==4)return;// 忽 略 未 完成 的 请 求 


if(req.status===200){// 如 果 成 功 


var type=req.getResponseHeader("Content -Type") ;// 获 取 链 接 的 计 


Var size=req.getResponseHeader("Content-Length"); 


Ut 
A 


情况 


var date=req.getResponseHeader ("Last-Modified");// 在 


link.title=" 类 型 :"+type+"\n"+ 


下 大 小 * "+Size+"\n"+"H 肝 间 : "+date; 


提示 中 


显示 讨 nl 


tt 
ASS 
一 
I 


} 


else{// 如 果 请 求 失败 ， 且 链接 没有 "站 外 链接 "的 工具 提示 


// 那 么 显示 这 个 错误 


if(!1ink.title) 


link.title="Couldn't fetch details:\n"+ 


req.status+""+req.statusText; 


} 


}; 


redq.send(nu1L1) ;// 移 除 处 理 程序 : 仅 想 一 次 获取 这 些 头 信息 


if(link.removeEventListener) 
link.removeEventListener("mouseover",mouseoverHandler, false); 
else 

link.detachEvent("onmouseover",mouseoverHandler); 

} 


}); 


18.2 ”借助 <script> 发 送 HTTP 请 求 : JSONP 


本 章 概述 提 到 过 < script> 元 素 可 以 作为 一 种 Ajax 传输 机 制 : 只 须 设 置 
<script> 元 素 的 src 属 性 〈 假 如 它 还 没 插 入 到 document 中 ， 需 要 插入 进 
去 ) ， 然 后 浏览 器 就 会 发 送 一 个 HTTP 请 求 以 下 载 src 属 性 所 指向 的 
URL 。 使 用 < script> 元 素 进行 Ajax 传输 的 一 个 主要 原因 是 ， 它 不 受 同 
源 策 略 的 影响 ， 因 此 可 以 使 用 它们 从 其 他 的 服务 右 请 求 数 据 ， 第 二 个 
原因 是 包含 JSON 编 码 数据 的 响应 体会 自动 解码 ( 即 ， 执 行 )。 


脚本 和 安全 性 


为 了 使 用 < script> 元 素 进 行 Ajax 传输 ， 必 须 允 许 Web 页 面 可 以 执行 远 
程 服务 器 发 送 过 来 的 任何 JavaScript 代 码 。 这 意味 着 对 于 不 可 信 的 服务 
锅 ， 不 应 该 采取 该 技术 。 当 与 可 信 的 服务 右 通 信 时 ， 要 提防 攻击 者 可 
能 进入 服务 历 中 ， 然 后 墨客 会 接管 你 的 网 页 ， 运 行 他 目 己 的 代码 ， 并 
显示 任何 他 想 要 的 内 容 ， 还 表现 得 束 像 这 些 内 容 本 束 来 目 你 的 网 站 。 


需要 注意 的 是 ， 这 种 方式 普遍 用 于 可 信 的 第 三 方 脚本 ， 特 别 是 在 页 面 
中 仍 入 广告 和 “组 件 ”。 作 为 Ajax 传输 使 用 的 <script> 与 可 信 的 Web 服 务 
通信 ， 没 有 比 这 更 危险 的 了 。 


这 种 使 用 < script> 元 素 作为 Ajax 传输 的 技术 称 为 JSONP， 若 HTTP 请 求 
所 得 到 的 响应 数据 是 经 过 JSON 编 码 的 ， 则 适合 使 用 该 技术 。P 代 表 “ 填 
充 " 或 “前 级 "这 个 一 会 儿 再 作 和 解释 [ 纪 。 


假设 你 已 经 写 了 一 个 服务 ， 它 处 理 GET 请 求 并 返回 JSON 编 码 的 数据 。 
同 源 的 文档 可 以 在 代码 中 使 用 XMLHttpRequest 和 JSON.parse()， 束 像 例 
18-3 中 的 代码 一 样 。 假 如 在 服务 器 上 启用 了 CORS， 在 新 的 浏览 器 下 ， 
跨 域 的 文档 也 可 以 使 用 XMLHttpRequest 享 受到 该 服务 。 在 不 支持 CROS 
的 旧 浏 览 器 下 ， 跨 域 文档 只 能 通过 <script> 元素 访问 这 个 服务 。 使 用 
JSONP，JSON 了 响应 数据 (理论 上 ) 是 合法 的 JavaScript 代 码 ， 当 它 到 达 
时 浏览 器 将 执行 它 。 相 反 ， 不 使 用 JSONP， 而 是 对 JSON 编 码 过 的 数据 
解码 ， 结 果 还 是 数据 ， 并 没有 做 任何 事情 。 


这 就 是 JSONP 中 P 的 意义 所 在 。 当 通过 < script > 元 素 调 用 数据 时 ， 啊 应 
内 容 必须 用 JavaScript 函 数 名 和 圆 括号 包 庄 起 来 。 而 不 是 发 送 这 样 一 段 
JSON 数 据 : 


[1,2,{"buckle":"my shoe"}] 


它 会 发 送 这 样 一 个 包 于 后 的 JSONMN 应 : 


handleResponse( 


[1,2,{"buckle":"my shoe"}] 


) 


包 囊 后 的 啊 应 会 成 为 <script> 元 友 的 内 容 ， 它 完 判 断 JSON 编 码 后 的 数 
据 (毕竟 就 是 一 个 JavaScript 表 达 式 ) ， 然 后 把 它 传递 给 
handleResponse() 函 数 ， 我 们 可 以 假设 ， 文 档 会 拿 这 些 数据 做 一 些 有 用 


的 事情 。 


为 了 可 行 起 见 ， 我 们 必须 通过 某 种 方式 告诉 服务 ， 它 正在 从 一 个 < 
script> 元 素 调 用 ， 必 须 返 回 一 个 JSONP 响 应 ， 而 不 应 该 是 普通 的 JSON 
响应 。 这 个 可 以 通过 在 URL 中 添加 一 个 查询 参数 来 实现 ， 例 如， 追加 "? 
json”( 或 &json) 。 


在 实践 中 ， 文 持 JSONP 的 服务 不 会 强制 指定 客户 端 必须 实现 的 回调 函 

数 名 称 ， 比 如 handleResponse。 相 反 ， 它 们 使 用 查询 参数 的 值 ， 人 允许 客 
户 端 指 定 一 个 函数 名 ， 然 后 使 用 函数 名 去 填充 啊 应 。 例 18-14 使 用 一 个 
名 为 jsonp 的 查询 参数 来 指定 回调 函数 的 名 称 。 许 多 文 持 JSONP 的 服务 
都 能 分 辨 出 这 个 参数 名 。 男 一 个 常见 的 参数 名 称 是 callback， 为 了 让 使 
用 到 的 服务 支持 类 似 特 殊 的 需求 ， 就 需要 在 代码 上 做 一 些 修 改 了 。 


例 18-14 定 义 了 一 个 getJSONP0O 函 数 ， 它 发 送 JSONP 请 求 。 这 个 例子 有 
点 复杂 ， 有 几 点 值得 注意 。 首 先 ， 注 意 它 是 如 何 创 建 一 个 新 的 < script 
> 元 素 ， 设 置 其 URL， 并 把 它 插入 到 文档 中 的 。 正 是 该 插入 操作 触发 
HTTP 请 求 。 其 次 ， 注 意 例 18-14 为 每 个 请 求 都 创建 了 一 个 全 新 的 内 部 回 
调 函 数 ， 回 调 函 数 作 为 getJSONP0 画 数 的 一 个 属性 存储 起 来 。 最 后 要 注 
II 删除 脚本 元 素 ， 并 删除 自 


例 18-14: 使 用 script 元 素 发 送 JSONP 请 求 


// 根 据 指定 的 URL 发 送 一 个 JSONP 请 求 


// 然 后 把 解析 得 到 的 响应 数据 传递 给 回调 函数 


E 该 请 求 的 回调 函数 的 名 称 


et 
IC 


// 在 URL 中 添加 一 个 名 为 jsonp 的 查询 参数 ， 


function getJSONP(url,callback)f{// 为 4 


:次 请 求 创建 


个 唯 


| 


的 


Var cbnum="cb"+getJSONP.counter++;// 每 


次 


增 计数 器 


| 


var cbname="getJSONP."+cbnum;// 作 为 JSONP 画 数 的 
// 将 回调 函数 名 称 以 表 六 


// 使 


二 


码 的 形式 添加 到 URL 的 查询 部 分 


// 可 能 使 


I 


jsonp 作 为 参数 名 ， 一 些 支 持 JSONP 的 服务 


他 的 参数 名 ， 比 如 callback 


if(url.indexof("?")===-1)//URL 没 


url+="?3jsonp="+cbname;// 作 为 查询 部 分 添加 
else// 和 否则 


ur1l+="&jsonp="+cbname;// 作 为 新 的 参数 添加 它 
// 创 建 script 元 素 


于 发 送 请 求 


| 


var script=document.createElement("script");// 定 义 将 被 脚本 执行 的 
getJSONP[cbnum]=function(response)t{ 


try{ 


callback(response ) ;// 处 理 


响应 数据 
} 
finally{// 即 使 回调 函数 或 响应 抛 出 错误 


delete getJSONP[cbnum] ;// 删 除 该 函数 


script.parentNode.removeChild(script );// 移 除 script 元 素 


};// 立 即 触发 HTTP 请 求 


script.src=url;// 设 置 脚本 的 URL 


document .body .appendchild(script);// 把 它 添加 到 文档 中 


} 


getJSONP .counter=0;// 用 于 创建 唯一 回调 函数 名 称 的 计数 器 


18.3 ”基于 服务 器 端 推送 事件 的 Comet 技 术 
在 服务 器 问 推 送 事件 的 标准 草案 中 定义 了 一 个 EventSource 对 象 ， 人 简化 


了 Comet 应 用 程序 的 编写 可 以 传递 一 个 URL 给 EventSource() 构 造 画 数 ， 
然后 在 返回 的 实例 上 监听 消息 事件 。 


Var ticker=new EventSource("stockprices.php"); 
ticker ,onmessage=function(e){ 


var type=e.type; 


var data=e.data;// 现 在 处 理事 件 类 型 和 事件 的 字符 串 数据 


} 


与 message 事 件 关 联 的 事件 对 象 有 一 个 data 属 性 ， 这 个 属性 保存 服务 器 
作为 该 事件 的 负载 发 送 的 任何 字符 串 。 如 同 其 他 类 型 的 事件 一 样 ， 该 
对 象 还 有 一 个 type 属 性 ， 默 认 值 是 message， 事 件 源 可 以 修改 这 个 值 。 
onmessage 事 件 处 理 程序 接收 从 一 个 给 定 的 服务 器 事件 源 发 出 的 所 有 事 
件 ， 如 果 有 必要 ， 也 可 以 根据 type 属 性 派发 一 个 事件 。 


服务 吉 端 推送 事件 的 协议 很 简单 。 客 户 端 〈 创 建 一 个 EventSource 对 象 
时 会 ) 建立 一 个 到 服务 器 的 连接 ， 服 务 器 保持 这 个 连接 处 于 打开 状 
仿 。 当 发 生 一 个 事件 时 ， 服 务 右 剖 在 连接 中 写 入 儿 行 文本 ， 抛 给 客户 
端的 事件 可 能 看 起 来 古 这 样 : 


event: bid 设置 时 间 对 象 的 类 型 
data: GOOG 设置 data 属 性 
data: 999 追加 新 的 一 行 和 更 多 的 数据 


一 个 空 行 会 触发 消息 事件 


该 协议 还 有 一 些 额 外 的 细节， 比如 允许 事件 携 训 给 定 ID ， 人 然后 再 次 连 
上 的 客户 端 香 诉 服务 夯 它 收 到 的 最 后 一 个 事件 的 ID， 这 样 服务 天 束 可 
以 重新 发 送 客户 端 错过 的 事件 。 但 是 这 些 细节 在 此 处 并 不 重要 。 


Comet 染 构 的 一 个 常见 应 用 是 聊天 应 用 ， 聊 天 客户 问 可 以 通过 
XMLHttpRequest 同 聊天 室 发 送 新 的 消息 ， 也 可 以 通过 EventSource 对 象 
网 人 。 例 18-15 展 示 了 使 用 EventSource 写 一 个 聊天 客户 端 是 多 
么 容易 。 


示例 18-15: 一 个 使 用 EventSource 的 简易 聊天 客户 端 


<script> 


window.onload=function( ){// 注 意 一 些 UI 细节 


var nick=prompt("Enter your nickname");// 获 取 用 户 昵称 


var input=document .getElementById("input");// 找 出 jnput 表 单元 素 


input ,focus() ;// 设 置 键盘 焦点 


// 通 过 EventSource 注 册 新 消息 的 通知 


Var chat=new EventSource("/chat"); 


chat .onmessage=function(event ){// 当 捕获 一 条 消息 时 


var msg=event .data;// 从 事件 对 象 中 取得 文本 数据 


var node=document .createTextNode(msg) ;// 把 它 放 入 一 个 文本 节点 


var div=document.createElement("div");// 创 建 一 个 <div> 


div.appendCchild(node);// 将 文本 节点 插入 divf 


UD 


document .body.insertBefore(div,input);// 将 div 插 入 input 之 前 


input.scrollIntoView( );// 保 证 input 元 素 可 见 


// 使 


XMLHttpRequest 


户 的 消息 发 送 给 服务 器 


[ 电 


input .onchange=function(){// 用 户 完成 输入 


var msg=nick+":"+input.value;// 组 合用 户 名 和 用 户 输入 的 信息 


var xhr=new XMLHttpRequest();// 创 建新 的 XHR 


xhr .open("POST", "/chat");// 发 送 到 /chat 


Nes 


xhr.setRequestHeader("Content -Type", // 指 明 为 普通 的 UTF- 8 文本 


"text/plain;charset=UTF-8"); 


xhr .send(msg);// 发 送 消 息 


input .value="";// 准 备 下 次 输入 

} 

}; 

</script> 

<!-- 聊 天 的 UI 只 是 一 个 单行 文本 域 - - > 

< 1!-- 新 的 聊天 消息 会 插入 input 域 之 前 - - > 


<input id="input"style="width:100%"/> 


在 写 这 本 书 的 时 候 ，Chrome 和 Safari 已 开始 文 持 EventSource，Mozilla 也 
准备 在 Firefox 4.0 之 后 的 第 一 个 版 本 中 实现 它 。 其 XMLHttpRequest 实 现 
在 下 载 过 程 中 会 (为 readyState 3) 触发 readystatechange 事 件 的 浏览 器 
(例如 FireFox) ， 可 以 很 容易 地 使 用 XMLHttpRequest 模 拟 
EventSource。 例 18-16 展 示 了 如 何 完 成 。 配 合 这 个 模拟 模块 ， 例 18-15 束 
可 以 工作 在 Chrome、Safari 和 Firefox 下 了 。 《〈 例 18-16 在 下 或 Opera 下 不 
0 直到 它们 的 XMLHttpRequest 实 现在 下 载 过 程 中 能 够 产生 事件 为 


例 18-16: 用 XMLHttpRequest 模 拟 EventSource 


// 在 不 支持 EventSource API 的 浏览 器 里 进行 模拟 


i 


// 需 要 有 一 个 XMLHttpRequest 对 象 在 新 数据 写 到 长 期 存在 的 HTTP 连 接 中 时 发 送 readystatechange 事 


// 注 意 ， 这 个 API 的 实现 是 不 完整 的 


// 它 不 支持 readyState 属 性 、close( ) 方 法 、open 和 error 事 件 


未 
一 <- 


注册 的 一 这 个 版 本 还 没有 定义 add EventListener() 方 法 


// 消 息 事 件 也 是 通过 onmessage 属 ' 


if(window.EventSource===undefined){// 如 果 未 定义 EventSource 对 象 


window.EventSource=function(url1){// 像 这 样 进行 模拟 


var xhr;//HTTP 连 接 器 


var evtsrc=this;// 在 事件 处 理 程序 中 用 到 


var charsReceived=0;// 这 样 我 们 就 可 以 知道 什么 是 新 的 


性 响应 类 型 


hr 


var type=null;// 检 查 属 


var data="";// 存 放 消 息 数据 


var eventName="message";// 事 件 对 象 的 类 型 字段 


var lastEventId="";// 用 于 和 服务 器 再 次 同步 


var retrydelay=1009;// 在 多 个 连接 请 求 之 间 设置 延迟 


var aborted=false;// 设 置 为 true 表 示 放 弃 连 接 


// 创 建 一 个 XHR 对 象 


xhr=new XMLHttpRequest() ;// 定 义 一 个 事件 处 理 程 请 


xhr.onreadystatechange=function(){ 


Switch(xhr,readyState){ 


case 3:processData();break;// 当 数据 块 到 达 时 


case 4:reconnect();break;// 当 请 求 关 闭 的 时 候 


};// 通 过 connect( ) 创 建 一 个 长 期 存在 的 连接 


connect ( ) ;// 如 果 连 接 正常 关闭 ， 等 待 1 秒 钟 再 尝试 连接 


function reconnect(){ 


if(aborted)return;// 在 终止 连接 后 不 进行 重 连 操作 


far 


if(xhr.status>=300)return;// 在 报错 之 后 不 进行 重 连 操作 


setTimeout (connect,retrydelay );// 等 待 1 秒 后 进行 重 连 


};// 这 里 的 代码 展示 了 如 何 建立 一 个 连接 


function connect(){ 


charsReceived=0; 


type=null; 


xhr.open("GET", url); 


xhr.setRequestHeader("Cache-Control", "no-cache"); 


if(lastEventId)xhr.setRequestHeader ("Last-Event-ID",1lastEventId); 


xhr.send(); 


// 每 当 数 据 到 达 的 时 候 ， 会 处 理 并 触发 onmessage 处 理 程序 


// 这 个 函数 处 理 Server -Send Events 协 议 的 细节 


function processData( ){ 


if(!1type){// 如 果 没 有 准备 好 ， 先 检查 响应 类 型 


type=xhr .getResponseHeader('Content-Type'); 


if(type!=="text/event-stream"){ 


aborted=true; 


xhr.abort(); 


return; 


// 记 录 接 收 的 数据 


// 获 得 响应 中 未 处 理 的 数据 


var chunk=xhr.responseText.substring(charsReceived); 


charsReceived=xhr .responseText .length;// 将 大 块 的 文本 数据 分 成 多 行 并 遍历 它们 


var lines=chunk.replace(/(\r\n|\r|\n)$/,"").split(/A\r\n|\r|\n/); 


for(var i=0;i<]lines.length;i++){ 


Var line=lines[i],pos=line.indexof(":"),name,value="",; 


if(pos==0)continue;// 忽 略 注 释 


if(pos>0){// 字 段 名 称 : 值 


name=line. substring(0,pos); 


value=line.substring(pos+1); 


if(value.charAt(0)=="")value=value.substring(1); 


else name=line;// 只 有 字段 名 称 


switch(name){ 


case"event":eventName=value;break; 


case"data":data+=value+"\n";break; 


case"id":lastEventId=value;break; 


case"retry":retrydelay=parseIint(value)||1000;break; 


default :break;// 忽 上 略 其 他 行 


} 
if(1ine===""){// 一 个 空 行 意味 着 发 送 事件 
if(evtsrc.onmessage&&data!==""){// 如 


if(data.charAt(data.length-1)=="\n") 


data=data.substring(0, data.length-1); 


新 行 ， 


习 也 


就 裁剪 齐 


evtsrc.onmessage({// 这 里 是 一 个 伪造 的 事件 对 象 


type:eventName, // 事 件 类 型 


data:data, // 事 件数 据 


origin:ur1// 数 据 源 

}); 

} 

data="";，; 

} 

} 

} 

}; 

} 

我 们 通过 一 个 服务 器 示例 结束 了 Comet 架 构 的 探讨 。 例 18-17 展 示 了 一 
个 用 服务 右 端 JavaScript 为 Node 编 写 的 定制 HITP 服 务 右 。 当 一 个 客户 端 
请 求 根 URL“/* 时 ， 它 会 把 例 18-15 里 展示 的 聊天 客户 端 代码 和 例 18-16 中 
的 模拟 代码 发 送 到 客户 端 。 当 客户 端 创建 了 一 个 指向 URL"/chat" 的 GET 
请 求 时 ， 它 会 用 一 个 数组 来 保存 啊 应 数据 流 并 保持 连接 处 于 打开 状 

态 。 当 客户 端 发 起 针对 "chat"POST 请 求 时 ， 它 会 将 响应 的 主体 部 分 作 
为 一 条 聊天 消息 使 用 并 写 入 数据 ， 以 "data:" 作 为 Server-Sent Events 的 前 
缀 ， 添 加 到 每 个 已 打开 的 响应 数据 流 上 “。 如 果 安 装 了 Node， 那 就 可 以 


在 本 地 运行 这 个 服务 恬 例 了 于 。 它 监听 8000 端 口 ， 因 此 在 启动 服务 右 之 
后 ， 束 可 以 用 浏览 絮 访 问 http://localhost:8000 来 进行 聊天 。 


例 18-17: 定制 的 Server-Sent Events 聊 天 服务 器 


// 这 个 例子 用 的 是 服务 器 的 JavaScript， 运 行 在 NodeJS 平 台 上 


// 该 聊天 室 的 实现 比较 简单 ， 而 且 是 完全 匿名 的 


了 件 流 


// 将 新 的 消息 以 POST 发 送 到 /chat 地 址 ， 或 者 以 GET 形 式 从 同一 个 URL 获 取消 息 的 文本 / 


出 


// 创 建 一 个 GET 请 求 到 "/" 来 返回 一 个 简单 的 HTML 文 件 


// 这 个 文件 包括 客户 端 聊天 UI 


var http=require('http');//NodeJS HTTP 服 务 器 API 


// 聊 天 客户 端 使 用 的 HTML 文 件 ， 在 下 面 会 用 到 


var clientui=require('fs').readFileSync("chatclient.htm]l"); 


var emulation=require('fs').readFileSsync("EventSourceEmulation.js");//ServerResponse 对 


象 数组 ， 用 于 接收 发 送 的 事件 


册 


var clients=[];// 每 20 秒 发 送 一 条 注释 到 客户 端 


// 这 样 它们 就 不 会 关闭 连接 再 


[huill 
Wh 


setInterval(function(){ 


clients.forEach(function(client){ 


client.write(":ping?n"); 


}); 


}, 20000 ) ; // 创 建 一 个 新 服务 器 


var server=new http.Server();// 当 服务 器 获取 到 一 个 新 的 请 求 ， 运 行 回调 函数 


server.on("request",function(request,response){// 解 析 请 求 的 URL 


var Url=require('url').parse(request.url);// 如 果 请 求 是 发 送 到 "/"， 服 务 器 就 发 送 客 户 端 聊天 室 UI 


if(url.pathname==="/"){// 聊 天 客户 端的 UI 请 求 


response.writeHead(200, {"Content-Type":"text/html"}); 


response.write("<script>"+emulation+"</script>"); 


response.write(clientui); 


response.end( ); 


return; 


| 


// 如 果 请 求 是 发 送 到 "/chat" 之 外 的 地 址 ， 则 返 


404 


else if(url.pathname!=="/chat"){ 


response.writeHead(404); 


response.end( ); 


return; 


// 如 果 请 求 类 型 是 post ， 那 么 就 有 一 个 客户 端 发 送 了 一 条 新 的 消息 


if(request.method==="POST"){ 


request.setEncoding("utf8"); 


0D 


var body="";// 在 获取 到 数据 之 后 ， 将 其 添加 到 请 求 主体 


request.on("data", function(chunk){body+=chunk;});// 当 请 求 完 成 时 


// 并 将 消息 传播 到 所 有 处 于 监听 状态 的 客户 端 中 


request.on("end",function(){ 


， 发 送 一 个 空 响应 


response.writeHead(200);// 响 应 该 请 求 


response.end();// 将 消息 转换 成 文本 /事件 流 格式 


// 确 保 每 一 行 的 前 缀 都 是 "data:" 


// 并 以 两 个 换行 符 结 下 


pa! 


message='data:'+body.replace('\n', '\ndata:')+"\r\n\r\n";// 发 送 消息 给 所 


clients.forEach(function(client){client.write(message);}); 


}); 


//Otherwise,a client is requesting a stream of messages 


else{// 如 果 不 是 POST 类 型 的 请 求 ， 则 客户 端正 在 请 求 一 组 消息 


response.writeHead(200, {'Content-Type':"text/event-stream"}); 


response.write("data:Connected\n\n");// 如 果 客 户 端 关 闭 了 连接 


// 从 活动 客户 端 数组 中 删除 对 应 的 响应 对 象 


request.connection.on("end",function(){ 


clients.splice(clients.indexof(response),1); 


response.end( ); 


});// 记 下 响应 对 象 ， 这 样 就 可 以 向 它 发 送 未 来 的 消息 


clients.push(response); 


} ) ; // 启 动 服务 器 ， 监 听 80600 端 口 ， 访 问 http://localhost :8000/ 来 进行 使 用 它 


监听 的 客 


户 端 


server.listen(8000); 


[1]_Ajax 是 Asynchronous JavaScript and XML 的 缩写 (未 全 部 大 写 ) 。 这 
个 术语 由 Jesse James Carrett 创 造 ， 最 早出 现在 他 于 2005 年 2 月 发 表 的 文 
章 "Ajax:A New Approach to Web 
Applications" (http:www.adaptivepath.com/publications/essays/archives/00 
0385.php) 。"Ajax" 曾 经 是 一 个 流行 多 年 的 术语 ， 现 在 它 只 不 过 是 一 个 
有 用 的 术语 ， 来 描述 基于 用 脚本 操纵 HITTP 请 求 的 Web 应 用 织 构 。 


[2].Comet 这 个 名 字 是 由 Alex Russell 在 "Comet:Low Latency Data for the 
Browser" ( http://infrequently.org/2006/03/comet-low-latency-data-for-the- 
browser/) 中 创造 。 这 个 名 字 可 能 是 对 Ajax 开 了 个 玩笑 ，Comet 和 Ajax 
都 是 美国 的 洗涤 日 用 品牌 。 


[3] 这 种 类 型 的 图 片 也 称 为 网 页 信 标 《web bug) 。 当 网 页 信 标 不 是 与 当 
前 网 页 服务 右 而 是 其 他 服务 右 交 流 信息 时 ， 会 担心 隐私 内 容 。 这 种 第 
三 方 网 页 信 标 的 方式 常用 于 统计 点 击 次 数 和 网 站 流量 分 析 。 


[由 Bob Ippolito 在 2005 年 提 出 了 JSoNP 
(http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/) 。 


第 19 章 jQuery 类 库 


JavaScript 的 核心 API 设 计 得 很 简 单 ， 但 由 于 浏 贤 絮 之 间 的 严重 不 兼容 
性 ， 导 致 客户 端的 API 过 于 复杂 。IE9 的 到 来 ， 绥 解 了 这 种 不 兼容 性 导 
致 的 糟糕 境况 ， 然 而 使 用 JavaScript 框 架 或 工具 类 库 ， 能 简化 通用 操 
作 ， 能 隐藏 浏览 器 之 间 的 差异 ， 这 让 很 多 程序 员 在 开发 Web 应 用 时 变 得 
更 简单 。 撰 写本 书 时 ， 最 流行 和 广泛 采用 的 类 库 之 一 就 是 jQuery tH-。 


jQuery 类 库 如 此 广泛 地 使 用 ， 作 为 Web 开 发 者 ， 我 们 必须 熟悉 它 : 即便 
没有 在 目 己 的 代码 中 使 用 它 ， 也 很 有 可 能 在 他 人 写 的 代码 中 遇见 。 泣 
运 的 是 ，jQuery 足 够 小 巧 和 稳定 ， 本 书 就 可 以 把 它 讲 述 清 楚 。 本 间 将 全 
面 介绍 jQuery， 第 四 部 分 还 包括 jQuery 的 快速 参考 。 在 第 四 部 分 ， 

jQuery 方法 没有 设 独 立 词 条 ， 但 jQuery 为 每 个 方法 都 给 出 了 概要 说 明 。 


jQuery 能 让 你 在 文档 中 轻松 找到 关心 的 元 素 ， 并 对 这 些 元 素 进行 操作 : 
添加 内 容 、 编 辑 HITML 属 性 和 CSS 属 性 、 定 义 事件 处 理 程序 ， 以 及 执行 
动画 。 它 还 拥有 Ajax 工具 来 动态 发 起 HTTP 请 求 ， 以 及 一 些 通用 的 工具 
函数 来 操作 对 象 和 数组 。 


正如 其 名 ，jQuery 类 库 聚 焦 于 查询 。 一 个 典型 查询 使 用 CSS 选 择 器 来 识 
别 一 组 文档 元 素 ， 并 返回 一 个 对 象 来 表示 这 些 元 系 。 返 回 的 对 象 提 供 
了 大 量 有 用 的 方法 来 批量 操作 匹配 的 元 素 。 这 些 方法 会 尽 可 能 返回 调 
用 对 象 本 吴 ， 这 使 得 简洁 的 链 式 调用 成 为 可 能 。jQuery 如 此 强大 和 好 
用 ， 关 键 得 益 于 以 下 特性 : 

丰富 强大 的 语法 (CSS 选 择 器 ) ， 用 来 查询 文档 元 素 

.高 效 的 查询 方法 ， 用 来 找到 与 CSS 选 择 器 匹配 的 文档 元 素 集 

一 套 有 用 的 方法 ， 用 来 操作 选中 的 元 素 


"强大 的 六 数 式 编程 报 巧 ， 用 来 批量 操作 元 妈 集 ， 而 不 是 每 次 只 操作 单 


-简洁 的 语言 用 法 ( 链 式 调用 ) ， 用 来 表示 一 系列 顺序 操作 


本 章 首 先 会 介绍 如 何 使 用 jQuery 来 实现 简单 查询 并 操作 其 结果 。 接 下 来 
的 章节 会 讲解 : 


:如 何 设置 HTML 属 性 、CSS 样 式 和 类 、HTML 表 单 的 值 和 元 素 内 容 、 位 
置 高 宽 ， 以 及 数据 


如何 改变 文档 结构 : 对 元 素 进 行 插 入 、 替 换 、 包 装 和 删除 操作 

.如 何 使 用 jQuery 的 跨 浏览 器 事件 模型 

-如何 用 jQuery 来 实现 动画 视觉 效果 

jQuery 的 Ajax 工具 ， 如 何 用 脚本 来 发 起 HITP 请 求 
jQuery 的 工具 函数 

jQuery 选择 器 的 所 有 语法 ， 以 及 如 何 使 用 jQuery 的 高 级 选择 方法 
.如何 使 用 和 编写 插件 来 对 jQuery 进行 扩展 

.jQuery UI 类 库 

19.1 jQuery 基础 

jQuery 类 库 定义 了 一 个 全 局 函数 .jQuery()。 该 函数 使 用 频繁 ， 因 此 在 
类 库 中 还 给 它 定 义 了 一 个 快捷 别名 : $。 这 是 jQuery 在 全 局 命名 空间 中 
定义 的 唯一 两 个 变量 | 人。 


这 个 拥有 两 个 名 字 的 全 局 方法 是 jQuery 的 核心 查询 方法 。 例 如 ， 下 面 的 
代码 能 获取 文档 中 的 所 有 < div> 元 素 : 


Var divs=$("div"); 


该 方法 返回 的 值 表 示 零 个 或 多 个 DOM 元 素 ， 这 就 是 jQuery 对 象 。 注 

意 : jQuery0 有 是 工厂 函数 ， 不 是 构造 男 数 ， 它 返回 一 个 者 创建 的 对 象 
但 并 没有 和 new 关 键 字 一 起 使 用 。jQuery 对 象 定义 了 很 多 方法 ， 可 以 用 
来 操作 它们 表示 的 这 组 元 素 ， 本 章 中 的 大 部 分 文字 将 用 来 阐释 这 些 方 
法 。 例 如 ， 下 面 这 段 代码 可 以 用 来 找到 所 有 拥有 details 类 的 p 元 素 ， 将 
其 高 亮 显 示 ， 并 将 其 中 隐藏 的 p 元 素 快 速 显 示 出 来 : 


$("p.details").css("background-color", "yellow").show("fast"),; 


寺 面 的 css() 方 法 操作 的 jQuery 对 象 是 由 $0 返回 的 ，css0 方 法 返回 的 也 是 
这 个 对 象 ， 因 此 可 以 继续 调用 show() 方 法 ， 这 就 是 链 式 调用 ， 很 简洁 紧 
竣 。 在 jQuery 编程 中 ， 链 式 调用 这 个 习惯 用 语 很 普遍 。 再 举 个 例子 ， 下 
面 的 代码 可 以 找到 文档 中 拥有 "clicktohide"CSS 类 的 所 有 元 素 ， 并 给 每 
一 个 元 素 痢 注册 一 个 事件 处 理 范 数 。 当 用 户 和 单 击 元 素 时 ， 会 调用 事件 
处 理 程序 ， 使 得 该 元 素 绥 慢 向 上 收缩 ， 最 终 消失 : 


$(".clicktohide").click(function(){$(this).slideUp("slow");}); 
获取 jQuery 


jQuery 类 库 是 免费 软件 ， 可 以 从 http:/Wjquery.com 下 载 该 软件 。 下 载 后 ， 
像 下 面 这 样 通过 <script> 元 素 在 Web 页 面 中 引入 : 


<script src="jquery-1.4.2.min.js"></script> 


文件 名 中 的 "min" 表 示 引 入 的 是 压缩 版 本 的 类 库 ， 已 经 去 除 不 必要 的 注 
释 和 至 格 ， 变 量 名 等 内 部 标识 符 也 替换 成 了 更 短 的 名 字 。 


在 Web 应 用 中 引入 jQuery 的 另 一 个 方式 是 使 用 内 容 分 发 网 络 ， 比 如 以 下 
URL 地 址 : 


http://code.jquery.com/jquery-1.4.2.min.js 
http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js 
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery .min.js 


本 章 讲述 的 是 jQuery 1.4 版 本 。 如 果 使 用 的 是 其 他 版本， 在 必要 时 请 替 
换 上 面 URL 中 的 版 本 号 “1.4.2” 6。 如 果 使 用 Google CDN， 可 以 


用 “1.4” 来 获取 1.4.x 系 列 中 的 最 新 版 本 ， 或 者 用 “1” 来 获取 版 本 号 小 

于 “2.0” 的 最 新 版 本 。 通 过 上 面 这 些 众 所 周知 的 URL 来 加 载 jQuery 的 最 

大 好 处 是 ， 因 为 jQuery 很 流行 ， 访 问 你 的 网 站 的 用 户 ， 很 有 可 能 在 访问 

已 经 下 载 过 jQuery 类 库 ， 保 存在 浏览 器 缓存 中 ， 无 须 重 新 
a 


19.1.1 jQuery0 画 数 


在 jQuery 类 库 中 ， 最 重要 的 方法 是 jQuery() 方 法 〈 也 就 是 $0) 。 它 的 功 
能 很 强大 ， 有 4 种 不 同 的 调用 方式 。 


第 一 种 也 是 最 常用 的 调用 方式 是 传递 CSS 选 择 右 (字符 串 ) 给 $() 方 
法 。 当 通过 这 种 方式 调用 时 ，$0 方 法 会 返回 当前 文档 中 匹配 该 选择 珊 
的 元 素 集 。jQuery 文 持 大 部 分 CSS3 选 择 絮 语法 ， 还 支持 一 些 目 己 的 扩 
展 语 法 。19.8.1 节 将 详细 阐述 jQuery 选择 器 语法 。 还 可 以 将 一 个 元 素 或 
jQuery 对 象 作为 第 二 参数 传递 给 $0 方 法 ， 这 时 返回 的 是 该 特定 元 素 或 
元 素 集 的 子 元 聂 中 匹配 选择 希 的 部 分 。 这 第 二 参数 是 可 选 的 ， 定 义 了 
元 素 碍 询 的 起 始点 ， 经 稍 称 为 上 下 文 (context) 。 


第 二 种 调用 方式 是 传递 一 个 Element、Document 或 Window 对 象 给 $0 方 
法 。 在 这 种 情况 下 ，$0 方 法 只 须 简 单 地 将 该 Element、Document 或 
Window 对 象 封 装 成 jQuery 对 象 并 返回 。 这 样 可 以 使 得 能 用 jQuery 方法 
来 操作 这 些 元 素 而 不 用 使 用 原生 DOM 方 法 。 例 如 ， 在 jQuery 程序 中 ， 
经 第 可 以 看 见 $(document) 或 $(this)。jQuery 对 象 可 以 表示 文档 中 的 多 个 
元 票 ， 也 可 以 传递 一 个 元 权 数 组 给 $() 方 法 。 在 这 种 情况 下 ， 返 回 的 
jQuery 对 象 表示 该 数组 中 的 元 素 集 。 


第 三 种 调用 方式 是 传递 HTML 文 本 字符 串 给 $0 方 法 。 在 这 种 调用 方式 
下 ，jQuery 会 根据 传 入 的 文本 创建 好 HTML 元 素 并 封装 为 jQuery 对 象 返 
回 。jQuery 不 会 将 刚 创建 的 元 素 自 动 插入 文档 中 ， 可 以 使 用 19.3 节 描述 
的 jQuery 方法 来 轻松 地 将 元 素 插入 想 要 的 地 方 。 注 意 : 在 这 种 调用 方式 
下 ,不 可 传 入 纯 文本 ， 因 为 jQuery 会 把 纯 文本 当成 CSS 选 择 右 来 解析 。 
当 使 用 这 种 调用 风格 时 ， 传 递 给 $0 方法 的 字符 串 必 须 至 少 包公 一 个 市 
有 人 尖 角 括号 的 HTML 标 签 。 


通过 第 三 种 方式 调用 时 ，$0 接 受 可 选 的 第 二 参数 。 可 以 传递 Document 
对 和 象 来 指定 与 所 创建 元 素 相 关联 的 文档 。 (比如 ， 当 创建 的 元 素 需 要 
插入 iframe 里 时 ， 需 要 显 式 指定 该 iframe 的 document 对 象 。) 第 二 参数 


还 可 以 是 object 对 象 。 此 时 ， 假 设 该 对 象 的 属性 表示 HTML 属 性 的 键 / 值 
对 ， 这 坚 属 性 将 设置 到 所 创建 的 对 象 上 。 当 第 二 参数 对 象 的 属性 名 
是 "css"、"html" 、"text"、"width"、"height"、"offset"、"val" 或 "data"， 
或 者 属 性 名 是 jQuery 事件 处 理 程序 注册 方法 名 时 ， jQuery 将 调用 新 创建 
元 素 上 的 同名 方法 ， 并 传 入 属性 值 。 (css()、 htmlO 、 textO 等 方法 将 在 
19.2 节 讲述 ， 事 件 处 理 程 序 注册 方法 将 在 19.4 节 讲述 。) 例如 : 


var img=$("< img/>",// 新 建 一 个 <img> 元 素 


{src:url,// 具 有 HTML 属 性 


css:{borderwidth:5},//CSS 样 式 


click:handleclick// 和 事件 处 理 程序 


}); 


最 后 ， 第 4 种 调用 方式 是 传 入 一 个 函数 给 $0 方 法 。 此 时 ， 当 文档 加 载 完 
毕 旦 DOM 可 操作 时 ， 传 入 的 函数 将 被 调用 。 这 是 例 13-5 中 onLoad() 函 
数 的 jQuery 版 本 。 在 jQuery 程序 中 ， 在 jQuery0O 里 定义 一 个 匿名 函数 非 
常常 见 : 


jQuery(function( ){// 文 档 加 载 完 毕 时 调用 


// 所 有 jQuery 代码 放 在 这 里 


}); 


有 了 时 还 可 以 看 见 $(f) 的 老式 和 完整 写法 : $(document).ready(f)。 


传 给 jQuery0 的 函数 在 被 调用 时 ，this 指 向 document 对 象 ， 唯 一 的 参数 指 
这 意味 着 可 以 释放 全 局 的 $0 函数 ， 但 在 内 部 依旧 可 以 
延续 该 习惯 : 


jQuery .noCconflict();// 还 原 $( ) 为 初始 值 


jQuery(function($){// 让 $( ) 成 为 jQuery 对 象 的 局 部 别名 


//jQuery 代 码 放 在 这 里 


}); 


通过 $0 注 册 的 函数 将 在 DOMContentLoaded 事 件 触 发 时 由 jQurey 触 发 。 
当 浏 览 右 不 支持 该 事件 时 ， 会 在 load 事 件 触 发 时 由 jQurey 触 发 。 这 意味 
着 文档 已 经 解析 完毕 ， 但 图 片 等 外 部 资源 有 可 能 还 未 加 载 。 如 果 在 
人 传递 的 函数 会 在 $0 返 回 之 前 立刻 调 


jQuery 类 库 还 使 用 jQuery() 函 数 作为 其 命名 空间 ， 在 下 面 定义 了 不 少 工 
具 函 数 和 属性 。 上 面 提 到 过 的 jQuery.noConflict0 束 是 其 中 一 个 工具 函 
数 。 还 包括 用 于 通用 遍历 的 jQuery.each()， 以 及 用 来 解析 JSON 文 本 的 
jQuery.parseJSON()。19.7 广 列举 了 这 些 通 用 工具 函数 ，jQuery 的 其 他 画 
数 在 本 章 中 都 会 提 及 。 


jQuery 术语 
在 本 章 中 将 会 遇 到 一 些 重 要 的 术语 和 短语 ， 我 们 来 看 一 下 其 定义 : 
“jQuery 函数 ” 
jQuery 函数 是 jQuery 或 $0 的 值 。 该 妙 数 可 以 用 来 创建 jQuery 对 和 象 ， 用 来 
注册 DOM 吏 绪 时 需要 调用 的 处 理 程序 ， 还 用 做 jQuery 命名 空间 。 我 通 
常用 $0 来 引用 它 。 它 可 以 用 做 命名 空间 ， 因 此 jQuery 函数 也 可 称 为 “全 
局 jQuery 对 象 ?， 但 要 注意 千 万 别 把 它 与 “Query 对 象 ”混淆 。 
“jQuery 对 象 ” 


jQuery 对 象 是 由 jQuery 画 数 返 回 的 对 象 。 一 个 jQuery 对 象 表示 一 组 文档 
元 素 ， 也 叫做 *Query 结 果 ”`、“jQuery 集 ”或 “包装 集 ”。 


“ 选 中 元 素 ” 


当 传 递 CSS 选 择 需 给 jQuery 函数 时 ， 它 返回 的 jQuery 对 象 表示 匹配 该 选 
择 器 的 文档 元 素 集 。 在 描述 jQuery 对 象 的 方法 时 ， 我 经 常会 使 用 “选中 
元 素 ” 这 个 说 法 ， 用 来 指 代 这 些 匹 配 的 元 素 。 例 如 ， 为 了 解释 attr0 方 
法 ， 我 会 用 “attr0 方 法 给 选中 元 素 设 置 HTML 属 性 >， 用 来 奉 代 更 精确 但 
很 元 长 的 描述 : “attr0 方 法 给 调用 它 时 所 在 的 jQuery 对 象 的 元 素 设置 
人 。 注意 “选中 ”是 指 CSS 选 择 器 ， 与 用 户 执 行 的 操作 没有 任 
可 关系 。 


“] Query 国 数 ” 


jQuery 函数 指定 义 在 jQuery 命名 空间 中 的 函数 ， 比 如 
jQuery.noConflict0。jQuery 函 数 也 可 称 为 “静态 方法 ”。 


倍 Query 方 法 7? 


jQuery 方法 是 由 jQuery 画 数 返回 的 jQuery 对 象 的 方法 。jQuery 类 库 最 重 
要 的 部 分 束 是 它 定 义 的 这 些 强大 的 方法 。 


jQuery 函数 和 jQuery 方法 有 时 很 难 区 分 ， 因 为 有 部 分 画 数 和 方法 的 名 称 
是 一 样 的 。 注 意 下 面 这 两 行 代码 的 差异 : 


//jQuery 的 each( ) 画 数 用 来 


// 对 数组 a 中 的 每 一 个 元 素 都 调用 一 次 函数 ff 


$.each(a,f);// 调 用 jQuery() 函 数 获取 表示 文档 中 所 有 <a> 元 素 的 jQuery 对 象 


// 然 后 调用 该 jQurey 对 象 的 each( ) 方 法 


// 对 选中 的 每 一 个 元 素 调用 一 次 函数 f 


$("a") ,each(f)， 


http://jquery.com 中 的 jQuery 官方 文档 使 用 类 似 $.each 的 命名 来 表示 
jQuery 画 数 ， 用 类 似 .each ( 带 点 号 但 不 带 美元 符号 ) 的 命名 来 表示 
jQuery 方法 。 在 本 书 中 ， 会 使 用 术语 “ 芳 数 ?和 “方法 ”来 指 代 。 一 般 情 况 
下 ， 根 据 讨 论 的 上 下 文 可 以 清晰 地 区 分 开 。 


19.1.2 ”查询 与 查询 结果 


传递 CSS 选 择 器 字符 串 给 $0， 它 返回 的 jQuery 对 象 表示 匹配 〈 或 称 
为 “选中 ”) 的 元 素 集 。CSS 选 择 需 在 15.2.5 节 介绍 过 ， 你 可 以 温习 下 
15.2.5 节 中 的 例子 一 一 那里 的 所 有 例子 传递 给 $0 时 都 可 以 正常 工作 。 
jQuery 支持 的 具体 选择 器 语法 会 在 19.8.1 节 详 述 。 本 节 不 会 聚焦 于 那些 
高 级 选择 器 的 细节 ， 而 会 首先 来 看 看 可 以 如 何 处 理 查询 结果 。 


$0 的 返回 值 是 一 个 jQuery 对 象 。 jQuery 对 象 是 尖 数 组 : 它们 拥有 length 

属性 和 介 于 0~length-1 之 间 的 数值 属性 。 〈 请 查看 7.11 节 获取 类 数组 对 
。) 这 意味 着 可 以 用 标准 的 数组 标识 方 括号 来 访问 jQuery 
六 y 容 : 


$("body").length//=>1: 文 档 只 有 史 个 body 元 素 


$("body" ) [9]// 等 于 document .body 


如 果 不 想 把 数组 标识 用 在 jQuery 对 象 上 ， 可 以 使 用 size() 方 法 来 替代 
length 必 性， 用 get0 方 法 来 蔡 代 方 括号 索引 。 可 以 使 用 toArray() 方 法 来 
将 jQuery 对 象 转化 为 真实 数组 。 除 了 length 属 性 ，jQuery 对 象 还 有 三 个 
挺 有 趣 的 属性 。selector 属 性 是 创建 jQuery 对 象 时 的 选择 器 字符 串 (如 
果 有 的 话 ) 。context 属 性 是 上 下 文 对 象 ， 是 传递 给 $() 方 法 的 第 二 参 
数 ， 如 果 没 有 传递 的 话 ， 默 认 是 Document 对 象 。 最 后 ， 所 有 jQuery 对 
象 都 有 一 个 名 为 jquery 的 属性 ， 检 测 该 属性 是 否 存在 可 以 简单 快捷 地 将 
jQuery 对 象 与 其 他 类 数组 对 象 区 分 开 来 。jquery 属 性 值 是 字符 串 形式 的 
jQuery 版 本 号 : 


// 获 取 document body 中 的 所 有 < script> 元 素 


var bodyscripts=$("script",document.body); 


bodyscripts.selector//=>"script" 


bodyscripts.context//=>document.body 


bodyscripts.jquery//=>"1.4.2" 


$0 与 querySelectorAll0 


$0 函 数 与 15.2.5 节 中 描述 的 Document 对 象 的 querySelectorAl1(0) 方 法 类 

似 : 两 者 都 用 CSS 选 择 需 作为 参数 ， 并 且 返 回 类 数组 对 象 来 存放 匹配 选 
择 絮 的 的 元 素 。 在 支持 querySelectorAll() 的 浏览 器 中 ，jQuery 实 现 会 调 
用 querySelectorAll0 方 法 ， 然 而 ， 在 代码 中 使 用 $0 代替 
querySelectorAl10 依 旧 是 很 好 的 选择 : 


querySelectorAl10 在 新 近 的 浏览 器 中 才 实现 。$0 在 新 、 老 浏览 妖 中 都 


能 工作 。 


-jQuery 可 以 通过 手动 实现 选择 ， 因 此 $0 支持 的 CSS3 选 择 器 可 以 用 在 所 
有 浏览 器 中 ， 而 不 仪 是 那些 支持 CSS3 的 浏览 器 。 


$0) 返回 的 类 数组 对 象 \jQuery 对 象 ) 比 querySelectorAl10 返 回 的 类 数组 
对 象 (NodeList) 更 加 有 用 。 


想 要 遍历 jQuery 对 象 中 的 所 有 元 素 时 ， 可 以 调用 each() 方 法 来 代 奉 for 循 
环 。each0 方 法 有 点 类 似 ECMAScript 5(ES5) 中 的 forEach(0) 数 组 方法 。 它 
接受 一 个 回调 函数 作为 唯一 参数 ， 人 然后 它 对 jQuery 对 象 中 的 每 一 个 元 素 

(按照 在 文档 中 的 顺序 ) 调用 回调 函数 。 回 调 函 数 作为 匹配 元 素 的 方 
法 来 调用 ， 因 此 在 回调 函数 里 this 关 键 字 指 代 Element 对 象 。each() 方 法 
还 会 将 索引 值 和 该 元 素 作为 第 一 个 和 第 二 个 参数 传递 给 回调 函数 。 注 
意 : this 和 第 二 参数 都 是 原生 文档 元 素 ， 而 不 是 jQuery 对 象 ， 如 果 想 使 
用 jQuery 方法 来 操作 该 元 素 ， 需 要 先 用 $0 封装 它 。 


jQuery 的 e ach() 方 法 和 forEach() 有 一 个 显著 区 别 : 如 果 回 调 函 数 在 任 一 
个 元 素 上 返回 false， 汤 历 将 在 该 元 素 后 中 止 (这 束 像 在 普通 循环 中 使 
用 break 关 键 字 一 样 ) 。eachO 返 回调 用 自身 的 jQuery 对 象 ， 因 此 它 可 以 
用 于 链 式 调用 。 下面 是 个 例子 〈 使 用 的 prepend0) 方 法 将 在 19.3 节 前 


述 ) : 


// 给 文档 中 的 div 元 素 标号 ， 从 开始 到 div#1last (包含 边界 值 ) 


$("div").each(function(idx){// 找 到 所 有 div 元 素 ， 然 后 遍历 它们 


$(this).prepend(idx+":");// 在 每 一 个 元 素 前 面 插 入 索引 值 


if(this.id==="last")return false;// 磁 到 #1last 元 素 时 终止 


}); 


尽管 each0 方 法 很 强大 ， 但 用 得 并 不 多 ， 因 为 jQuery 方法 通常 隐 式 忆 历 
匹配 的 元 素 集 并 操作 它们 。 需 要 使 用 each() 的 典型 场景 是 需要 用 不 同 的 
方式 来 操作 匹配 的 元 素 。 即 便 如 此 ， 也 不 总 需要 调用 each()， 因 为 
jQuery 的 一 些 方法 允许 传递 回调 函数 。 


在 ES5 数 组 方法 规范 化 前 ，jQuery 类 库 束 已 经 存在 了 。jQuery 定 义 了 几 
个 方法 ， 其 功能 和 ES5 方 法 的 功能 类 似 。jQuery 的 map0 方 法 和 
Array.prototype.map() 方 法 很 相近 。 它 接受 回调 函数 作为 参数 ， 并 为 
jQuery 对 象 中 的 每 一 个 元 素 都 调用 回调 函数 ， 同 时 将 回调 函数 的 返回 值 
收集 起 来 ， 并 将 这 些 返回 值 封 装 成 一 个 新 的 jQuery 对 象 返 回 。map0O 调 
用 回调 函数 的 方式 和 each() 方 法 相同 :元素 作 为 this 值 和 第 二 参数 传 

入 ， 元 素 的 索引 值 作为 第 一 参数 传人 入。 如 采 回 调 函 数 返 回 null 或 
undefined， 该 值 将 被 忽略 ， 在 本 次 回调 中 不 会 有 任何 新 元 素 添 加 到 新 
的 jQuery 对 象 中 。 如 果 回 调 函 数 返回 数组 或 类 数组 对 象 《比如 jQuery 对 
象 ) ， 将 会 扁平 化 它 并 将 其 中 的 元 素 一 个 个 添加 到 新 的 jQuery 对 象 中 。 
注意 由 map0 返 回 的 jQuery 对 象 可 以 不 包含 文档 元 素 ， 但 它 依旧 可 以 
像 类 数组 对 象 一 样 使 用 。 例 如 : 


// 找 到 所 有 标题 元 素 ， 映 射 到 它们 的 id, 并 转化 为 真实 数组 ， 然 后 排序 


$(":header").map(function(){return this.id;}).toArray().sort(); 


除了 each0 和 map0 之 外 ，jQuery 的 另 一 个 基础 方法 是 index0。 该 方法 接 
受 一 个 元 素 作为 参数 ， 返 回 值 是 该 元 素 在 此 jQuery 对 象 中 的 索引 值 ， 如 
果 找 不 到 的 话 ， 则 返回 -1°。 显然 ， 受 jQuery 的 典型 风格 影响 ，index() 方 
法 有 多 个 重 载 版 本 。 如 果 传 递 一 个 jQuery 对 象 作 为 参数 ，index() 方 法 会 
对 该 对 象 的 第 一 个 元 素 进行 搜索 。 如 果 传 入 的 是 字符 串 ，index0O 会 把 

它 当 成 CSS 选 择 器 ， 并 返回 该 jQuery 对 象 中 匹配 该 选择 器 的 一 组 元 素 中 


第 一 个 元 素 的 索引 值 。 如 果 什 么 参数 都 不 传 入 ，index() 方 法 返回 该 
jQuery 对 象 中 第 一 个 毗邻 元 素 的 索引 值 。 

这 里 要 讨论 的 最 后 一 个 通用 的 jQuery 方法 是 is0。 它 接受 一 个 选择 器 作 
为 参数 ， 如 果 选 中 元 素 中 至 少 有 一 个 匹配 该 选择 器 时 ， 则 返回 true。 可 
以 在 each0 回 调 函 数 中 使 用 它 ， 例 如 : 


$("div").each(function(){// 对 于 每 一 个 <div> 元 素 


if($(this).is(":hidden"))return;// 跳 过 隐藏 元 素 
// 对 可 见 元 素 做 点 什么 


}); 


19.2 jQuery 的 getter 和 setter 


jQuery 对 象 上 最 简单 、 最 常见 的 操作 是 获取 (get) 或 设置 (set) 
HTML 必 性、CSS 样 式 、 元 素 内 容 和 位 置 高 宽 的 值 。 该 节 讲 述 这 些 方 
法 。 首 先 ， 让 我 们 对 jQuery 中 的 getter 和 setter 方 法 有 个 概要 理解 : 


jQuery 使 用 同一 个 方法 既 当 getter 用 又 做 setter 用 ， 而 不 是 定义 一 对 方 
法 。 如 果 传 入 一 个 新 值 给 该 方法 ， 则 它 设 置 此 值 ， 如果 没 指定 值 ， 则 
它 返 回 当 前 值 。 


.用 做 setter 时 ， 这 些 方法 会 给 jQuery 对 象 中 的 每 一 个 元 素 设置 值 ， 然 后 
返回 该 jQuery 对 象 以 方便 链 式 调用 。 


用 做 getter 时 ， 这 些 方 法 只 会 查询 元 际 集 中 的 第 一 个 元 隶 ， 返 回 单个 
值 。〈 如 果 要 遇 有 历 所 有 元 隶 ， 请 使 用 map0。) getter 不 会 返回 调用 自身 
的 jQuery 对 象 ， 因 此 它 只 能 出 现在 链 式 调用 的 末尾 。 


用 做 setter 时 ， 这 些 方法 经 闻 接 受 对 象 参 数 。 在 这 种 情况 下 ， 该 对 象 的 
每 一 个 属性 都 指定 一 个 需要 设置 的 名 / 值 对 。 


:用 做 setter 时 ， 这 些 方法 经 营 接 受 函 数 参数 。 在 这 种 情况 下 ， 会 调用 该 
函数 来 计算 需要 设置 的 值 。 调 用 该 画 数 时 的 this 值 是 对 应 的 元 素 ， 第 一 


个 参数 是 该 元 素 的 索引 值 ， 当 前 值 则 作为 第 二 参数 传 入 。 


阅读 本 万 接 下 来 的 内 容 时 ， 请 将 对 getter 和 setter 的 概要 理解 牢记 于 心 。 
下 面 的 每 一 节 会 讲述 jQuery gettersetter 方 法 中 的 一 个 重要 类 别 。 


19.2.1 获取 和 设置 HTML 属 性 


attr(0) 方 法 是 jQuery 中 用 于 HTMEL 属 性 的 gettersetter， 它 符合 上 面 描述 的 
概要 理解 中 的 每 一 条 。attr(0) 处 理 浏 贤 器 的 兼容 性 和 一 些 特殊 情况 ， 还 
让 HTML 属 性 名 和 JavaScript 属 性 名 可 以 等 同 使 用 ( 当 二 者 存在 差异 

时 ) 。 例 如 ， 可 以 使 用 "for" 也 可 以 使 用 "htmlFor"， 可 以 使 用 "class" 也 可 
以 使 用 "className"。 一 个 相关 函数 是 removeAttr0)， 可 用 来 从 所 有 选中 
元 系 中 移 除 某 个 属性 。 下 面 是 一 些 例子 : 


$("form").attr("action");// 获 取 第 一 个 form 元 素 的 action 属 性 


$("#icon").attr("src", "icon.gif");// 设 置 src 属 性 


$("#banner").attr({src:"banner .gif",// 一 次 性 设置 4 个 属性 


alt:"Advertisement", 


width:720,height:64}); 


$("a").attr("target","_blank");// 使 所 有 链接 在 新 窗口 中 打 


$("a") ,attr("target" function(){// 使 站 内 链接 在 本 窗口 中 打开 ， 并 且 让 


if(this.host==location.host)return"_self" 


else return"_blank";// 非 站 内 链接 在 新 窗口 中 打 


}); 


$("a").attr({target:function(){...}});// 可 以 像 这 样 传 入 画 数 


$("a").removeAttr("target");// 让 所 有 链接 在 本 窗口 中 扩 


19.2.2 ”获取 和 设置 CSS 属 性 


css() 方 法 和 attr0 方 法 很 类 似 ， 只 是 css0 方 法 作用 于 元 素 的 CSS 样 式 ， 而 
不 是 元 素 的 HTIML 必 性。 在 获取 样式 值 时 ，css0O 返 回 的 是 元 素 的 当前 样 
式 〈 或 称 为 “计算 ”样式 ， 参 考 16.4 节 ) : 返回 值 可 能 来 自 style 属 性 也 可 
能 来 自 样 式 表 。 注 意 : 不 能 获取 复合 样式 的 值 ， 比 

如 "font" 或 "margin"。 而 应 该 获取 单个 样式 的 值 ， 比 如 "font- 
weight"、"font-family"、"margin-top" 或 "margin-left"。 在 设置 样式 时 ， 
css() 方 法 会 将 样式 们 单 添加 a 到 该 元 到 的 style 属 性 中 。css() 方 法 允许 在 
CSS 样 式 名 中 使 用 连 字 符 ("background-color") 或 使 用 驼峰 格式 
JavaScript 样 式 名 ("backgroundColor") 。 在 获取 样式 值 时 ，css() 会 把 数 
值 转换 成 市 有 单位 后 级 的 字符 串 返 回 。 而 在 设置 样式 值 时 ， 则 会 将 数 
值 转化 成 字符 串 ， 在 必要 时 添加 "px” (像素) 后 级 : 


$("h1").css("font-weight");// 获 取 第 一 个 <h1i> 的 字体 重量 


$("h1").css("fontweight");// 也 可 以 采用 驼峰 格式 


$("h1").css("font");// 错 误 : 不 可 获取 复合 样式 


$("h1").css("font-variant",// 将 样式 设置 在 所 有 <hi> 元 素 上 


"smallcaps"); 


$("div.note").css("border",// 设 置 复 合 样式 是 OK 的 


"solid black 2px"); 


$("h1").css({backgroundcolor:"black", // 一 次 设置 多 个 样式 


textColor:"white", // 也 可 以 用 驼峰 格式 的 名 称 [4] 


fontVariant:"small-caps",// 对 象 属性 


padding:"10px 2px 4px 20px", 


border:"dotted black 4px"});// 让 所 有 <hi> 的 字体 大 小 增加 25% 


$("h1").css("font-size",function(i,curval)t{ 
return Math.round(1.25*parseInt(curval)); 


}); 


19.2.3 ”获取 和 设置 CSS 类 


回忆 一 下 ，class 属 性 值 (在 JavaScript 里 通过 className 访 问 ) 会 被 解析 
成 为 一 个 由 至 格 分 隔 的 CSS 类 名 列表 。 通 弟 ， 我 们 想 要 往 列 表 中 添加 、 
删除 某 一 项 ， 或 判断 某 一 项 是 否 在 列表 中 ， 而 不 是 将 该 列表 替换 为 另 
一 个 。 因 此 ，jQuery 定 义 了 一 些 便捷 方法 用 来 操作 class 属 性 。 
addClass0 和 removeClass0O) 用 来 从 选中 元 系 中 添加 和 删除 类 。 
toggleClass0) 的 用 途 是 ， 当 元 素 还 没有 某 些 类 时 ， 给 元 和 聚 添 加 这 些 类 ; 
反之 ， 则 删除 。hasClass0 用 来 判断 某 类 是 否 存在 。 下 面 是 一 些 例 子 : 


// 添 加 CSS 类 


$("h1") .addclass("hilite");// 给 所 有 < h1> 元 素 添加 一 个 类 


$("h1+p") .addclass("hilite first");// 给 <h1> 后 面 的 <p> 添 加 两 个 类 


$("section" ) .addclass(function(n){// 传 递 一 个 函数 用 来 给 匹配 的 


return"section"+n;// 每 一 个 元 素 添加 自 定义 类 


}) ;// 删 除 CSS 类 


$("p").removeClass("hilite");// 从 所 有 <p> 元 素 中 删除 一 个 类 


$("p").removeClass("hilite first");// 人 允许 一 次 删除 多 个 类 


$("section").removeClass(function(n){// 从 元 素 中 删除 自 定 义 


return"section"+n; 


}); 


$("div").removeClass();// 删 除 所 有 <div> 中 的 所 有 类 


// 切 换 CSS 类 


$("tr:odd").toggleclass("oddrow");// 如 果 该 类 不 存在 则 添加 


// 如 果 存 在 则 删除 


$("h1").toggleclass("big bold");// 一 次 切换 两 个 类 


$("h1").toggleclass(function(n){// 切 换 用 函数 计算 出 来 的 类 


return"big bold hi-"+n; 


}); 


$("h1").toggleclass("hilite",true);// 作 用 类 似 addClass 


$("h1").toggleclass("hilite",false);// 作 用 类 似 removeClass 


// 检 测 CSS 类 


$("p") .hasClass("first")// 是 否 所 有 p 元 素 都 有 该 关 ? 


NS 


$("#lead").is(".first")// 功 能 和 上 面 类 似 


$("#lead").is(".first.hilite")//is() 比 hasCclass( ) 更 灵活 


注意 : hasClass() 不 如 addClass()、removeClass()、 toggleClass(0) 灵 活 。 
hasClassO 只 能 接受 单个 类 名 作为 参数 ， 并 且 不 文 持 函 数 参 效 。 当 选中 
元 素 中 的 任意 元 素 有 指定 CSS 类 时 ，hasClass0 返 回 true; 如 果 任 何 元 素 
则 返回 false。19.1.2 区 描述 的 is0 方 法 更 灵活 ， 可 用 来 做 同样 的 


jQuery 的 这 些 方法 和 16.5 节 讲 的 classList 方 法 类 似 ， 只 是 jQuery 的 方法 可 
以 工作 在 所 有 浏览 夯 中 ， 而 不 仅仅 是 那些 文 持 HTML5 classList 属 性 的 
和 。 此 外 ， 训 无 疑问 ，jQuery 的 方法 可 操作 多 个 元 素 并 文 持 链 式 调 


19.2.4 获取 和 设置 HTML 表 单 值 


val(0 方 法 用 来 设置 和 获取 HTML 表 单元 素 的 value 属 性 ， 还 可 用 于 获取 
和 设置 复 选 枉 、 单 选 按钮 以 及 < select> 元 素 的 选中 状态 : 


$("#surname").,val()// 获 取 surname 文 本 域 的 值 


$("#usstate").val()// 从 <select> 中 获取 单一 值 


$("select#extras").val()// 从 <select multiple> 中 获取 一 组 值 


$ 


一 


"input:radio[name=ship] :checked").val()// 获 取 选 中 的 单 选 按钮 的 值 


$("#email").val("Invalid email address")// 给 文本 域 设置 值 


$("input:checkbox").val(["opt1", "opt2"])// 选 中 带 有 这 些 名 字 或 值 的 复 选 框 


$("input:text").val(function(){// 重 置 所 有 文本 域 为 默认 值 


return this.defaultValue; 


}) 


19.2.5 ”设置 和 获取 元 素 内 容 


text() 和 html() 方 法 用 来 获取 和 设置 元 素 的 纯 文本 或 HTML 内 容 。 当 不 带 
参数 调用 时 ，text0 返 回 所 有 匹配 元 素 的 所 有 子孙 文本 节点 的 纯 文本 内 
容 。 该 方法 其 至 可 以 工作 在 不 支持 textContent 或 innerText 属 性 (参考 
15.5.2 节 ) 的 浏览 器 中 。 


如 采 不 市 参数 调用 html0 方 法 ， 它 会 返回 第 一 个 匹配 元 素 的 HTML 内 
容 。jQuery 使 用 innerHTML 属 性 来 实现 : xhtml0 和 x[0].innerHTML 一样 
高 效 。 


如 朱 传 入 字符 串 给 text0 或 html0， 该 字符 串 会 用 做 该 元 素 的 纯 文 本 或 格 
式 化 的 HTML 文 本 内 容 ， 它 会 蔡 换 挥 所 有 存在 的 内 容 。 和 其 他 setter 方 


法 一 样 ， 我 们 还 可 以 传 入 本 数 ， 该 数 用 来 计算 出 表示 新 内 容 的 字符 


var title=$("head title").text()// 获 取 文 档 标 题 


var headline=$("h1").html()// 获 取 第 一 个 <hi> 元 素 的 html 


$("h1").text(function(n,current){// 给 每 一 个 标题 添加 章节 号 


return"Ss"+(n+1)+":"+current 


}); 


19.2.6 ”获取 和 设置 元 素 的 位 置 高 宽 


在 15.8 广 中 我 们 知道 通过 一 些 技巧 可 以 正确 获取 元 素 的 大 小 和 位 置 ， 尤 

其 当 浏 贤 妖 不 持 pctBoundingClientRectg) (参考 15.8.2 攻 ) 时 。 合用 

1 以 更 简单 地 获取 元 素 的 大 小 和 位 置 ， 并 兼容 所 有 浏览 效 
主意 : 本 节 描 述 的 所 有 方法 都 是 getter， 只 有 少 部 分 可 用 做 setter 。 


使 用 offset(0) 方 法 可 以 获取 或 设置 元 素 的 位 置 。 该 方法 相对 文档 来 计算 
位 置 值 ， 返 回 一 个 对 象 ， 审 有 left 和 top 局 性 ， 用 来 表示 X 和 Y 和 坐标 。 如 
果 传 入 带 有 这 些 属性 的 对 象 给 该 方法 ， 它 会 给 元 素 设置 指定 的 位 置 。 
在 有 必要 时 ， 会 设置 CSS 的 position 属 性 来 使 得 元 素 可 定位 : 


var elt=$("#sprite");// 需 要 移动 的 元 素 


var position=elt.offset();// 获 取 当 前 位 


position.top+=100;// 改 变 Y 坐 标 


elt .offset(position);// 设 置 新 位 置 


// 将 所 有 <hi> 元 素 向 右 移 动 ， 移 动 的 距离 取决 于 它们 在 文档 中 的 位 置 


$("h1i").offset(function(index,curpos)t{ 


return{left:curpos.left+25*index, top:curpos.top}; 


}); 


position() 方 法 很 像 offset() 方 法 ， 但 它 只 能 用 做 getter， 它 返回 的 元 素 位 
置 是 相对 于 其 偏 移 父 元 素 的 ， 而 不 是 相对 于 文档 的 。 在 15.8.5 世 中 ， 我 
们 知道 任何 元 素 都 有 一 个 offsetParent 属 性 ， 其 位 置 是 相对 的 。 定 位 元 素 
总 会 当做 其 子孙 元 和 际 的 偏 移 父 元 素 ， 但 在 某 些 浏览 郁 下 ， 也 会 把 表格 
单元 等 其 他 元 素 当 成 偏 移 父 元 素 。jQuery 只 会 把 定位 元 素 作 为 偏 移 父 元 
素 ，jQuery 对 象 的 offsetParent() 方 法 则 会 把 每 个 元 素 映 射 到 最 近 的 定位 
祖先 元 素 或 <body> 元 素 。 注 意 这 些 方 法 的 名 字 并 不 很 恰当 : offset() 
返回 元 陛 的 绝对 位 置 ， 用 相对 于 文档 的 坐标 来 表示 。 而 position0 则 返 
回 相 对 于 元 素 的 offsetParentO 的 偏 移 量 。 


用 于 获取 元 素 宽 度 的 getter 有 3 个 ， 获 取 高 度 的 也 有 3 个 。widthO 和 
height() 方 法 返回 基本 的 宽度 和 高 度 ， 不 包含 内 边 距 、 边 框 和 外 边 距 。 
innerWidth() 和 innerHeight() 返 回 元 素 的 宽度 和 高 度 ， 包 含 内 边 距 的 宽度 
和 高 度 (“内 ”表示 这 些 方 法 度量 的 是 边框 以 内 的 尺寸 ) 。outerWidth() 
和 outerHeightO 通 第 返回 的 是 包含 元 素 内 边 距 和 边框 的 尺寸 。 如 采 回 两 
个 方法 中 的 任意 一 个 传 入 true 值 ， 它 们 还 可 以 返回 包含 元 素 外 边 距 的 尺 
寸 。 下 面 的 代码 展现 了 如 何 获取 一 个 元 素 的 4 种 不 同 宽度 : 


Var body=$("body"); 


var contentwidth=body .width(); 


var paddingwidth=body.innerwidth(); 


var borderwidth=body.outerwidth(); 


var marginwidth=body.outerwidth(true); 


var padding=paddingwidth-contentwidth;// 左 内 边 距 和 右 内 边 距 的 和 


var borders=borderwidth-paddingwidth;// 左 边框 和 右边 框 的 和 


var margins=marginwidth-borderwidth;// 左 外 边 距 和 右 外 边 距 的 和 


width() 和 height() 方 法 拥有 其 他 4 个 方法 〈 以 inner 和 outer 开 头 的 方法 ) 所 
没有 的 特性 。 首 先 ， 当 jQuery 对 和 象 的 第 一 个 元 素 是 Window 或 Document 
对 象 时 ，widthO0 和 height0 返 回 的 是 窗口 的 视 口 大 小 或 文档 的 整体 斥 
寸 。 其 他 方法 只 适用 于 元 素 ， 不 适用 窗口 和 文档 。 


另 一 个 特性 是 widthO0 和 heightO 方 法 可 以 是 setter 也 可 以 是 getter。 如 果 传 
递 值 给 这 些 方法 ， 它 们 会 给 jQuery 对 象 中 的 每 一 个 元 素 设 置 宽度 或 高 
度 。 (注意 : 不 能 给 Window 和 Document 对 象 设置 宽度 或 高 度 。) 如 果 
传 入 数值 ， 会 把 它 当 成 单位 为 像素 的 尺寸 。 如 果 传 入 字符 串 ， 会 把 它 
用 做 CSS 的 width 和 height 属 性 的 值 ， 因 此 可 以 使 用 任何 CSS 单 位 。 最 
a 和 其 他 setter 类 似 ， 可 以 传 入 函数 ， 用 来 计算 要 设置 的 宽度 或 高 


在 widthO0 和 heightO 的 getter 和 setter 行 为 之 间 有 个 小 的 不 对 称 。 用 做 getter 
时 ， 这 些 方法 返回 元 素 的 内 容 盒子 的 尺寸 ， 不 包括 内 边 距 、 边 框 和 外 
边 距 。 用 做 setter 时 ， 它 们 只 是 简单 设置 CSS 的 width 和 height 必 性。 默认 
情况 下 ， 这 些 属 性 也 指定 内 容 盒 子 的 大 小 。 但 是 ， 如 果 一 个 元 素 的 CSS 
box-sizing 属 性 (参考 16.2.3 节 ) 设置 为 border-box， 则 widthO0 和 height0) 
方法 设置 的 尺寸 包括 内 边 距 和 边框 。 对 于 使 用 context-box 作 为 盒 模型 的 
元 素 e， 调 用 $(e).width(x).widthO 返 回 x 值 。 然 而 ， 对 于 使 用 border-box 模 
型 的 元 素 ， 这 种 情况 下 一 般 不 会 返回 x 值 。 


与 位 置 尺寸 相关 的 最 后 一 对 jQuery 方法 是 scrollTop() 和 scrollLeft()， 可 获 
取 或 设置 元 素 的 滚动 条 位 置 。 这 些 方 法 可 用 在 Window 对 象 以 及 
Document 元 素 上 ， 当 用 在 Document 对 象 上 时 ， 会 获取 或 设置 存放 该 
Document 的 Window 对 和 象 的 滚动 条 位 置 。 与 其 他 setter 不 同 ， 不 可 传递 函 
数 给 scrollTop() 或 scrollLeft()。 


可 使 用 scrollTop() 作 为 getter 和 setter， 与 height() 方 法 一 起 ， 来 定义 一 个 
方法 : 根据 指定 的 页 面 数 向 上 或 向 下 滚动 窗口 : 


// 根 据 页 面 数 n 来 滚动 。n 可 以 是 分 数 或 负数 


function page(n)t 


var w=$(window) ;// 将 window 封 装 为 jQuery 对 象 


var pagesize=w,.height();// 得 到 页 面 大 小 


var _ current=w,.scroLL1Top();// 得 到 当前 滚动 条 位 


w.scrollTop(current+nx*pagesize);// 设 置 新 的 滚动 条 位 置 


} 


19.2.7 获取 和 设置 元 素数 据 


jQuery 定义 了 一 个 名 为 data() 的 getter/setter 方 法 ， 可 用 来 设置 或 获取 与 文 
档 元 素 、Document 或 Window 对 象 相 关联 的 数据 。 可 以 将 数据 与 任意 元 
素 关 联 是 很 重要 和 强大 的 一 项 能 力 : 这 是 jQuery 的 事件 处 理 程序 注册 和 
效 采 队列 机 制 的 基础 ， 有 了 时， 我 们 还 会 在 自己 的 代码 中 使 用 data() 方 


法 中 


需 将 数据 与 jQuery 对 象 中 的 元 素 关 联 ， 传 递 名 称 和 值 两 个 参数 给 data0) 
方法 即 可 。 还 可 以 传递 一 个 对 象 给 data()setter， 此 时 ， 该 对 象 的 每 一 个 
属性 都 将 用 做 名 / 值 对 ， 用 来 与 jQuery 对 象 的 元 素 关 联 。 注 意 ， 传 递 对 
象 给 data0 时 ， 该 对 象 的 属性 将 替换 掉 与 元 素 相 关联 的 旧 数 据 。 与 很 多 
其 他 setter 方 法 不 同 ，data0 不 接受 函数 参数 。 当 将 函数 作为 第 二 参数 传 
递 给 data0 时 ， 该 函数 会 存储 ， 残 和 其 他 值 一 样 。 


当然 ，data0 方 法 也 可 以 用 做 getter。 当 不 带 参数 调用 时 ， 它 会 返回 一 个 
对 象 ， 含 有 与 jQuery 对 象 中 的 第 一 个 元 素 相关 联 的 所 有 名 / 值 对 。 当 传 
入 一 个 字符 串 参 数 调用 data0 时 ， 它 会 返回 对 于 第 一 个 元 素 与 该 字符 串 
参数 相关 联 的 数据 值 。 


removeData() 方 法 用 来 从 元 系 中 删除 数据 。 〈 使 用 data0 设 置 值 为 nul] 或 
undefined 和 实际 上 删除 该 值 不 是 同一 回 事 。) 如 果 传 递 字 符 串 给 
removeData()， 该 方法 会 删除 元 素 中 与 该 字符 串 相 天 联 的 值 。 如 有 果 不 带 
参数 调用 removeData()， 它 会 删除 与 元 素 相 关联 的 所 有 数据 。 


$("div").data("x",1);// 设 置 一 些 数据 


$("div.nodata").removeData("x");// 删 除 一 些 数据 


var x=$('#mydiv' ).data("x");// 获 取 一 些 数据 


jQuery 还 定义 了 data0 和 removeData0) 方 法 的 工具 函数 形式 。 要 给 单一 元 
素 e 天 联 数 据 ， 可 以 使 用 data(0) 的 方法 形式 ， 也 可 以 使 用 其 函数 形式 : 


$(e) ,data(,,,)V/ 方 法 形式 


$,data(e, ,,,)// 画 数 形式 


jQuery 的 数据 框 染 没 有 将 元 素数 据 当做 元 素 的 属性 来 存储 ， 但 它 的 确 需 
要 给 元 素 添 加 一 个 特殊 属性 用 来 与 数据 关联。 由 于 某 些 浏 贤 器 不 允许 
添加 属性 到 <applet>、<object> 和 <<embed> 元 素 中 ， 因 此 jQuery 根 
本 不 允许 给 这 些 类 型 的 元 素 天 联 数据 。 


19.3 ”修改 文档 结构 


在 19.2.5 世 中 我 们 知道 html0 和 text(0) 方 法 可 用 来 设置 元 素 内 容 。 本 节 将 

讲述 能 对 文档 做 出 更 复杂 修改 的 方法 。HTML 文档 表示 为 一 柠 忆 点 树 ， 

而 不 是 一 个 字符 的 线性 序列 ， 因 此 插入 、 删 除 、 替 换 操 作 不 会 像 操 作 

0 °。 接 下 来 的 内 容 会 阐释 用 于 文档 修改 的 jQuery 的 
人 


19.3.1 插入 和 替换 元 素 


让 我 们 从 基本 的 插入 和 替换 方法 开始 。 下 面 泪 示 的 每 一 个 方法 都 接受 
一 个 参数 ， 用 于 指定 需要 插入 文档 中 的 内 容 。 该 参数 可 以 是 用 于 指定 
新 内 容 的 纯 文本 或 HTML 字 符 串 ， 也 可 以 是 jQuery 对 象 、 元 素 或 文本 节 
点 。 根 据 调用 的 方法 不 同 ， 会 在 选中 元 素 的 里 面 、 前 面 或 后 面 位 置 中 
插入 内 容 。 如 果 竺 插入 的 内 容 是 已 存在 于 文档 中 的 元 素 ， 会 从 当前 位 
置 移 走 它 。 如 果 它 需要 插入 多 次 ， 在 必要 时 会 复制 该 元 素 。 这 些 方法 
都 返回 调用 自身 的 jQuery 对 象 。 注 意 ， 在 replaceWith() 运 行 后 ， 该 
jQuery 对 象 中 的 元 素 将 不 再 存在 于 文档 中 : 


$("#1Log") .append("<br/>"+message);// 在 #1og 元 素 的 结尾 处 添加 内 容 


$("h1").prepend("s§");// 在 每 个 <hi> 的 起 始 处 添加 章节 标识 


$("h1").before("<hr/>");// 在 每 个 <hi> 的 前 面 添加 水 平 线 


$("h1i").after("<hr/>");// 在 每 个 <h1i> 的 后 面 添加 水 平 线 


$("hr").replacewith("<br/>");// 蔡 换 <hr/> 元 素 为 <br/> 


$("h2").each(function(){// 将 <h2> 替 换 为 <h1> ,保持 内 容 不 变 


var h2=$(this),; 


h2.replacewith("<h1i>"+h2.html()+"</h1i>"); 


});//after() 和 before( ) 也 可 用 在 文本 节点 上 


// 这 是 给 每 个 < h1> 的 开头 添加 章节 标识 的 另 一 种 方法 


$("h1i").map(function(){return this.firstchild;}).before("§"); 


这 5 个 用 于 结构 修改 的 方法 都 接受 函数 参数 ， 用 来 计算 出 需要 插入 的 

值 。 和 和 平 剃 一样， 如果 传 入 函数 ， 该 男 数 会 为 每 个 选中 元 素 调 用 一 

次 。this 值 将 指向 该 元 素 ， 在 jQuery 对 象 中 元 素 的 索引 值 将 作为 第 一 参 

数 。 对 于 append()、prepend(O) 和 和 replaceWith()， 第 二 参数 将 是 该 元 素 当 

人 。 对 于 before0 和 after0， 该 函数 在 调用 时 没 
第 二 参数 。 


上 面 演示 的 5 个 方法 都 在 目标 元 素 上 调用 ， 并 传 入 需要 插入 的 内 容 作为 
参数 。 这 5 个 方法 中 的 每 一 个 都 可 以 找到 另 一 个 方法 来 实现 兰 不 多 一 样 
的 功能 ， 只 要 采用 不 同 的 方式 操作 即 可 : 在 内 容 上 调用 ， 并 传 入 目标 
元 素 作为 参数 。 下 表 展 示 了 这 些 方法 对 : 


操作 $(target).method(content) $(content).method(target) 


在 目标 元 素 的 结尾 处 插入 内 容 ”append() appendTo() 

在 目标 元 素 的 起 始 处 插 和 人 内 容 ”prepend() preprendTo( ) 

在 目标 元 素 的 后 面 插入 内 容 ”after() insertAfter() 
在 目标 元 素 的 前 面 插入 内 容 。 before() insertBefore() 
将 目标 元 素 赫 换 为 内 容 replacellith( ) replaceAll() 


在 上 面 的 例子 代码 中 演示 的 方法 在 上 表 第 二 列 中 。 第 三 列 中 的 方法 会 
在 下 面 演 示 。 要 理解 这 些 方 法 对 ， 有 几 个 重要 事项 : 


-如 果 传 递 字符 串 给 第 二 列 中 的 方法 ， 会 把 它 当 做 需要 插入 的 HTML 字 

竺 串 。 如 采 传 递 字符 串 给 第 三 列 中 的 方法 ， 会 把 它 当 做 选择 种 ， 用 来 

人 
水 元 系 。 


:第 三 列 中 的 方法 不 接受 函数 参数 ， 第 二 位 中 的 方法 可 以 。 


第 二 列 中 的 方法 返回 调用 自身 的 jQuery 对 象 。 该 jQuery 对 象 中 的 元 素 有 
可 能 有 痢 内 容 或 新 兄弟 节点 ， 但 这 些 元 素 目 身 并 没有 修改 。 第 三 列 中 
的 方法 在 插入 的 内 容 上 调用 ， 返 回 一 个 新 的 jQuery 对 象 ， 表 示 插 入 操作 
后 的 新 内 容 。 特 别 注 意 ， 当 内 容 被 插入 多 个 地 方 时 ， 返 回 的 jQuery 对 象 
将 为 每 一 个 地 方 保 留 一 个 元 聚 。 


上 面 列 举 了 不 同 总 ， 下 面 的 代码 将 实现 与 上 面 的 代码 一 样 的 操作 ， 使 
用 的 是 第 三 列 中 的 方法 来 替代 第 二 列 中 的 。 注 意 在 第 二 行 的 代码 中 不 
能 传 入 纯 文本 (不 市 任何 < > 括号 来 标识 它 为 HTML) 给 $0 方法 
它 会 被 当做 选择 器 。 因 此 ， 必 须 显 式 创 建 需要 插入 的 文本 世 点 : 


$("<br/>+message").appendTo("#10g");// 添 加 html 到 #1og 中 


$(document .createTextNode("s")).prependTo("h1");// 给 所 有 <hi> 添 加 文本 节点 


("<hr/>").insertBefore("h1");// 在 所 有 <hi> 前 面 插 入 水 平 线 


$("<hr/>").insertAfter("h1");// 在 所 有 <hi> 后 面 插入 水 平 线 


$("<br/>").replaceAll("hr");// 将 <hr/>> 替 换 为 <br/> 


19.3.2 复制 元 素 


如 上 所 述 ， 如 果 插 入 的 元 素 已 经 是 文档 的 一 部 分 ， 这 些 元 素 只 会 简单 

地 移动 而 不 是 复制 到 新 位 置 。 如 果 元 素 到 插入 不 止 一 个 位 置 ，jQuery 在 
需要 时 会 复制 元 素 ， 但 是 当 只 插入 一 个 位 置 时 ， 有 是 不 会 进行 复制 操作 

的 。 如 有 果 想 复制 元 素 到 新 位 置 而 不 是 移动 它 ， 必 须 首 移 用 clone() 方 法 来 
得 到 一 个 副本 。clone0 创 建 并 返回 每 一 个 选中 元 素 (包含 元 素 所 有 子 

孙 ) 的 一 个 副本 。 返 回 的 jQuery 对 象 的 元 素 还 不 是 文档 的 一 部 分 ， 可 以 
用 上 一 节 中 的 方法 将 其 禁 入 文档 中 


// 给 文档 结尾 添加 一 个 带 有 "1inklist"id 的 新 div 


$(document ,body) .append("<div id='linklist'><h1i>List of Links</hi></div>");// 将 文 
档 中 的 所 有 链接 复制 并 插入 该 新 div 中 


$("a").clone().appendTo("#1inklist");// 在 每 一 个 链接 后 面 插入 <br/> 元 素 ， 使 其 以 独立 行 显示 
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$("#linklist>a").after("<br/>"); 


clone0) 不 会 复制 事件 处 理 程序 〈 见 19.4 节 ) 和 与 元 素 关 联 的 其 他 数据 
( 见 19.2.7 节 ) 。 如 果 想 复制 这 些 额外 的 数据 ， 请 传 入 true 参 数 。 


19.3.3 ”包装 元 素 


插入 HTML 文 档 的 另 一 种 类 型 涉及 在 一 个 或 多 个 元 素 中 包装 新 元 素 。 
jQuery 定义 了 3 个 包装 函数 。wrap0 包 闭 每 一 个 选中 元 闵 。wrapInner0O 包 
装 每 一 个 选中 元 素 的 内 容 。wrapAllO0 则 将 选中 元 素 作 为 一 组 来 包装 。 
这 些 方法 通常 传 入 一 个 新 创建 的 包装 元 素 或 用 来 创新 包装 元 素 的 HTML 


字符 串 。 如 果 需 要 ，HTML 字 符 串 可 以 包含 多 个 骸 套 元 素 ， 但 必须 是 单 
个 最 内 层 的 元 素 。 如 果 传 入 芳 数 给 这 些 方法 ， 它 会 在 每 个 元 素 的 上 下 
文中 调用 一 次 ，this 指 回 该 元 隶 ， 元 素 的 索引 值 是 唯一 参数 ， 应 该 返回 
a 、Element 或 jQuery 对 象 。 下 面 是 些 例 


// 用 <i> 元 素 包 装 所 有 <hi> 元素 


$("h1").wrap(document .createElement ("i"));// 产 生 <i><hi>...</h1></i>// 包 装 所 有 <hi> 


元 素 的 内 容 ， 使 用 字符 串 参 数 更 简单 


$("h1").wrapInner("<i/>");// 产 生 <h1i><i>...</i></hi> 


// 将 第 一 个 段落 包装 在 一 个 销 点 和 div 里 


$("body>p:first").wrap("<a name='lead' ><div class='first'></div></a>");// 将 所 有 其 
他 段落 包装 在 男 一 个 div 里 


$("body>p:not(:first)").wrapAll("<div class='rest'></div>"); 


19.3.4 删除 元 素 


除了 插入 和 替换 操作 ，jQuery 还 定义 了 用 来 删除 元 素 的 方法 。empty0 
会 删除 每 个 选中 元 素 的 所 有 子 节 点 (包括 文本 广 点 ) ， 但 不 会 修改 元 
素 上 自身 。 对 比 而 言 ，remove() 方 法 会 从 文档 中 移 除 选中 元 素 (以 及 所 有 
元 素 的 内 容 ) 。 通 常 不 带 参 数 调 用 remove()， 此 时 会 从 文档 中 移 除 
jQuery 对 和 象 中 的 所 有 元 杂 。 然 而 ， 如 果 传 入 一 个 参数 ， 该 参数 会 被 当成 
选择 器 ，jQuery 对 象 中 只 有 匹配 该 选择 器 的 元 素 才 会 被 移 除 。 (如 果 只 
想 将 元 素 从 选中 元 素 集中 移 除 ， 而 不 需要 从 文档 中 移 除 时 ， 请 使 用 
filter0 方 法 ， 该 方法 会 在 19.8.2 节 讲述 。) 注意 ， 将 元 素 重 新 插入 文档 
移 除 操作 是 没有 必要 的 : 简单 地 将 其 插入 新 位 置 ， 就 会 移动 它 

| O 


remove() 方 法 会 移 除 所 有 事件 处 理 程序 (参考 19.4 节 ) 以 及 可 能 绑 定 到 
被 移 除 元 素 上 的 其 他 数据 (参见 19.2.7 节 ) 。detach( 方 法 和 remove() 类 


似 ， 但 不 会 移 除 事件 处 理 程序 和 数据 。 想 临时 从 文档 中 移 除 元 素 以 便 
后 续 再 次 插入 时 ，detachO 可 能 会 更 有 用 。 


最 后 ，unwrap(0) 方 法 可 以 用 来 实现 元 素 的 移 除 ， 其 方式 是 wrap0) 或 
wrapAll0 方 法 的 反 操 作 : 移 除 每 一 个 选中 元 素 的 父 元 素 ， 不 影响 选中 
元 素 及 其 兄弟 太 点 。 也 就 是 说 ， 对 于 每 一 个 选中 元 素 ， 它 蔡 换 该 元 素 
的 父 忆 点 为 父 忆 点 的 了 于 和 点 。 与 remove0 和 detach(0 不 同 ，unwrap0 不 接 
受 可 选 的 选择 右 参 数 。 


19.4 使 用 jQuery 处 理事 件 


在 第 17 章 我 们 知道 ， 处 理事 件 时 有 一 个 难点 是 下 (IE9 以 下 ) 实现 了 一 
个 与 所 有 其 他 浏览 器 不 同 的 事件 API。 为 了 解决 这 一 难点 ，jQuery 定 义 
了 一 个 统一 事件 API， 可 工作 在 所 有 浏览 器 中 。jQuery API 具 有 简单 的 
形式 ， 比 标准 或 下 的 事件 API 更 容易 使 用 。jQuery API 还 具有 更 复杂 、 
功能 更 齐全 的 形式 ， 比 标准 API 更 强大 。 接 下 来 的 章节 会 详细 阐述 。 


19.4.1 事件 处 理 程序 的 简单 注册 
jQuery 定义 了 人 简单 的 事件 注册 方法 ， 可 用 于 常用 和 普 适 的 每 一 个 浏览 妖 
于 什 。 比如， 给 单 击 事件 注册 一 个 事件 处 理 程序 ， 只 要 调用 click0) 方 


法 : 


// 单 击 任意 <p> 时 ， 使 其 背景 变 成 灰色 


$("p").click(function(){$(this).css("background-color", "gray");}); 


调用 jQuery 的 事件 注册 方法 可 以 给 所 有 选中 元 素 注册 处 理 程序 。 很 明 
显 ， 这 比 使 用 addEventListener() 或 attachEvent() 一 次 注册 一 个 事件 处 理 
程序 简单 很 多 。 


下 面 是 jQuery 定义 的 简单 事件 处 理 程序 注册 的 方法 : 


blur() focusin() mousedownt ) mouseup() 
change() focusout() mouseenter() resize() 
click() keydown () mouseleave() scroll() 
dbclick() keypress() mousemove() select() 
error() keyup() mouseout() submit() 
focus() 1oad( ) mouseover() unload() 


这 些 注册 方法 的 大 部 分 都 用 于 在 第 17 章 已 经 熟悉 的 常见 事件 类 型 。 下 
面 按 顺序 给 出 一 些 注意 事项 。focus 和 blur 事 件 不 支持 冒 泡 ， 但 focusin 和 
focusout 事 件 支持 ，jQuery 人 确保 这 些 事件 在 所 有 浏览 絮 下 都 支持 。 相 反 
地 ，mouseover 和 mouseout 事 件 支 持 冒 泡 ， 但 这 经 常 不 方便 ， 因 为 很 难 
知道 鼠标 是 从 自己 感 兴趣 的 元 素 中 移 开 了 ， 还 只 是 从 该 元 素 的 子 让 元 
素 中 移 开 了 。mouseenter 和 mouseleave 是 韭 冒 泡 事 件 ， 可 以 解决 刚才 的 
问题 。 这 几 个 事件 类 型 最 初 是 由 IE 引 入 的 ，jQuery 确 保 它 们 可 在 所 有 浏 
览 右 下 正确 工作 。 


resize 和 unload 事 件 类 型 只 在 Window 对 象 中 和 触发， 如 果 想 要 给 这 两 个 事 
件 类 型 注册 处 理 程序 ， 应 该 在 $(window) 上 调用 resize0) 和 unload(0) 方 法 。 
scroll() 方 法 经 常 也 用 于 $(window) 对 象 上 ， 但 它 也 可 以 用 在 有 深 动 条 的 
任何 元 素 上 (比如 ， 当 CSS 的 overflow 属 性 设置 

为 "scroll" 或 "auto" 时 ) 。load() 方 法 可 在 $(window) 上 调用 ， 用 来 给 窗口 
注册 加 载 事件 处 理 程序 ， 但 经 常 更 好 的 选择 是 ， 直 接 将 初始 化 函数 传 
给 19.1.1 世 所 示 的 $0。 当 然 ， 还 可 以 在 iframe 和 图 片上 使 用 load0 方 法 。 
注意 ， 用 不 同 的 参数 调用 时 ，load0 还 可 用 于 加 载 新 内 容 (通过 脚本 化 
HTTP) 到 元 素 中 请 阅读 19.6.1P。error0 方 法 可 用 在 <img> 元 叉 
上 ， 用 来 注册 当 图 片 加 载 失败 时 调用 的 处 理 程 序 。error0 不 应 该 用 于 设 
置 14.6 节 描述 的 窗口 的 onerror 属 性 。 


除了 这 些 简 单 的 事件 注册 方法 外 ， 还 有 两 个 特殊 形式 的 方法 ， 有 时 很 
有 用 。hover() 方 法 用 来 给 mouseenter 和 mouseleave 事 件 注册 处 理 程序 。 
调用 hover(f,g) 就 和 调用 mouseenter(f) 然 后 调用 mouseleave(g) 一 样 。 如 果 
仅 传 = 参数 给 hover()， 该 参数 函数 会 同时 用 做 enter 和 leave 事 件 的 
处 理 程序 。 


另 一 个 特殊 的 事件 注册 方法 是 toggle0。 该 方法 将 事件 处 理 程序 函数 绑 
定 到 单 击 事件 。 可 指定 两 个 或 多 个 处 理 程序 函数 ， 当 单 击 事件 发 生 


时 ，jQuery 每 次 会 调用 一 个 处 理 程序 函数 。 例 如 ， 如 果 调 用 
toggle(f,g,h)， 第 一 次 单 击 事件 触发 时 ， 会 调用 函数 f{()， 第 二 次 会 调用 
g()， 第 三 次 则 调用 h()， 然 后 调用 f0) 来 处 理 第 四 次 单 击 事件 。 小 心 使 用 
toggle(): 我 们 将 在 19.5.1 节 看 到 ， 该 方法 可 用 来 显示 或 隐藏 选中 元 素 
(也 就 是 说 ， 切 换 选 中 元 素 的 可 见 性 ) 。 


在 19.4.4 世 中 ， 我 们 会 学 到 其 他 更 通用 的 方式 来 注册 事件 处 理 程序 ， 本 
世 最 后 ， 让 我 们 再 学 会 一 个 更 简单 且 更 便捷 的 处 理 程序 注册 方法 。 


回忆 下 ， 可 以 传递 HTML 字 符 串 给 $0 方 法 来 创建 该 字符 如 所 描述 的 元 
素 ， 还 可 传 入 一 个 对 象 (当做 第 二 个 参数 ) ， 该 对 象 由 属性 组 成 ， 这 
些 属性 可 设置 到 新 创建 的 元 素 上 。 这 第 二 个 参数 可 以 是 传递 给 attr() 方 
法 的 任意 对 象 。 此外， 如 采 这 些 属性 中 有 任何 一 个 与 上 面 列举 的 事件 
注册 方法 同名 ， 该 属性 值 会 被 当做 处 理 程序 男 数 ， 并 注册 为 命名 事件 
类 型 的 处 理 程序 。 例 如 : 


$("<img/>"™,{ 

src:image_url, 

alt:image_ description, 
className:"translucent_image", 
click:function(){$(this).css("opacity","50%"),;} 


}); 


19.4.2 jQuery 事件 处 理 程序 


上 面 例子 中 的 事件 处 理 程序 函数 被 当做 是 不 这 参 数 以 及 不 返回 值 的 。 

像 这 样 书写 事件 处 理 程序 非常 正常 ， 但 jQuery 调用 每 一 个 事件 处 理 程序 
时 的 确 传 入 了 一 个 或 多 个 参数 ， 并 且 对 处 理 程序 的 返回 值 进行 了 处 

理 。 需 要 知道 的 最 重要 的 一 件 事情 是 ， 每 个 事件 处 理 程序 都 传 入 一 个 
jQuery 事件 对 象 作 为 第 一 个 参数 。 该 对 象 的 字段 提供 了 与 该 事件 相关 的 
详细 信息 (比如 鼠标 指针 的 坐标 ) 。 标 准 事件 对 象 的 属性 在 第 17 章 描 
述 过 。jQuery 模 拟 标准 Event 对 象 ， 即 便 在 不 支持 的 标准 事件 对 象 的 浏 


览 器 中 〈 像 IE8 及 其 以 下 ) ，jQuery 事 件 对 象 在 所 有 浏览 器 上 拥有 一 
相同 的 字段 。 这 在 19.4.3 节 会 详细 讲述 。 


通 彰 ， 调 用 事件 处 理 程序 时 只 带 有 事件 对 象 这 个 唯一 参数 。 如 果 用 
trigger() (参见 19.4.6 节 ) 显 式 触 发 事件 ， 可 以 传 入 额外 的 参数 数组 。 这 
po 这 些 参数 会 在 第 一 个 事件 对 象 参 数 之 后 传递 给 事件 处 理 程 
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不 管 它们 是 如 何 注册 的 ，jQuery 事 件 处 理 程 序 函 数 的 返回 值 始 终 有 意 
义 。 如 果 处 理 程序 返回 false， 与 该 事件 相关 联 的 默认 行为 ， 以 及 该 事 
件 接 来 下 的 冒 泡 都 会 被 取消 。 也 残 是 说 ， 返 回 false 等 同 于 调用 Event 对 
象 的 preventDefault() 和 stopPropagation() 方 法 。 同 样 ， 当 事件 处 理 程序 返 
回 一 个 值 ( 非 undefined 值 ) 时 ，jQuery 会 将 该 值 存储 在 Event 对 象 的 
result 属 性 中 ， 该 属性 可 以 被 后 续 调 用 的 事件 处 理 程序 访问 。 


19.4.3 ”jQuery 事件 对 象 


jQuery 通过 定义 自己 的 Event 对 象 来 隐藏 浏 贤 器 之 间 的 实现 差异 。 当 一 
个 jQuery 事件 处 理 程序 被 调用 时 ， 总 会 传 入 一 个 jQuery 事件 对 象 作 为 其 
第 一 个 参数 。jQuery 事 件 对 象 主要 以 W3C 标 准 为 基准 ， 同 时 它 也 实现 
了 一 些 实际 的 事件 标准 。jQuery 会 将 以 下 所 有 字段 从 原生 Event 对 象 中 
Event 对 象 上 (尽管 对 于 特定 事件 类 型 来 说 ， 有 些 字 上 段 值 
及 undefined) : 


altKey ctrlkey newValue screenX 
attrChange currentTarget offsetX screeny 
attrName detail offsetX shiftkey 
bubbles eventPhase originalTarget srcElement 
button fromElement pageX target 
cancelable keyCode pageY toElement 
charCode layerX prevValue view 

clientX layerY relatedNode wheelDelta 


ClientY metakKey relatedTarget which 


除了 这 些 属性 ，Event 对 象 还 定义 了 以 下 方法 : 


preventDefault() isDefaultPrevented() 
stopPropagation( ) isPropagationstopped( ) 
stopImmediatepPropagation( ) isImmediatePropagationStopped() 


这 些 事件 属性 和 方法 中 的 大 部 分 在 第 17 章 介绍 过 ， 并 在 第 四 部 分 的 ref- 
Event 中 有 详细 文档 说 明 。 对 于 一 部 分 字段 ， 使 
其 在 所 有 浏 砚 硕 中 的 行为 一 致 ， 值 得 我 们 留 


metaKey 


如 果 原 生 事 件 对 象 没有 metaKey 属 性 ，jQuery 会 使 其 与 ctrIKey 属 性 的 值 
一 样 。 在 Mac 0OS 中 ，Command 键 设置 meta 键 的 属性 。 


pageX,pageY 


如 果 原 生 事 件 对 象 没 有 定义 这 两 个 属性 ， 但 定义 了 鼠标 指针 的 视 口 从 
标 clientX 和 clientY，jQuery 会 计算 出 鼠标 指针 的 文档 坐标 并 把 它们 存储 
在 pageX 和 pageY 中 。 


target,currentTarget,relatedTarget 


target 属 性 表示 在 其 上 发 生 事 件 的 文档 元 素 。 如 果 原 生 事 件 对 象 的 目标 
是 文本 和 点 ，jQuery 返 回 的 目标 会 蔡 换 为 包含 该 文本 和 点 的 元 素 。 
前 正在 执行 的 事件 处 理 程序 所 注册 的 元 素 ， 与 this 应 该 


一 人 


如 有 条 currentTarget 和 target 不 一 样 ， 那 么 正在 处 理 的 事件 是 从 触发 它 的 元 
此 时 使 用 is0 方 法 (参见 19.1.2 节 ) 来 检测 target 元 素 可 
能 会 和 


if($(event.target).is("a"))return;// 名 略 在 链接 上 启动 的 事件 


涉及 mouseover 和 mouseonut 等 过 渡 事 件 时 ，relatedTarget 表 示 其 他 元 素 。 
例如 ， 对 于 mouseover 事 件 ，relatedTarget 属 性 指 鼠 标 指 针 移 开 的 元 素 ， 
target 则 是 鼠标 指针 感 浮 的 元 素 。 如 果 原 生 事件 对 象 没有 定义 
relatedTarget 但 定义 了 toElement 和 fromElement， 则 会 从 这 些 属性 中 得 到 
relatedTarget ° 


timeStamp 


事件 发 生 时 的 时 间 ， 单 位 是 马 秒 ， 由 Date.getTime0() 方 法 返回 。 这 个 子 
段 是 jQuery 上 自身 设置 的 ， 可 以 解决 Firefox 中 一 个 长 期 存在 的 bug。 


which 


这 是 一 个 非 标 准 事件 属性 ，jQuery 做 了 统一 化 处 理 ， 使 其 可 以 用 来 指明 
在 事件 发 生 期 间 ， 按 下 的 是 哪个 鼠标 按钮 或 键盘 按键 。 对 键盘 事件 来 
说 ， 如 果 原 生 事 件 没 有 定义 which， 但 定义 了 charCode 或 keyCode， 
which 将 被 设置 为 定义 过 的 charCode 或 keyCode。 对 鼠标 事件 来 说 ， 如 果 
which 没 有 定义 但 定义 了 button 属 性 ， 会 根据 button 的 值 来 设置 which。0 
表示 没有 按钮 按 下 。1 表 示 鼠 标 左 键 按 下 ，2 表 示 鼠 标 中 键 按 下 ，3 表 示 
。 (注意 ， 单 击 鼠 标 右键 时 ， 有 些 浏览 右 不 会 产生 鼠标 


，jQuery Event 对 象 的 以 下 字段 是 特定 于 jQuery 添加 的 ， 有 时 会 很 


data 


如 果 注 册 事 件 处 理 程序 时 指定 了 额外 的 数据 (参见 19.4.4 节 ) ， 处 理 程 
序 可 以 用 该 字段 的 值 来 访问 。 


handler 

当前 正和 被 调用 的 事件 处 理 程序 函数 的 引用 。 

result 

该 事件 最 近 调 用 的 处 理 程序 的 返回 值 ， 忽 略 没有 返回 值 的 处 理 程序 。 


originalEvent 


浏览 器 生成 的 原生 事件 对 象 的 引用 。 
19.4.4 事件 处 理 程序 的 高 级 注册 


我 们 已 经 看 到 ，jQuery 定 义 了 相当 多 简单 的 方法 来 注册 事件 处 理 程序 。 
所 有 这 些 方法 都 是 简单 地 调用 单一 的 、 更 复杂 的 方法 bind0 来 为 命名 的 
事件 类 型 绪 定 处 理 程序 ， 该 处 理 程序 会 绕 定 到 jQuery 对 象 中 的 每 一 个 元 
素 上 。 直 接 使 用 bind0 可 以 让 我 们 使 用 事件 注册 的 高 级 特性 ， 这 些 特性 
在 较 简单 的 方法 上 是 不 可 用 的 加 。 


在 最 简 形 式 下 ，bind0 需 要 一 个 事件 类 型 字符 串 作 为 其 第 一 个 参数 ， 以 
及 一 个 事件 处 理 程 序 函 数 作为 其 第 二 个 参数 。 事 件 注册 的 简单 方法 使 
用 该 形式 的 bind0。 例 如 ， 调 用 $Cp).click() 等 价 : 


$('p').bind('click', f); 


调用 bindO 时 还 可 以 带 有 三 个 参数 。 在 这 种 形式 下 ， 事 件 类 型 是 第 一 个 
参数 ， 处 理 程序 函数 是 第 三 个 参数 。 在 这 两 个 参数 中 间 可 以 传 入 任何 
值 ，jQuery 会 在 调用 处 理 程 序 前 ， 将 指定 的 值 设 置 为 Event 对 象 的 data 属 
。 0 不 需要 使 用 闭 包 ， 有 
时 很 有 用 。 


bindO 还 有 其 他 高 级 特性 。 如 果 第 一 个 参数 是 由 空格 分 隔 的 事件 类 型 列 


表 ， 则 处 理 程序 函数 会 为 每 一 个 命名 的 事件 类 型 注册 。 例 如 ， 调 用 
$('a”).hover(f) 〈 人 参见 19.4.1 节 ) 等 同 于 : 


$('a').bind('mouseenter mouseleave',f); 


bind() 的 男 一 个 重要 特性 是 允许 为 注册 的 事件 处 理 程序 指定 命名 空间 。 
这 使 得 可 以 定义 处 理 程序 组 ， 能 方便 后 续 触 发 或 抒 载 特定 命名 空间 下 
的 处 理 程序 。 处 理 程 序 的 命名 空间 对 于 开发 可 复 用 jQuery 代码 的 类 库 或 
模块 的 程序 员 来 说 特别 有 用 。 事 件 命名 空间 类 似 CSS 的 类 选择 右 。 要 绑 
定 事件 处 理 器 到 命名 空间 中 时 ， 添 加 句点 (.) 和 命名 空间 名 到 事件 类 
型 字符 串 中 即 可 : 


// 作 为 mouseover 处 理 程序 在 在 命名 空间 "myMod" 中 把 f 绑 定 到 所 有 元 素 


$('a').bind('mouseover .myMod',f); 


甚至 还 可 以 给 处 理 程序 分 配 多 个 命名 空间 ， 如 下 所 示 : 


// 在 命名 空间 "myMod" 和 "yourMod" 中 作为 mouseout 处 理 程序 绑 定 和 


$('a').bind('mouseout.myMod.yourMod',f); 


bind0) 的 最 后 一 个 特性 是 ， 第 一 个 参数 可 以 是 对 象 ， 该 对 象 把 事件 名 了 映 
射 到 处 理 程 序 函 数 。 再 次 使 用 hover0) 方 法 来 举例 ， 调 用 $Ca).hover(f,g) 


等 价 于 : 


$('a').bind({mouseenter:f,mouseleave:g}); 


当 使 用 bind0 的 这 种 形式 时 ， 传 入 对 和 象 的 属性 名 可 以 是 至 格 分 隔 的 事件 
类 型 的 字符 串 ， 也 可 包括 命名 空间 。 如 果 在 第 一 个 对 象 参数 之 后 还 指 
定 了 第 二 个 参数 ， 其 值 会 用 做 每 一 个 事件 绑 定 的 数据 参数 。 


jQuery 还 有 另 一 个 事件 处 理 程序 注册 方法 。 调 用 one() 方 法 就 和 bind0 一 
样 ， 二 者 的 工作 原理 也 类 似 ， 除 了 在 调用 事件 处 理 程序 之 后 会 自动 注 
销 它 。 这 意味 着 ， 和 该 方法 名 字 暗 示 的 一 样 ， 使 用 one() 注 册 的 事件 处 
理 希 永远 只 会 触发 一 次 。 

使 用 addEventListener() (参见 17.2.3 节 ) 可 以 注册 捕获 事件 的 处 理 程 
序 ，bind0 和 one0O 没 有 该 特性 。IE (IE9 以 下 版 本 ) 不 支持 捕获 处 理 程 
序 ，jQuery 不 打算 模拟 该 特性 。 


19.4.5 ”注销 事件 处 理 程 序 


用 bind() (或 任何 更 简单 的 事件 注册 方法 ) 注册 事件 处 理 程序 后 ， 可 以 
使 用 unbind() 来 注销 它 ， 以 避免 在 将 来 的 事件 中 触发 它 。 (注音 ， 
unbind0O 只 注销 用 bind0 和 相关 jQuery 方法 注册 的 事件 处 理 程序 。 通 过 
addEventListener() 或 IE 的 attachEvent() 方 法 注册 的 处 理 器 不 会 注销 ， 并 
且 不 会 移 除 通过 onclick 和 和 onmouseover 等 元 素 属 性 定义 的 处 理 程序 。) 
不 带 参 数 时 ，unbind0 会 注销 jQuery 对 象 中 所 有 元 素 的 〈 所 有 事件 类 型 
的 ) 所 有 事件 处 理 程序 : 


口 


$('*') .unbind();// 从 所 有 元 素 中 移 除 所 有 jQuery 事件 处 理 程序 


带 有 一 个 字符 串 参 数 时 ， 由 该 字符 串 指 明 的 事件 类 型 (可 以 是 多 个 ， 
0 
X 消 绑 定 : 


// 从 所 有 <a> 元 素 中 取消 绑 定 所 有 mouseover 和 mouseout 处 理 程序 


$('a').unbind("mouseover mouseout"); 


这 是 很 粗 务 的 方式 ， 不 应 该 在 模块 化 代码 中 使 用 ， 因 为 模块 的 使 用 考 
有 可 能 使 用 其 他 模块 ， 在 其 他 模块 中 有 可 能 在 相同 的 元 素 上 给 相同 的 
事件 类 型 注册 了 其 他 处 理 程序 。 如 有 果 模 块 使 用 命名 空间 来 注册 事件 处 
理 程序 ， 则 可 以 使 用 unbind0， 传 入 一 个 参数 ， 来 做 到 只 注销 命名 空间 
下 的 处 理 程序 : 


予 


// 取 消 绑 定 在 "myMod" 命 名 空间 下 的 所 有 mouseover 和 mouseout 处 理 和 


$('a'),unbind("mouseover .myMod mouseout .myMod" ) ;// 取 消 绑 定 在 "myMod" 命 名 空间 下 的 所 有 事件 类 型 
的 处 理 程序 


$('a' ).unbind(".myMod");// 取 消 绑 定 同时 在 "ns1" 和 "ns2" 命 名 空间 下 的 单 击 处 理 程序 


$('a').unbind("click.ns1.ns2"); 


如 果 想 小 心地 只 取消 绑 定 自 己 注 册 的 事件 处 理 程序 ， 但 没有 使 用 命名 
空间 ， 必 须 保留 事件 处 理 程序 函数 的 一 个 引用 ， 并 使 用 unbind0 带 两 个 
参数 的 版 本 。 在 这 种 形式 下 ， 第 一 个 参数 是 事件 类 型 字符 串 (不 带 命 
名 空间 ) ， 第 二 个 参数 是 处 理 程序 函数 : 


$('#mybutton').unbind('click',myClickHandler); 


通过 这 种 方式 调用 时 ，unbind() 从 jQuery 对 和 象 的 所 有 元 末 中 注销 特定 类 
型 的 指定 事件 处 理 程序 函数 。 注 意 ， 即 便 使 用 有 3 个 参数 的 bindO 通 过 
额外 的 数据 值 注册 事件 处 理 程序 ， 也 可 以 使 用 有 两 个 参数 的 unbind0 事 
件 来 取消 绑 定 它们 。 

可 以 传递 单一 对 象 参 数 给 unbind0。 在 这 种 情况 下 ，unbind0 会 轮 询 为 


该 对 象 的 每 一 属性 调用 一 次 。 属 性 名 会 用 做 事件 类 型 字符 串 ， 属 性 值 
会 用 做 处 理 程序 函数 : 


$('a').unbind({//Remove Specific mouseover and mouseout handlers 

mouseover :mouseoverHandler, 

mouseout:mouseoutHandler 

}); 

最 后 ， 还 有 一 种 方式 来 调用 unbind()。 如 果 传 递 一 个 jQuery Event 对 象 给 


unbind0， 它 会 取消 绑 定 传 入 事件 的 事件 处 理 程序 。 调 用 unbind(e Vv) 等 
价 于 unbind(e vtype,ev.handlen)。 


19.4.6 ”触发 事件 
当 用 户 使 用 鼠标 、 键 盘 或 触发 其 他 事件 类 型 时 ， 注 册 的 事件 处 理 程序 
会 目 动 调用 。 然 而 ， 如 果 能 手动 触发 事件 ， 有 时 会 很 有 用 。 手 动 触 发 


事件 最 倘 单 的 方式 是 不 带 参 数 调用 事件 注册 的 简单 方法 〈 比 如 click0) 或 
mouseover()) 。 与 很 多 jQuery 方法 可 以 同时 用 做 做 getter 和 setter 一 样 ， 


这 些 事件 方法 在 带 有 一 个 参数 时 会 注册 事件 处 理 程序 ， 不 带 参 数 调用 
时 则 会 触发 事件 处 理 程序 。 例 如 : 


$("#my_form").submit();// 就 和 用 户 单 击 提交 按钮 一 样 


上 面 的 submitO 方 法 自己 合成 了 一 个 Event 对 象 ， 并 触发 了 给 submit 事 件 
注册 的 所 有 事件 处 理 程序 。 如 果 这 些 事件 处 理 程 序 都 没有 返回 false 或 
调用 Event 对 象 的 preventDefault()， 实 际 上 将 提交 该 表单 。 注 意 ， 通 过 
这 种 方式 手动 调用 时 ， 冒 泡 事件 依旧 会 冒 泡 。 这 意味 着 触发 一 组 选中 
元 素 的 事件 ， 同 时 也 会 触发 这 些 元 素 祖 先 节 点 的 处 理 程序 。 


需要 特别 注意 ，jQuery 的 事件 触发 方法 会 触发 所 有 使 用 jQuery 事件 注册 
方法 注册 的 处 理 程序 ， 也 会 触发 通过 onsubmit 等 HTML 属 性 或 Element 
属性 定义 的 处 理 程序 。 但 是 ， 不 能 手动 触发 使 用 addEventListener() 或 
attachEvent() 注 册 的 事件 处 理 程序 (当然 ， 在 真实 事件 触发 时 ， 这 些 处 
理 程序 依旧 会 调用 。) 


同时 需要 注意 ，jQuery 的 事件 触发 机 制 是 同步 的 一 一 不 涉及 事件 队列 。 
当 触 发 一 个 事件 时 ， 在 调用 的 触发 方法 返回 之 前 ， 事 件 处 理 程序 会 立 
刻 调用 。 如 果 触 发 了 一 个 单 击 事件 ， 被 触发 的 处 理 程序 义 触 发 了 一 个 
en ， 所 有 匹配 的 submit 处 理 程序 会 在 调用 下 一 个 单 击 处 理 右 之 
前 调用 。 


乡 定 和 触发 事件 时 ，submit0) 这 种 方法 很 便捷 ， 但 就 如 jQuery 定义 了 一 
个 更 通用 的 bind() 方 法 一 样 ，jQuery 也 定义 了 一 个 更 通用 的 trigger() 方 
法 。 通 肖 ， 调 用 trigger0 时 会 传 入 事件 类 型 字符 串 作 为 第 一 个 参数 ， 
trigger0 会 在 jQuery 对 象 中 的 所 有 元 素 上 触发 为 该 类 型 事件 注册 的 所 有 
处 理 程序 。 因 此 ， 上 面 的 submitO 调 用 等 价 于 : 


$("#my_form").trigger("submit"); 


与 bind0 和 unbind(O) 方 法 不 同 ， 在 传人 的 字符 哩 中 不 能 指定 多 个 事件 类 
型 。 然 而 ， 与 bind0 和 unbind0 一 样 的 征 ， 可 以 指定 事件 命名 空间 来 触 
发 仅 在 该 命名 空间 中 定义 的 处 理 程序 。 如 有 果 只 想 触发 没有 命名 空间 的 


事件 处 理 程序 ， 在 事件 类 型 后 添加 一 个 感叹 号 就 行 。 通 过 onclick 等 属 
性 注册 的 处 理 程序 被 认为 是 没有 命名 空间 的 : 


$("button").trigger("click.ns1");// 触 发 某 个 命名 空间 下 的 单 击 处 理 程序 


$("button").trigger("click!");// 触 发 没有 命名 空间 的 单 击 处 理 程序 


除了 给 trigger0) 传 入 事件 类 型 字符 串 作为 第 一 个 参数 ， 还 可 以 传 入 Event 
对 象 〈 或 任何 有 type 属 性 的 对 象 ) 。type 属 性 会 用 来 判断 触发 什么 类 型 
的 处 理 程序 。 如 果 传 入 的 是 jQuery 事件 对 象 ， 该 对 象 会 传递 给 触发 的 处 
理 程序 。 。 如果 传 入 的 是 普通 对 象 ， 会 会 创建 一 个 新 的 jQuery Event 对 象 ， 

通 对 象 的 属性 会 添加 到 新 对 象 中 。 这 样 ， 可 以 很 容易 传递 额外 数据 
给 事件 处 理 程序 : 


//button1 的 单 击 处 理 程序 触发 button2 上 的 相同 事 人 


这 
AS 
> 


$('#button1i').click(function(e){$('#button2' ).trigger(e);});// 触 发 事件 时 ， 添 加 额外 的 属性 
事件 对 象 


淮 


x 分 是 真实 


$('#button1' ).trigger({type:'click',synthetic:true});// 该 处 理 程序 检测 额外 属性 
件 还 是 虚假 事件 


$('#button1i').click(function(e){if(e.synthetic){...};}); 


i 传递 额外 数据 的 另 一 种 方式 是 ， 在 手动 甬 发 事件 时 ， 

给 trigger0 传 入 第 二 个 参数 。 给 trigger0 传 入 的 第 二 个 参数 会 成 为 每 个 触 
发 的 事件 处 理 程序 的 第 二 个 参数 。 各 果 传 入 数组 作为 第 二 个 参数 ， 数 
组 的 每 一 项 会 作为 独立 参数 传递 给 触发 的 处 理 程 序 : 


$('#buttoni' ).trigger("click",true);// 传 入 单一 额外 参数 


$('#button1' ).trigger("click", [x,y,z]);// 传 入 三 个 额外 参数 


有 时 ， 会 想 触 发 给 定 事件 类 型 的 所 有 处 理 程序 ， 而 不 管 这 些 处 理 程序 
是 绑 定 到 什么 文档 元 素 上 的 。 这 时 可 以 使 用 $(*") 来 选中 所 有 元 素 ， 然 
后 对 结果 调用 trigger()， 可 是 这 样 做 非常 低 效 。 更 好 的 方式 是 ， 使 用 
jQuery.event.trigger() 工 具 芳 数 ， 来 全 局 触发 事件 。 该 男 数 授 受 的 参数 和 
trigger() 方 法 一 样 ， 但 在 整个 文档 中 触发 指定 事件 类 型 的 事件 处 理 程序 
时 更 高 效 。 注 意 ， 以 这 种 方式 触发 的 “全 局 事件 ”不 会 冒 泡 ， 并 且 只 会 
触发 使 用 jQuery 方法 注册 的 处 理 程序 〈\ 不 包括 用 onclick 等 DOM 属 性 注 
册 的 事件 处 理 程序 ) 。 


trigger() (及 调用 它 的 便捷 方法 ) 在 调用 事件 处 理 程序 后 ， 会 执行 与 触 
发 事件 相关 联 的 默认 操作 (假设 事件 处 理 程序 没有 返回 false 或 调用 事 
件 对 象 的 preventDefault0) 。 例 如 ， 触 发 一 个 <form>> 元 素 的 submit 事 
件 时 ，trigger0 会 调用 该 表单 的 submit0 方 法 ， 如 果 触 发 一 个 元 素 的 
focus 事 件 ，trigger() 会 调用 该 元 素 的 focus() 方 法 。 


如 果 想 调用 事件 处 理 程序 ， 但 不 执行 默认 操作 ， 可 以 使 用 
triggerHandler() 蔡 代 trigger()。 该 方法 和 trigger() 类 似 ， 除 了 百 先 会 调用 
Event 对 象 的 preventDefault0 和 cancelBubble() 方 法 。 这 意味 着 通过 
和 触发 的 事件 不 会 冒 泡 ， 也 不 会 执行 相关 联 的 默认 操 


19.4.7 上 自 定 义 事件 


jQuery 的 事件 管理 体系 是 为 标准 事件 设计 的 ， 比 如 Web 浏 览 需 产 生 的 好 
标 单 击 和 按键 按 下 。 但 是 ，jQuery 不 限于 这 些 事件 ， 你 可 以 使 用 任何 想 
用 的 字符 吝 来 作为 事件 类 型 名 称 。 使 用 bind0 可 以 注册 这 种 * 目 定义 事 
件 ” 的 处 理 程序 ， 使 用 trigger0 可 以 调用 这 些 处 理 程序 。 


对 于 书写 模块 化 代码 ， 实 现 发 布 /订阅 模型 或 观察 者 模式 时 ， 这 种 目 定 
义 事件 处 理 程序 的 间接 调用 被 证 明 是 非常 有 用 的 。 使 用 自 定 义 事件 
时 ， 通 常 你 会 发 现 ， 使 用 jQuery.event.trigger0 男 数 奉 代 trigger(0) 方 法 ， 
来 全 局 触发 处 理 器 会 更 有 用 : 


// 用 户 单 击 "l0goff "按钮 时 ， 广 播 一 个 自 定义 事件 


// 给 任何 需要 保存 状态 的 感 兴趣 的 观察 者 ， 然 后 


// 导 航 到 logoff 页 面 


$("#logoff").click(function(){ 


$,event .trigger("logoff");// 广 播 一 个 事件 


window.location="logoff.php";// 导 航 到 新 页 面 


}); 


在 19.6.4 节 我 们 将 看 到 jQuery 的 Ajax 方法 会 像 上 面 这 样 广播 自 定义 事 
件 ， 以 通知 感 兴趣 的 监听 器 。 


19.4.8 实时 事件 


bind(0 方 法 绑 定 事 件 处 理 程序 到 指定 文档 元 素 ， 束 与 addEventListner0 和 
attachEvent() 《参见 第 17 章 ) 一 样 。 但 是 ， 使 用 jQuery 的 Web 应 用 经 常 
动态 创建 新 元 素 。 如 果 使 用 bind0 给 文档 中 的 所 有 <a> 元 素 绑 定 了 事 
件 处 理 程 序 ， 接 着 又 创建 了 融 有 <a> 元 素 的 新 文档 内 容 ， 这 些 新 元 素 
和 老 元 素 不 会 拥有 相同 的 事件 处 理 程序 ， 其 行为 将 不 一 样 。 


jQuery 使 用 “实时 事件 ”来 解决 这 一 问题 。 要 使 用 实时 事件 ， 需 要 使 用 
delegate0 和 undelegate() 方 法 来 蔡 代 bind0 和 unbind0。 通 钟 ， 在 
$(documenbD 上 调用 delegate(0)， 并 传 入 一 个 jQuery 选择 需 字 人 符 串 、 一 个 
jQuery 事件 类 型 字符 串 以 及 一 个 jQuery 事件 处 理 程序 函数 。 它 会 在 
document 或 window 上 (或 jQuery 对 和 象 中 的 任何 元 素 上 ) 注册 一 个 内 部 
处 理 程序 。 当 指定 类 型 的 事件 冒 泡 到 该 内 部 处 理 程序 时 ， 它 会 判断 事 
件 目标 〈 该 事件 所 发 生 在 的 元 素 ) 是 否 匹配 选择 器 字符 串 。 如 果 匹 
配 ， 则 调用 指定 的 处 理 程序 函数 。 因 此 ， 为 了 同时 处 理 老 的 和 新 创建 
的 <a> 元 素 上 的 mouseover 事 件 ， 可 能 需要 像 下 面 这 样 注册 处 理 程序 : 


$(document).delegate("a", "mouseover",1linkHandler); 


人 否则， 需要 使 用 bind0 来 处 理 文档 中 的 静态 部 分 ， 然 后 使 用 delegate0 来 
处 理 动态 修改 的 部 分 : 


// 静 态 链接 的 静态 事件 处 理 程序 


$("a").bind("mouseover",1inkHandler );// 文 档 中 动态 更 新 的 部 分 使 用 实时 事件 处 理 程 序 


$(".dynamic").delegate("a", "mouseover",1linkHandler ) ， 


与 bind() 方 法 拥有 三 参数 版 本 来 指定 事件 对 象 的 data 属 性 一 样 ， 
delegate() 方 法 拥有 4 参数 版 本 用 来 干 同样 的 事 。 使 用 这 种 版 本 时 ， 将 数 
据 值 作 为 第 三 参数 传 入 ， 处 理 程序 函数 则 作为 第 4 参数 。 


理解 这 点 很 重要 : 实时 事件 依赖 于 事件 冒 泡 。 当 事件 骨 泡 到 document 
对 象 时 ， 它 有 可 能 已 经 传递 给 了 很 多 静态 事件 处 理 程序 。 如 果 这 些 处 
理 程序 中 有 任何 一 个 调用 了 Event 对 象 的 cancelBubble() 方 法 ， 实 时 事件 
处 理 程 序 将 永远 不 会 调用 。 


jQuery 定义 了 一 个 名 为 live() 的 方法 ， 也 可 以 用 来 注册 实时 事件 。live() 
比 delegate0 更 难 理解 一 点 ， 但 与 bind0 一 样 ，liveO0 也 有 两 参数 和 三 参数 
的 调用 形式 ， 并 有 旦 在 实际 中 用 得 更 普遍 。 上 面 对 delegate() 的 两 个 调 
用 ， 也 可 以 使 用 live() 来 写 ， 如 下 所 示 : 


$("a").1live("mouseover",1linkHandler); 


$("a",$(".dynamic")).1live("mouseover",linkHandler ); 


在 jQuery 对 象 上 调用 live() 方 法 时 ， 该 对 象 中 的 元 素 实 际 上 并 没有 使 

用 。 真 正 有 关系 的 是 用 来 创建 jQuery 对 象 的 选择 器 字符 串 和 上 下 文 对 象 
(传递 给 $0 的 第 一 个 和 第 二 个 参数 ) 。jQuery 对 象 通过 context 和 

selector 属 性 来 使 得 这 些 值 可 用 (参见 19.1.2 市 ) 。 通 常 ， 仅 带 一 个 参数 

调用 $0 时 ，context 是 当前 文档 。 因 此 ， 对 于 jQuery 对 象 x， 下 面 两 行 代 

码 做 的 事情 是 一 样 的 : 


x.live(type,handler); 


$(x.context).delegate(x.selector, type,handler); 


要 注销 实时 事件 处 理 程序 ， 使 用 die0 或 undelegate0 。 可 以 带 一 个 或 两 个 
参数 调用 die0。 带 有 一 个 事件 类 型 参数 时 ，die0 会 移 除 匹配 选择 器 和 事 
件 类 型 的 所 有 实时 事件 处 理 程序 。 带 有 事件 类 型 和 处 理 程序 画 数 参数 
时 ， 它 只 会 移 除 掉 指定 的 处 理 程序 。 一 些 例子 ; 


$('a').die('mouseover');// 移 除 <a> 元 素 上 mouseover 事 件 的 所 有 实时 处 理 程序 


$('a').die('mouseover',1inkHandler);// 只 移 除 一 个 指定 的 实时 处 理 程序 


undelegate() 类 似 die()， 但 更 显 式 地 分 开 context (内 部 事件 处 理 程序 所 注 
册 的 元 素 ) 和 选择 怖 字符 串 。 上 面 对 die0 的 调用 可 以 写成 下 面 这样 : 


$(document) .undelegate('a');// 移 除 <a> 元 素 上 的 所 有 实时 处 理 程序 


$(document ) .undelegate('a'，'mouseover ');V// 移 除 mouseover 的 实时 处 理 程 请 


$(document ) .undelegate('a'，'mouseover' ,1LinkHandler );// 移 除 指定 处 理 程 序 


最 后 ，undelegate() 也 不 带 任何 参数 调用 。 在 这 种 情况 下 ， 它 会 注销 从 
选中 元 素 委托 的 所 有 实时 事件 处 理 程序 。 


19.5 ”动画 效果 


第 16 章 展示 了 如 何 通过 脚本 来 修改 文档 元 素 的 CSS 样 式 。 例 如 ， 通 过 设 
置 CSS 的 visibility 必 性， 可 以 显示 和 隐藏 元 素 。16.3.1 节 进一步 演示 了 如 
何 通过 脚本 控制 CSS 来 产生 动画 视觉 效果 。 例 如 ， 除 了 仅 让 一 个 元 素 消 
失 ， 还 可 以 在 半 秒 的 时 间 内 逐步 减少 opacity 属 性 的 值 ， 使 其 快速 淡 
出 ， 而 不 是 瞬间 消失 。 这 些 动 画 视觉 效果 能 给 用 户 带 来 更 愉悦 的 体 

验 ，jQuery 使 其 实现 起 来 更 简单 。 


jQuery 定义 了 fadeIn0 和 fadeOutO 等 简单 方法 来 实现 币 见 视觉 效 末 。 除 了 
人 简单 动画 方法，jQuery 还 是 义 了 一 个 animate() 方 法 ， 用 来 实现 更 复杂 的 


目 定义 动画 。 下 面 将 讲述 这 些 简 单 动画 方法 ， 以 及 更 通用 的 animate() 方 
法 。 首 先 ， 让 我 们 了 解 下 jQuery 动画 框架 的 一 些 通用 特性 。 


每 段 动 画 都 有 时 长 ， 用 来 指定 动画 效果 持续 多 长 时 间 。 可 以 使 用 坚 秒 
数值 或 字符 串 来 指定 时 长 。 字 人 符 串 "fast" 表 示 200ms。 字 人 符 串 "slow" 表 示 
600ms。 如 果 指 定 的 字符 串 时 长 jQuery 无 法 识别 ， 则 采用 默认 时 长 
400ms。 可 以 给 jQuery.fx.speeds 添 加 新 的 字符 串 到 数值 映射 天 系 来 定义 
新 的 时 长 名 字 : 


jQuery .fx.speeds["medium-fast"]=300; 


jQuery .fx.speeds["medium-slow"]=500; 


jQuery 动画 方法 经 党 使 用 动画 时 长 来 作为 可 选 的 第 一 个 参数 。 如 琳 省 略 
会 立刻 跳 到 最 后 一 帧 ， 没 有 中 间 的 动画 效 采 : 


$("#message").fadeIn();// 用 淡 入 效果 显示 元 素 ， 持 续 400ms 


$("#message") .fadeout("fast" );// 用 淡出 效果 隐藏 元 素 ， 持 续 200ms 


荣 用 动画 


在 很 多 网 站 上 ， 动 画 视觉 效果 已 经 成 为 标 配 ， 但 是 ， 并 不 是 所 有 用 户 
都 喜欢 : 有 些 用 户 觉 得 动画 分 散 注意 力 ， 有 些 则 感觉 动画 导致 操作 不 
便 。 残 障 用 户 可 能 会 发 现 动画 会 妨碍 屏幕 阅读 右 等 辅助 软件 正常 工 

作 ， 老 旧 人 硬件 上 的 用 户 则 会 感觉 动画 会 耗费 很 多 CPU 时 间 。 为 了 对 用 
户 傈 持 查 重 ， 我 们 通 利 应 该 让 动画 简单 朴素 ， 并 提供 一 个 选项 可 以 彻 
奈 荣 用 动画 。 使 用 jQuery 可 以 非常 简单 地 全 局 蔡 用 所 有 动画 : 简单 地 设 
置 jQuery.fx.off 为 rue 束 好 。 该 设置 会 将 每 段 动 画 的 时 长 部 变 成 0oms， 这 
样 动画 看 起 来 就 像 是 没有 动画 效果 的 立刻 切换 了 。 


为 了 让 最 终 用 户 可 以 禁用 动画 ， 可 以 在 脚本 上 使 用 如 下 代码 : 


$(".stopmoving").click(function(){jQuery.fx.off=true;}); 


这 样 ， 当 网 页 设计 者 在 页 面 中 加 入 这 有 "stopmoving" 类 的 元 素 时 ， 用 户 
就 可 以 单 击 该 元 素来 禁用 动画 。 


jQuery 动画 是 异步 的 。 调 用 fadeIn0 等 动画 方法 时 ， 它 会 立刻 返回 ， 动 
画 则 在 “后 台 ” 执 行 。 由 于 动画 方法 会 在 动画 完成 之 前 返回 ， 因 此 可 以 
向 很 多 jQuery 动画 方法 传 入 第 二 个 参数 (也 是 可 选 的 ) ， 该 参数 是 一 个 
函数 ， 会 在 动画 完成 时 调用 。 该 函数 在 调用 时 不 会 有 任何 参数 传 入 ， 
但 this 值 会 设置 为 发 生动 画 的 文档 元 素 。 对 于 每 个 选中 元 素 者 会 调用 一 
次 该 回调 函数 : 


// 用 淡 入 效果 快速 显示 元 素 ， 动 画 完成 时 ， 在 元 素 里 显示 一 些 文 字 


$("#message").fadeIn("fast",function(){$(this).text("Hello World");}); 


给 动画 方法 传 入 回调 函数 ， 可 以 在 动画 结束 时 执行 操作 。 不 过 ， 如 采 
只 是 想 顺 序 执行 多 段 动画 的 话 ， 回 调 方式 是 没有 必要 的 。jQuery 动 画 默 
认 是 队列 化 的 (19.5.2 节 下 面 的 2. 动画 选项 对 象 ” 节 会 讲述 如 何 覆 盖 默 
认 方 式 ) 。 如 果 一 个 元 素 已 经 在 动画 过 程 中 ， 再 调用 一 个 动画 方法 
时 ， 新 动画 不 会 立刻 执行 ， 而 会 延迟 到 当前 动画 结束 后 才 执行 。 例 
如 ， 可 以 让 一 个 元 素 在 持久 显示 前 ， 爷 内 烁 一 阵 : 


$("#blinker").fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(); 


jQuery 动画 方法 可 以 接受 可 选 的 时 长 和 回调 参数 。 还 可 以 传 入 一 个 对 象 
来 调用 动画 方法 ， 该 对 象 的 属性 指定 动画 选项 


// 将 时 长 和 回调 参数 作为 对 象 属性 而 不 是 参数 传 入 


$("#message" ) ,fadeIn({ 


duration:"fast", 


complete:function(){$(this).text("Hello World");} 

}); 

使 用 通用 的 animate() 方 法 时 ， 经 常 传 入 选项 对 象 作为 参数 ， 其 实 ， 这 也 
可 以 用 于 更 简单 的 动画 方法 。 使 用 选项 对 象 可 以 设置 高 级 选项 ， 比 如 
控制 动画 的 队列 和 缓 动 。19.5.2 节 下 面 的 “2. 动 画 选项 对 象 "会 讲述 可 
用 的 选项 。 

19.5.1 ”简单 动画 


jQuery 定义 了 9 个 简单 的 动画 方法 用 来 隐 减 和 显示 元 素 。 根 据 实现 的 动 
画 类 型 ， 它 们 可 以 分 为 二 组 : 


fadeIn() ~、 fadeOut() 、 fadeTo() 


这 是 最 简单 的 动画 : fadeIn0 和 fadeOut(O 人 简单 地 改变 CSS 的 opacity 必 性 来 

显示 或 隐藏 元 闵 。 两 者 都 接受 可 选 的 时 长 和 回调 参数 。fadeTo0 稍 有 不 

同 : 它 需 要 传 入 一 个 opacity 目 标 值 ， fadeTo() 会 会 将 元 素 的 当前 opacity 值 

变化 到 目标 值 。 调 用 fadeTo() 方 法 时 ， 第 一 参数 必须 是 时 长 (或 选项 对 
) ， 第 二 参数 是 opacity 目 标 值 ， 回 调 范 数 则 是 可 选 的 第 三 个 参数 。 


show() 、 hide() 、 toggle() 


上 上面 的 fadeOut0) 方 法 可 以 让 元 素 不 可 见 ， 但 依旧 保留 了 元 素 在 文档 布 
局 中 的 占 位 。hide() 方 法 则 会 将 元 素 从 布局 中 移 除 ， 束 好 像 把 CSS 的 

display 属 性 设置 为 none 一 样 。 当 不 这 参数 调用 时 ，hide0 和 show(0) 方 法 
只 是 简单 地 立刻 隐藏 或 显示 选中 元 素 。 带 有 时 长 〈 或 选项 对 象 ) 参数 
上 时， 它们 会 让 隐藏 或 显示 有 个 动画 过 程 。hide() 在 将 元 素 的 opacity 减 少 
a 同时 它 还 会 将 元 素 的 宽度 和 高 度 收 缩 到 0.show0O 则 进行 反 向 操 


toggle0 可 以 改变 在 上 面 调 用 它 的 元 素 的 可 视 状 态 : 如 果 隐 藏 ， 则 调用 
show(); 如 有 果 显 示 ， 则 调用 hide0。 与 show0 和 hide0 一 样 ， 必 须 传 入 时 
长 或 选项 对 象 给 toggle() 来 产生 动画 效果 。 给 toggle() 传 入 true 和 不 带 参 数 
调用 show0 是 一 样 的 ， 传 入 false 则 和 不 禹 参 数 调用 hideO) 是 一 样 的 。 注 


， ee 它 会 注册 为 事件 处 理 程 
这 在 19.4.1 节 讲述 过 。 


志 涡 


slideDown() 、 slideUp() 、 slideToggle() 


slideUpO 会 隐藏 jQuery 对 象 中 的 元 素 ， 方 式 是 将 其 高 度 动 态 变化 到 0， 
然后 设置 CSS 的 display 属 性 为 "none"。slideDown0 执 行 反 癌 操 作 ， 来 使 
得 隐藏 的 元 素 再 次 可 见 。slideToggle0O 使 用 向 上 滑动 或 向 下 滑动 动画 来 
。 这 三 个 方法 都 接受 可 选 的 时 长 和 回调 参数 (或 选 
项 对 象 参 类 


下 面 是 一 个 例子 ， 它 调用 了 该 组 方法 中 的 每 一 个 。 要 记得 jQuery 动画 默 
认 情 况 下 是 队列 化 的 ， 因 此 这 些 动 画 会 一 个 接 一 个 执行 : 


炎 出 效果 将 所 有 图 像 隐 藏 ， 然 后 显示 它们 ， 接 着 向 上 滑动 ， 再 向 下 滑动 


// 


sa 


$("img").fadeOut().show(300).slideUp().slideToggle(); 


各 种 jQuery 插件 《参见 19.9 节 ) 会 添加 额外 的 动画 方法 到 jQuery 类 库 
中 。jQuery UI 类 库 (参见 19.10 节 ) 拥有 一 套 特别 全 面 的 动画 效果 。 


19.5.2 ” 目 定 义 动 画 


与 简单 动画 方法 实现 的 效果 相 比 ， 使 用 animate() 方 法 可 以 实现 更 多 通用 
动画 效果 。 传 给 animate() 方 法 的 第 一 个 参数 指定 动画 内 容 ， 和 列 余 参数 指 
定 如 何 定制 动画 。 第 一 个 参数 是 必需 的 : 它 必 须 是 一 个 对 象 ， 该 对 象 
的 属性 指定 要 变化 的 CSS 属 性 和 它们 的 目标 值 。animate() 方 法 会 将 每 个 
元 素 的 这 些 CSS 属 性 从 初始 值 变化 到 指定 的 目标 值 。 例 如 ， 上 面 描 述 的 
slideUpO 效 果 可 以 用 以 下 代码 来 实现 : 


// 将 所 有 图 片 的 高 度 缩小 到 0 


$("img").animate( {height:0}); 


第 二 个 参数 是 可 选 的 ， 可 以 传 入 一 个 选项 对 象 给 animate() 方 法 : 


NS 


$("#sprite").animate({ 


opacity: .25,// 将 不 透明 度 调整 为 0 .25 


font-size:10// 将 字体 大 小 变化 到 10 像 素 


}1{ 


?duration:500,// 动 画 持续 半 秒 


complete:function( ){// 在 动画 完成 时 调用 该 函数 
this.text("Goodbye" ) ;/V 改 变 元 素 的 文本 
3 


}); 


除了 将 选项 对 象 作为 第 二 个 参数 传 入 ，animate() 方 法 还 允许 将 三 个 最 常 
用 的 选项 作为 参数 传 入 。 可 以 将 动画 时 长 (数值 或 字符 串 ) 作 为 第 二 
个 参数 传 入 。 可 以 指定 组 动画 数 名 为 第 二 个 参数 。 (很 快 会 讲解 缓 动 
函数 。) 最 后 可 以 将 回调 函数 指定 为 第 四 个 参数 。 


通常 ，animate() 方 法 接受 两 个 对 象 参数 。 第 一 个 指定 动画 内 容 ， 第 二 个 
指定 如 何 定 制 动 画 。 要 彻底 理解 如 何 使 用 jQuery 来 实现 动画 ， 还 需要 弄 
明日 这 两 个 对 象 的 更 多 细 广 。 


1. 动 画 属 性 对 象 


animate() 方 法 的 第 一 个 参数 必须 是 对 象 。 该 对 象 的 属性 名 必须 是 CSS 属 
性 名 ， 这 些 属性 的 值 必须 是 动画 的 目标 值 。 动 画 只 文 持 数值 属性 ， 对 
于 颜色 、 字 体 或 display 等 枚 举 属性 是 无 法 实现 动画 效果 的 !。 如 果 属 
性 值 站 数值 ， 则 默认 单位 站 像素 。 如 有 属性 值 羡 字符 串 ， 可 以 指定 单 
位 。 如 果 省 略 单 位 ， 则 上 默认 依旧 是 像素 。 还 可 以 指定 相对 值 ， 

用 “+=” 前 缀 表示 增加 ， 或 用 “-=” 表 示 减 少 。 例 如 : 


$("p") ,animate({ 


"margin-left":"+=.5in",// 增 加 段落 缩 进 


opacity:"-=.1"// 同 时 减少 不 透明 度 


}); 


注意 上 面 的 对 象 字面 量 中 属性 名 "margin-left" 两 旁 引 号 的 使 用 。 属 性 名 
中 的 连 学 符 表 示 这 文 不 是 一 个 合法 的 JavaScript 标 识 符 ， 所 以 它 必 须 用 引 
号 括 起 来 。 当 然 ，jQuery 也 人 允许 使 用 marginLeft 文 种 大 小 写 混 合 的 写 


法 。 


除了 数值 (可 以 带 有 单位 、“+=” 或 “-=” 前 级 ) ， 在 jQuery 动画 属性 对 象 
中 ， 还 可 以 使 用 三 个 其 他 值 。"hide" 值 会 保存 属性 的 当前 值 ， 然 后 将 该 
属性 的 值 变 化 到 0。"show" 值 会 将 CSS 属 性 的 值 还 原 到 之 前 保存 的 值 。 
如 果 一 段 动 画 使 用 了 "show"，jQuery 会 在 动画 完成 时 调用 show() 方 法 。 
如 果 一 段 动 画 使 用 了 "hide"，jQuery 会 在 动画 完成 时 调用 hide() 方 法 。 


还 可 以 使 用 "toggle" 来 实现 显示 或 隐藏 ， 具 体 效 果 取 决 于 该 属性 的 当前 
设置 。 可 以 用 下 面 的 代码 实现 "slideRight" 效 果 (和 slideUp0 方 法 类 似 ， 
只 是 动画 内 容 是 元 素 宽度 ) : 


$("img").animate({ 


width:"hide", 


borderLeft:"hide", 


borderRight:"hide", 


paddingLeft:"hide", 


paddingRight:"hide" 


}); 


将 上 面 的 属性 值 替 换 为 "show" 或 "toggle"， 就 可 以 产生 水 平滑 动 的 伸缩 
效果 ， 类 似 slideDown0 和 slideToggleO) 效 果 。 


2. 动 画 选 项 对 象 


animate() 方 法 的 第 二 个 参数 是 可 选 的 ， 该 选项 对 象 用 来 指定 动画 如 何 执 
行 。 有 两 个 最 重要 的 选项 我 们 已 经 接触 过 。duration 属 性 指定 动画 持续 
的 蝇 秒 时 间 ， 该 属性 的 值 还 可 以 是 "fast"、"slow" 或 任何 在 
jQuery.fx.speeds 中 定义 的 名 称 。 


另 一 个 接触 过 的 选项 是 complete 属 性 : 它 指 明 在 动画 完成 时 的 回调 男 
数 。 和 complete 属 性 类 似 ，step 属 性 指定 在 动画 每 一 步 或 每 一 帧 调用 的 
回调 函数 。 在 回调 函数 中 ，this 指 同 正 在 连续 变化 的 元 素 ， 第 一 个 参数 
则 是 正在 变化 的 属性 的 当前 值 。 


在 选项 对 象 中 ，qdueue 属 性 指定 动画 是 否 需要 队列 化 一 一 是否 需要 等 到 
所 有 尚未 发 生 的 动画 都 完成 后 再 执行 该 动画 。 默 认 情 况 下 ， 所 有 动画 
都 是 队列 化 的 。 将 queue 属 性 设置 为 false 可 以 取消 队列 化 。 非 队列 化 的 
动画 会 立刻 执行 。 随 后 队列 化 的 动画 不 会 等 待 非 队 列 化 的 动画 执行 完 
成 后 才 执 行 。 考 虑 以 下 代码 : 


$("img").fadeIn(500) 
.animate({"width":"+=100"}, {queue:false, duration:1000}) 


.fadeOut (500); 


上 面 的 fadeIn() 和 fadeOut() 效 果 是 队列 化 的 ， 但 animate() 的 调用 (在 
1000 蓝 秒 内 连续 改变 width 属性 ) 是 非 队 列 化 的 。 这 段 width 动 画 和 
fadeIn() 效 果 的 开始 时 间 相 同 。fadeOut() 效 果 会 在 fadeIn() 效 果 完 成 时 立 
刻 开 始 ， 它 不 会 等 到 width 动画 完成 。 


缓 动 函数 
实现 动画 时 ， 时 间 和 动画 属性 值 之 间 可 以 是 线性 关系 ， 这 种 方式 很 直 


接 ， 但 不 够 好 。 例 如 ， 一 段 时 长 400ms 的 动画 ， 在 100ms 时 ， 动 画 完 成 
了 25%。 在 该 线性 动画 中 ， 如 果 将 不 透明 度 从 1.0 变 化 到 0.0 (可 能 是 一 


个 fadeOutO 调 用 ) ， 则 在 100ms 时 ， 不 透明 度 应 该 是 0.75。 然 而 ， 事 实 
表明 ， 非 线性 的 动画 效果 会 带 来 更 恰 翌 的 体验 。 因 此 ，jQuery 引 入 

了 “ 绥 动 函数 ”"， 来 将 基于 时 间 的 完成 百分比 映射 到 动画 效果 的 百 分 

比 。jQuery 在 调用 绥 动 钞 数 时 会 传 入 一 个 基于 时 间 的 0~~1 之 间 的 值 。 绥 
动 函 数 会 返回 另 一 个 0~1 之 间 的 值 ，jQuery 会 根据 该 返回 值 来 计算 CSS 
属性 的 值 。 通 常 ， 组 动画 数 在 传 入 0 时 会 返回 0， 在 传 入 1 时 会 返回 1。 
人 可 以 是 非 线 性 的 ， 这 可 以 让 动画 有 加 速 和 
城 速效 采 。 


jQuery 的 默认 组 动画 数 是 正弦 函数 : 它 开 始 很 慢 ， 接 着 加 速 ， 然 后 再 组 
慢 “ 缓 动 * 变 化 到 终 值 。jQuery 中 的 组 动画 数 有 名 字 。 默 认 的 绥 动 印 数 名 
为 "swing"，jQuery 还 实现 了 一 个 线性 缓 动画 数 ， 名 字 为 "linear"。 可 以 
添加 自 定义 缓 动画 数 到 jQuery.easing 对 象 上 : 


jQuery.easing["squareroot"]=Math.sqrt,; 
在 jQuery UI 类 库 中 ， 有 一 个 5Query 绥 动 插件 ”定义 了 一 套 更 复杂 的 绥 动 
函数 。 


和 狮 余 的 动画 选项 和 绥 动 函数 有 关 。 选 项 对 象 的 easing 属 性 指定 绥 动 函数 
名 。jQuery 默 认 使 用 的 是 命名 为 "swing" 的 正弦 函数 。 如 果 想 让 动画 线 
性 变化 ， 可 以 使 用 如 下 选项 : 


$("img").animate({"width":"+=100"}, {duration:500,easing:"]linear"}); 


是 否 还 记得 ， 除 了 传 入 选项 对 象 ，duration、easing 和 complete 选 项 可 以 
指定 为 animate() 方 法 的 参数 。 因 此 ， 上 面 的 代码 还 可 以 写成 : 


$("img").animate({"width":"+=100"},500,"linear"); 


最 后 ，jQuery 动 画 框 染 甚 至 还 允许 为 不 同 的 CSS 动 画 属性 指定 不 同 的 绥 
动画 数 。 这 有 两 种 方式 来 实现 ， 代 码 示 例如 下 : 


// 用 hide( ) 方 法 隐藏 图 片 ， 


中 


片 的 大 小 采用 线性 动画 


// 不 透明 度 则 使 用 默认 的 "swing" 绥 动画 数 


// 使 用 specialEasing 选 项 来 指定 自 定 义 缓 动画 数 


$("img").animate( {width:"hide",height:"hide",opacity:"hide"},? 


{specialEasing: {width:"linear",height:"linear"}});// 实 现 方 式 二 : 


// 在 第 一 个 对 象 参数 中 传 入 [目标 值 , 缓 动 画 数 ] 数 组 


$("img") .animate({ 
width:["hide","linear"],height:["hide","linear"],opacity:"hide" 


}); 


19.5.3 ”动画 的 取消 、 延 迟 和 队列 


jQuery 还 定义 了 一 些 动画 和 队列 相关 的 方法 ， 我 们 需要 进一步 了 解 。 首 
先是 stop(0 方 法 : 它 用 来 停止 选中 元 素 上 的 当前 正在 执行 的 任何 动画 。 
top() 方 法 接受 两 个 可 选 的 布尔 值 参数 。 如 采 第 一 个 参数 是 true， 会 清除 
该 选中 元 素 上 的 动画 队列 : 除了 停止 当前 动画 ， 还 会 取消 任何 等 待 执 
行 的 动画 。 第 一 个 参数 的 默认 值 是 false: 如 果 忽 略 该 参数 ， 等 待 执 行 的 
动画 不 会 被 取消 。 第 二 个 参数 用 来 指定 正在 连续 变化 的 CSS 属 性 是 否 你 
留 当 前 值 ， 还 是 应 该 变化 到 最 终 目 标 值 。 传 入 true 可 以 让 它们 变化 到 最 
终 值 。 传 入 false (或 省 略 该 参数 ) 会 让 它们 保持 为 当前 值 。 


当 动 画 是 由 用 户 事件 触发 时 ， 在 开始 新 的 动画 前 ， 可 能 需要 取消 掉 当 
前 或 等 待 执行 的 任何 动画 。 比 如 : 


// 当 电 标 悬浮 在 图 片上 时 ， 图 片 变 得 不 透明 


// 注 意 : 我 们 没有 在 鼠标 事件 上 持 有 队列 化 动画 


$("img").bind({ 


mouseover :function(){$(this).stop().fadeTo(300,1.0);}, 


mouseout:function(){$(this).stop().fadeTo(300,0.5);} 


}); 


与 动画 相关 的 第 二 个 方法 是 delay()。 这 会 直接 添加 一 个 时 间 延 迟 
队列 中 ， 第 一 个 参数 是 时 长 (以 毫秒 为 单位 的 数值 或 字符 串 ) ， 

个 参数 是 队列 名 ， 是 可 选 的 (通常 并 不 需要 第 二 个 参数 : 接 下 来 我 人 
会 解释 队列 名 ) 。 可 以 在 复合 动画 中 使 用 delay0， 代 码 如 下 : 


// 快 速 淡出 为 半 透 明 ， 等 一 等 ， 然 后 向 上 滑动 


$("img").fadeTo(100,0.5).delay(200).slideUp(); 


在 上 面 的 stop(0) 方 法 例子 中 ， 使 用 mouseover 和 mouseout 事 件 来 变化 图 片 
的 透明 度 。 可 以 调整 该 例子 ， 在 开始 动画 时 ， 添 加 一 个 短小 的 延迟 。 
当 鼠 标 快速 滑 过 图 片 而 不 停留 时 ， 不 会 有 任何 分 神 的 动画 产 


$("img").bind({ 


mouseover:function(){$(this).stop(true).delay(100).fadeTo(300,1.0);}, 


mouseout:function(){$(this).stop(true).fadeTo(300,0.5);} 


}); 


和 动画 相关 的 最 后 一 租 万 法 可 以 对 jQuery 外 队列 机 制 进 了 底层 操作 。 
jQuery 队列 是 按 顺序 执行 的 画 数列 表 。 每 一 个 队列 都 与 一 个 文档 元 素 


(或 者 是 Document 或 Window 对 象 ) 关联 ， 每 一 个 元 素 的 队列 都 与 其 他 
元 素 的 队列 彼此 独立 。 可 以 使 用 queque() 方 法 给 队列 添加 一 个 新 函数 。 
当 某 个 函数 到 达 队 列 头 部 时 ， 它 会 自动 从 队列 中 去 除 并 被 调用 。 当 画 
数 被 调用 时 ，this 指 癌 与 队列 相 天 联 的 元 妈 。 被 调用 的 函数 会 传 入 唯一 
一 个 回调 函数 作为 参数 。 当 轴 数 完成 运行 时 ， 它 必须 调用 回调 函数 。 
这 可 以 运行 队列 中 的 下 一 个 操作 ， 如 有 果 不 调用 回调 函数 ， 该 队列 会 售 
止 运行 ， 剩 余 的 函数 将 永远 不 会 锌 调用 。 


我 们 知道 ， 通 过 给 jQuery 动画 方法 传 入 回调 函数 ， 束 可 以 在 动画 完成 后 
执行 一 些 操作 。 通 过 对 函数 执行 队列 操作 ， 也 可 达到 这 一 目的 : 


Ls 


// 淡 入 显示 一 个 元 素 ， 稍 等 片刻 ， 设 置 一 些 文字 ， 然 后 变化 边框 


$("#message").fadeIn().delay(200).queue(function(next){ 


$(this).text("Hello World");// 显 示 一 些 文字 


next( );// 运 行 队列 中 的 下 一 项 


}) .animate({borderwidth:"+=10px;"});// 将 边框 变 粗 


队列 函数 中 的 回调 函数 参数 是 jQuery 1.4 引 入 的 新 特性 。 对 于 jQuery 类 
， 前 的 版 本 ， 需 要 调用 dequeue() 方 法 “手动 "取消 队列 中 的 下 一 个 函 


$(this).dequeue();// 替 代 next() 方 法 


如 果 在 队列 中 什么 也 没有 ， 调 用 dequeue(0) 方 法 不 会 有 任何 啊 应 。 反 
之 ， 它 则 会 将 队列 头 部 的 函数 从 队列 中 移 除 ， 并 调用 它 ， 设 置 的 this 值 
和 传 入 的 回调 函数 如 上 所 述 。 


还 有 一 些 笨拙 的 方式 来 操作 队列 。clearQueue(0) 方 法 用 来 清除 队列 。 给 
queue() 方 法 传 入 一 个 函数 组 成 的 数组 而 不 是 单一 函数 时 ， 会 用 传 入 的 
函数 数组 来 蔡 换 当前 队列 。 如 果 在 调用 queue() 方 法 时 ， 不 传 入 任何 参 
数 ， 则 会 返回 当前 队列 数组 。jQuery 还 将 queue() 和 dequeue() 定 义 成 了 工 


用 图 数 。 如 果 想 给 元 系 e 的 队列 添加 一 个 玫 数 f， 可 以 使 用 以 下 方法 或 函 


类 


$(e).queue(f);// 创 建 一 个 持 有 e 的 jQuery 对 象 ， 并 调用 queue( ) 方 法 


jQuery .queue(e,f);// 直 接 调 用 jQuery .queue( ) 工 具 函 数 


最 后 ， 留意 下 queue() 、 dequeue() 和 clearQueue() 方 法 都 可 以 有 一 个 可 选 
的 队列 名 来 作为 第 一 个 参数 。jQuery 动 画 方法 使 用 的 队列 名 是 "fx"， 这 
是 没有 指定 队列 名 时 默认 使 用 的 队列 。 当 想 要 顺序 执行 异步 操作 时 ， 
jQuery 队列 机 制 非常 有 用 : 原来 需要 给 每 一 个 异步 操作 传 入 回调 函数 来 
触发 队列 中 的 下 一 个 函数 ， 现 在 可 以 直接 使 用 jQuery 队列 来 管理 异步 序 
列 。 只 须 传 入 非 "fx" 的 队列 名 ， 并 记得 队列 中 的 函数 不 会 自动 执行 。 必 
须 显 式 调用 dequeue() 方 法 来 运行 第 一 个 函数 ， 然 后 每 一 步 操 作 在 完成 
时 必须 把 下 一 个 操作 从 队列 中 移出 。 


19.6 jQuery 中 的 Ajax 


在 Web 应 用 编程 技术 里 ，Ajax 很 流行 ， 它 使 用 HTTP 脚 本 (参考 第 18 
章 ) 来 按 需 加 载 数据 ， 而 不 需要 刷新 整个 页 面 。 在 现代 Web 应 用 中 ， 
Ajax 技术 非常 有 用 ， 因 雌 Query 内 置 了 Ajax 工 具 玉 简化 使 用 。 jQuery 定 
义 了 一 个 高 级 工具 方法 和 四 个 高 级 工具 函数 。 这 些 高 级 工具 都 基于 同 
一 个 强大 的 底层 函数 : jQuery.ajax0。 下 面 的 章节 会 首先 描述 这 些 高 级 
工具 ， 然 后 再 详细 前 述 jQuery.ajax0 画 数 。 为 了 彻底 理解 高 级 工具 的 使 
用 ， 我 们 需要 理解 jQuery.ajax0， 即 便 可 能 永远 不 用 显 式 使 用 它 。 


19.6.1 lo0ad0) 方 法 
load() 是 所 有 jQuery 工具 中 最 简单 的 : 同 它 传 入 一 个 URL， 它 会 异步 加 


载 该 URL 的 内 容 ， 然 后 将 内 容 插 入 每 一 个 选中 元 素 中 ， 替 换 挥 已 经 存 
在 的 任何 内 容 。 例 如 : 


4 


省 


每 隔 60 秒 加 载 并 显示 最 新 的 状态 报告 


setIinterval(function(){$('#status').load("status_report.htm]l");},60000); 


19.4.1 方 也 讲 到 了 loadO) 方 法 ， 它 用 来 注册 10ad 事 件 的 处 理 程序 。 如 果 传 
给 该 方法 的 第 一 个 参数 是 函数 而 不 是 字符 串 ， 则 load0) 方 法 是 事件 处 理 
程序 注册 方法 而 不 是 Ajax 方法 。 如 果 只 想 显示 被 加 载 文 档 的 一 部 分 ， 

可 以 在 URL 后 面 添加 一 个 空格 和 一 个 jQuery 选择 器 。 当 URL 加 载 完成 
后 ，jQuery 会 用 指定 的 选择 器 来 从 加 载 好 的 HIML 中 选取 需要 显示 的 部 
J 


// 加 载 并 显示 天 气 预 告 的 温度 部 分 


$('#temp').load("wheather_report.html#temperature"); 


注意 :URL 后 面 的 选择 器 看 起 来 很 像 片断 标识 符 〈14.2 节 讲述 的 UREL 的 
hash 部 分 ) 。 不 同 的 是 ， 如 果 想 只 插入 被 加 载 文 档 的 选中 部 分 的 话 ， 则 


空格 是 必需 的 。 


除了 必须 的 URL 参 数 ，load() 方 法 还 接受 两 个 可 选 参数 。 第 一 个 可 选 参 
数 表示 的 数据 ， 可 以 追加 到 URL 后 面 ， 或 者 与 请 求 一 起 发 送 。 如 果 传 
入 的 是 字符 串 ， 则 会 追加 到 URL 后 面 ( 放 在 “?” 或 “&” 后 面 ) 。 如 果 传 
入 对 象 ， 该 对 象 会 被 转化 为 一 个 用 *&” 分 隔 的 名 / 值 对 后 与 请 求 一 起 发 
送 。 〈 对 象 转 化 为 字符 串 的 具体 细节 在 19.6.2 节 下 面 

的 "2.jQuery.getJSONQO" 节 中 描述 。) 通常 情况 下 ，load() 方 法 发 送 HTTP 
但 是 如 果 传 入 数据 对 象 ， 则 它 会 发 送 POST 请 求 。 下 面 是 两 
上 例子 : 


// 加 载 特定 区 号 的 天 气 预报 


tr 
IC 


定 为 华氏 


$('#temp' ).load("us_weather_report.html", "zipcode=02134");// 使 用 对 象 作为 数据 ， 
温度 


$('#temp').load("us weather_report.html", {zipcode:02134,units:'F'}); 


load() 方 法 的 另 一 个 可 选 参数 是 回调 函数 。 当 Ajax 请 求 成 功 或 未 成 功 ， 
以 及 ( 当 请 求 成 功 时 ， URL 加 载 完 毕 并 插入 选中 元 素 时 ， 会 调用 该 回 


调 函 数 。 如 果 没 有 指定 任何 数据 ， 回 调 函 数 可 以 作为 第 二 个 参数 传 
入 。 否 则 ， 它 必须 是 第 三 个 参数 。 在 jQuery 对 和 象 的 每 一 个 元 素 上 都 会 调 
用 回调 函数 ， 并 且 每 次 调用 都 会 传 入 三 个 参数 : 被 加 载 UREL 的 完整 文 
本 内 容 、 状 态 码 字符 串 ， 以 及 用 来 加 载 该 URL 的 XMLHttpRequest 对 
象 。 其 中 ， 状 态 参 数 是 jQuery 的 状态 码 ， 不 是 HITTP 的 状态 码 ， 其 值 是 
类 似 "success"、"error" 和 "timeout" 的 字符 串 。 


jQuery 的 Ajax 状态 码 


jQuery 的 所 有 Ajax 工具 ， 包 括 load(0) 方 法 ， 会 调用 回调 函 数 来 提供 请 求 
成 功 或 失败 的 异步 消 轧 。 这 些 回调 函数 的 第 二 个 参数 是 一 个 字符 串 ， 
可 以 取 以 下 值 : 


"SUCCeSS"” 
表示 请 求 成 功 完成 。 
"notmodified" 


该 状态 码 表 示 请 求 已 正常 完成 ， 但 服务 器 返回 的 啊 应 内 容 是 HTTP 
304"Not Modified"， 表 示 请 求 的 URL 内 容 和 上 次 请 求 的 相同 ， 没 有 变 
化 。 只 有 在 选项 中 设置 ifModified 为 true 时 ， 该 状态 码 才 会 出 现 (参考 
19.6.3 世 下 面 的 “1. 通 用 选项 * 节 ) 。jQuery 1.4 认 为 "notmodified" 状 态 码 
是 成 功 的 ， 但 之 前 的 版 本 会 将 其 当成 错误 。 


"error" 


表示 请 求 没 有 成 功 完 成 ， 原 因 和 是 某 些 HTTP 错误 。 更 多 细 世 ， 可 以 检查 
传 入 每 一 个 回调 函数 中 的 XMLHttpRequest 对 象 的 HITP 状 态 码 来 获取 。 


"timout" 


如 果 Ajax 请 求 没有 在 选 定 的 超时 区 间 内 完成 ， 会 调用 错误 回调 ， 并 传 
入 该 状态 码 。 默 认 情况 下 ，jQuery 的 Ajax 请 求 没有 超时 限定 ， 只 有 指定 
了 timeout 选 项 ( 见 19.6.3 节 下 面 的 “1. 通 用 选项 * 节 ) 时 才能 着 到 该 状态 
码 。 


"parsererror" 


该 状态 码 表示 HTTP 请 求 已 成 功 完成 ， 但 jQuery 无 法 按照 期 望 的 方式 解 
析 。 例 如 ， 如 果 服 务 器 返回 的 是 不 符合 格式 的 XML 文 档 或 不 符合 格式 
的 JSON 文 本 时 ， 就 会 出 现 该 状态 码 。 注 意 拼写 ， 是 "parsererror"， 而 不 


是 "parseerror"。 


19.6.2 ”Ajax 工具 函数 


jQuery 的 其 他 Ajax 高 级 工具 不 是 方法 ， 而 是 函数 ， 可 以 通过 jQuery 或 
$ 直 接 调 用 ， 而 不 是 在 jQuery 对 象 上 调用 。jQuery.getScriptO 加 载 并 执行 
JavaScript 代 码 文件 。jQuery.geUJSONO 加 载 URL， 将 其 解析 为 JSON, 并 
将 解析 结 末 传递 到 指定 的 回调 函数 中 。 这 两 个 函数 都 会 调用 一 个 更 通 
用 的 URL 获 取 函 数 : jQuery.get0。 最 后 ，jQuery.post0 和 jQuery.getO 很 
类 似 ， 除 了 执行 的 是 HTTP POST 而 不 是 GET 请 求 。 与 0ad() 方 法 一 样 ， 
所 有 这 些 画 数 都 古 异 步 的 :在 任何 数据 加 载 前 它们 就 会 返回 调用 关 ， 
加 载 结果 则 通过 调用 指定 的 回调 函数 来 通知 。 


1.jQuery.getScript() 


jQuery.getScript() 函 数 的 第 一 个 参数 是 JavaScript 代 码 文件 的 URL。 它 会 
异步 加 载 文 件 ， 加 载 完 成 后 在 全 局 作用 域 执行 该 代码 。 它 能 同时 适用 
于 同 源 和 跨 源 脚 本 : 


// 从 其 他 服务 器 动态 加 载 脚 本 


jQuery.getSscript("http://example.com/js/widget.js"); 


可 以 传 入 回调 函数 作为 第 二 个 参数 ， 在 这 种 情况 下 ，jQuery 会 在 代码 加 
载 和 执行 完成 后 调用 一 次 该 回调 函数 : 


// 加 载 一 个 类 库 ， 并 在 加 载 完 成 时 立刻 使 用 它 


jQuery ,getScript("]js/]jdquery,my_plugin,js",function( ){ 


$('div' ) .my_plugin( );// 使 用 加 载 的 类 库 


}); 


jQuery.getScriptO 通 常会 使 用 XMLHttpRequest 对 象 来 获取 要 执行 的 脚本 
内 容 。 但 对 于 跨 域 请 求 (脚本 存放 在 与 当前 文档 的 不 一 样 的 服务 器 

上 ) ，jQuery 会 使 用 <script> 元 素来 加 载 脚 本 (参考 18.2 闻 ) 。 在 同 源 
情况 下 ， 回 调 函 数 的 第 一 个 参数 是 脚本 的 文本 内 容 ， 第 二 个 参数 

是 "success" 状 态 码 ， 第 三 个 参数 则 是 用 来 获取 脚本 内 容 的 
XMLHttpRequest 对 象 。 在 同 源 情 况 下 ，jQuery.getScript0 函 数 的 返回 值 
也 是 该 XMLHttpRequest 对 象 。 对 于 跨 源 请 求 ， 不 存在 XMLHttpRequest 
对 象 ， 并 且 脚 本 的 内 容 获 取 不 到 。 在 这 种 情况 下 ， 回 调 函 数 的 第 一 个 
和 第 三 个 参数 是 undefined，jQuery.getScript0 的 返回 值 也 是 undefined 。 


传递 给 jQuery.getScript0) 的 回调 函数 ， 仪 在 请 求 成 功 完 成 时 才 会 个 调 
用 。 如 果 和 需要 在 发 生 错 误 以 及 成 功 时 都 得 到 通知 ， 则 需要 使 用 的 层 的 
jQuery.ajax() 范 数 。 该 证 搬 述 的 其 他 三 个 工具 函数 也 是 如 此 。 


2.jQuery.getJSON() 


jQuery.getJSON() 与 jQuery.getScript 类 似 ， 它 会 获取 文本 ， 然 后 特殊 处 理 
一 下 ， 再 调用 指定 的 回调 函数 。jQuery.geUSON0O 获 取 到 文本 后 ， 不 会 
将 其 当做 脚本 执行 ， 而 会 将 其 解析 为 JSON 《使 用 19.7 下 描述 的 
jQueryparseJSON0 画 数 ) 。jQuery.getUJSONO 只 有 在 传 入 了 回调 参数 时 
才 有 用 。 当 成 功 加 载 URL， 以 及 将 内 容 成 功 解析 为 JSON 后 ， 解 析 结 果 
会 作为 第 一 个 参数 传 入 回调 函数 中 。 与 jQuery.getScript0 一 样 ， 回 调 函 
数 的 第 二 个 和 第 三 个 参数 是 "success" 状 态 码 和 XMLHttpRequest 对 象 : 


// 假 设 data .json 包 含 文本 : '{"x":1,"y":2}' 
jQuery.getJSoN("data.json",function(data){//data 参 数 是 对 象 {x:1,y:2} 

}); 

jQuery.getScript() 个 同 ， jQuery.geUS ONO 接 受 一 个 可 选 的 数据 对 象 参 
数 ， 就 和 传 入 load() 方 法 中 的 一 样 。 如 果 传 入 数据 到 jQuery.getJSON() 


中 ， 该 数据 必须 是 第 二 个 参数 ， 回 调 范 数 则 是 第 三 个 。 如 采 不 传 入 任 
何 数 据 ， 则 回调 函数 可 以 是 第 二 个 参数 。 如 末 数 据 是 子 答 串 ， 则 它 会 


被 添加 到 URL 的 “?” 或 “&” 后 面 。 如 果 数 据 是 一 个 对 象 ， 则 它 会 转化 为 
字符 串 (参见 下 面 方 框 中 的 内 容 ) ， 然 后 添加 到 URL 上 。 


传递 数据 给 jQuery 的 Ajax 工具 


jQuery 的 大 多 数 Ajax 方法 都 接受 一 个 参数 (或 选项 ) 用 来 指定 与 URL 一 
起 发 送 给 服务 絮 的 数据 。 通 常 ， 该 数据 的 形式 是 URL 编 码 的 、 

用 “&&”* 分 隔 的 名 / 值 对 。 (这 个 数据 格式 束 是 已 知 的 "application/x-www- 
form-urlencoded"MIME 类 型 。 这 类 似 于 JSON 格 式 : 一 种 将 JavaScript 简 
单 对 象 与 字符 串 互 相 转 化 的 格式 。) 对 于 HTTP GET 请 求 ， 该 数据 字符 
串 会 添加 到 请 求 URL 后 面 。 对 于 POST 请 求 ， 则 在 所 有 发 送 的 HTTP 请 
求 头 后 面 ， 当 做 请 求 的 内 容 体 发 送 它 。 


获取 该 格式 的 数据 字符 串 的 一 种 方式 是 ， 调 用 包含 表单 或 表单 元 素 的 
jQuery 对 象 的 serialize() 方 法 。 例 如， 可 以 使 用 如 下 代码 来 调用 load0) 方 


法 提交 HTML 表 单 : 


$('#submit_ button').click(function(event){ 


$(this.form) .load(// 通 过 加 载 新 内 容 来 替换 表单 


this.form.action,// 表 单 ur1l 


$(this.form).serialize());// 将 表单 数据 附加 到 表单 url 后 再 


event .preventDefault();// 取 消 掉 表单 的 默认 提交 


this.disabled="disabled";// 防 止 多 次 提交 


}); 


如 果 将 jQuery Ajax 函数 的 数据 参数 (或 选项 ) 设置 为 对 象 而 不 是 字符 
串 ，jQuery 通 常会 调用 jQuery.param() 来 将 对 象 转化 成 字符 串 (除了 下 
面 提 到 的 一 个 异常 )。 该 工具 函数 会 将 对 象 的 属性 当成 名 / 值 对 ， 例 
如 ， 会 将 对 象 {x:1Ly:"hello"} 转 换 成 字符 串 "x=1&y=hello" 。 


在 jQuery 1.4 中 ，jQueryparam0) 能 处 理 更 复杂 的 JavaScript 对 象 。 如 果 对 
象 的 某 个 属性 值 是 数组 ， 该 数组 中 的 每 一 项 都 会 在 结果 字符 串 中 拥有 

自己 的 一 个 名 / 值 对 ， 并 且 属 性 名 后 会 添加 方 括 号 。 如 果 对 象 的 某 个 属 
1 则 内 符 对 象 的 属性 名 会 放置 在 方 括号 里 并 添加 到 外 层 属 

小 由 o。 例如 : 


$.param( {a: [1,2,3]})// 返 回 "a[]=1&a[]=2&a[]=3" 


$.param( {0:{x:1,y:true}})// 返 回 "o[x]=1&o[y]=true" 


$.param( {0: {x:{y:[1,2]}}})// 返 回 "o[x][y][]=1&o[x][y][]=2" 


为 了 后 同 兼 容 jQuery 1.3 及 其 之 前 的 版 本 ， 可 以 传递 true 给 
jQuery.param() 的 第 二 个 参数 ， 或 设置 traditional 选 项 为 true。 这 可 以 阻止 
对 值 为 数组 或 对 象 的 属性 进行 进一步 序列 化 。 


偶尔 ， 需 要 将 Document (或 一 些 其 他 不 需要 自动 转换 的 对 象 ， 作 为 
POST 请 求 的 内 容 体 传 递 。 在 这 种 情况 下 ， 可 以 设置 contentType 选 项 来 
指定 数据 类 型 ， 并 将 processData 选 项 设置 为 false， 以 阻止 jQuery 将 数据 
对 象 传递 给 jQuery.param()。 


如 宁 传 递 给 jQuery.geUJSONO 的 URL 或 数据 字符 串 在 末尾 或 * 们 ”字符 前 
含有 “=?” 字 符 串 ， 则 表明 这 是 一 个 JSONP 请 求 。 (参考 18.2 节 中 JSONP 
的 解释 。) jQuery 会 创建 一 个 回调 函数 ， 并 用 该 回调 函数 的 函数 名 替换 
掉 “=?” 中 的 “?” 号 ， 接 着 jQuery.getJSON() 的 行为 就 会 像 请 求 脚本 文件 一 
样 ， 而 不 是 JSON 对 象 。 这 对 静态 JSON 数 据 文件 无 效 ， 它 只 能 与 支持 
JSONP 的 服务 器 脚本 一 起 才能 工作 。 由 于 JSONP 被 当做 脚本 来 处 理 ， 
因此 这 意味 着 JSON 格 式 的 数据 可 以 跨 域 请 求 。 


3.jQuery.get() 和 jQuery.post() 


jQuery.get0 和 jQuery.postO 获 取 指 定 URL 的 内 容 ， 如 采 有 数据 的 话 ， 还 
可 传 入 指定 数据 ， 最 后 则 将 结果 传递 给 指定 的 回调 函数 。jQuery.get(0 使 
用 HTTP GET 请 求 来 实现 ，jQuerypost0O 使 用 HTTP POST 请 求 ， 其 他 两 
者 则 都 是 一 样 的 。 与 jQuery.getJSONO 一 样 ， 这 两 个 方法 也 接受 相同 的 
三 个 参数 : 必需 的 URL， 可 选 的 数据 字符 串 或 对 象 ， 以 及 一 个 技术 上 


可 选 但 实际 上 总 会 使 用 的 回调 函数 。 调 用 的 回调 函数 会 被 传 入 三 个 参 
数 : 第 一 个 参数 是 返回 的 数据 ;第 二 个 是 "success" 字 符 串 ;第 三 个 则 是 
XMLHttpRequest 对 象 (如 果 有 的 话 ) : 


// 从 服务 器 请 求 文本 并 在 警告 对 话 框 中 显示 


jQuery.get("debug.txt",alert); 


除了 上 面 描述 的 三 个 参数 ， 还 有 两 个 方法 接受 可 选 的 第 4 个 参数 (如 果 
省 略 数据 参数 的 话 ， 则 作为 第 三 个 参数 传 入 ) ， 该 参数 指定 被 请 求 数 
据 的 类 型 。 第 4 个 参数 会 影响 在 传 入 回调 函数 前 数据 的 处 理 。load() 方 
法 使 用 "html" 类 型 ，jQuery.getScriptO 使 用 "script" 类 型 ， 
jQuery.getJSONO 则 使 用 "json" 类 型 。 与 上 面 这 些 专用 函数 相 比 ， 
jQuery.get0 和 jQuery.postO 更 灵活 。 该 参数 的 有 效 值 ， 以 及 省 略 该 参数 
时 jQuery 的 行为 ， 在 下 面 描述 。 


jQuery 的 Ajax 数据 类 型 
可 以 给 jQuery.getO 或 jQuery.postO 传 递 下 面 6 种 类 型 作为 参数 。 此 外 ， 下 
面 会 讲 到 ， 使 用 dataType 选 项 也 可 以 传递 这 些 类 型 给 jQuery.ajax() 方 


法 : 


"text" 
将 服务 絮 的 啊 应 作为 纯 文本 返回 ， 不 做 任何 处 理 。 
"html" 


该 类 型 和 "text" 一 样 : 啊 应 是 纯 文 本 。load(0 方 法 使 用 该 类 型 ， 将 返回 的 
文本 插入 到 文档 目 身 中 。 


"xml" 


请 求 的 URL 被 认为 指 同 XML 格式 的 数据 ，jQuery 使 用 XMLHttpRequest 
对 象 的 responseXML 属性 来 蔡 代 responseText 必 性。 传 给 回调 函数 的 值 
a 表示 该 XML 文档 的 Document 对 象 ， 而 不 是 保存 文档 文本 的 字符 


"script" 


请 求 的 URL 被 认为 指向 Javascript 文 件 ， 返 回 的 文本 在 传 入 回调 画 数 
前 ， 会 当做 脚本 执行 。 jQuery.getScriptO 使 用 该 类 型 。 当 类 型 

是 "script" 时 ，jQuery 可 以 使 用 < script> 元 素来 替代 XMLHttpRequest 对 
象 ， 因 此 可 以 处 理 跨 域 请 求 。 


"json" 


请 求 的 URL 被 认为 指向 JSON 格 式 的 数据 文件 。 会 使 用 
jQuery.parseJSON() (参考 19.7 市 ) 来 解析 返回 的 内 容 ， 得 到 JSON 对 和 象 
后 传 入 回调 函数 。jQuery.getJSONO 使 用 该 类 型 。 如 果 类 型 是 "json" 同 时 
URL 或 数据 字符 串 售 有 "=?"， 该 类 型 会 转换 成 "jsonp"。 


"jsonp" 


请 求 的 URL 被 认为 指 回 服务 絮 脚 本 ， 该 脚本 支持 JSONP 协 议 ， 可 以 将 
JSON 格 式 的 数据 作为 参数 传递 给 客户 端 指定 的 函数 。 (JSONP 的 更 多 
细 广 请 参考 18.2 节 。) 在 该 类 型 下 ， 传 递 给 回调 函数 的 是 解析 好 的 对 
象 。 由 于 JSONP 请 求 可 以 通过 < script> 元 素来 实现 ， 因 此 该 类 型 可 以 
用 来 做 跨 域 请 求 ， 就 和 "script" 类 型 一 样 。 使 用 该 类 型 时 ，URL 或 数据 
字符 串 经 常会 包含 一 个 类 似 " 尺 jsonp=?" 或 " 尺 callback=?" 的 参数 。 
jQuery 会 将 参数 中 的 “?” 替 换 为 自动 产生 的 回调 函数 名 。 (可 以 参考 
19.6.3 广 下面 的 “3. 不 常用 的 选项 和 钧 子 ” 广 中 的 jsonp 和 jsonpCallback 选 
项 来 做 奉 代 。) 


如 果 调 用 jQuery.get0、jQuery.post0 或 jQuery.ajax0 函 数 时 没有 指定 以 上 
类 型 中 的 任何 一 个 ，jQuery 会 检查 HTTP 响 应 中 的 Content-Type 头 。 如 果 
该 头 部 信息 包含 "xml" 字 符 串 ， 则 传 入 回调 函数 中 的 是 XML 文档 。 否 
则 ， 如 果 头 部 包含 "json" 字 符 串 ， 则 数据 被 被 解析 成 JSJON 并 把 解析 后 的 
对 象 传 给 回调 函数 。 和 否则 ， 如 果 头 部 含有 "javascript" 字 符 串 ， 则 数据 被 
当做 脚本 执行 。 如 采 以 上 都 不 符合 ， 则 数据 会 被 当做 纯 文 本 处 理 。 


19.6.3 jQuery.ajax0O 郴 数 


jQuery 的 所 有 Ajax 工具 最 后 都 会 调用 jQuery.ajaxO 这 是 整个 类 库 中 
最 复杂 的 函数 。jQuery.ajax0 仅 接受 一 个 参数 : 一 个 选项 对 象 ， 该 对 象 


的 属性 指定 Ajax 请 求 如 何 执行 的 很 多 细节 。 例 如 ， 
jQuery.getScript(url,callback) 与 以 下 jQuery.ajax0 的 调用 等 价 : 


jQuery.ajax({ 


type:"GET", //HTTP 请 求 方法 


url:url,// 要 获取 数据 的 url 


data:null, // 不 给 url 添 加 任何 数据 


dataType:"script",// 一 旦 获取 到 数据 ， 立 刻 当 做 脚本 执行 


success:callback// 完 成 时 调用 该 画 数 


}); 


jQuery.get0 和 jQuery.postO 也 接受 上 面 这 5 个 基本 选项 。 然 而 ， 如 有 果 和 直接 
调用 jQuery.ajax0 的 话 ， 它 可 以 文 持 更 多 其 他 选项 。 下 面 会 解释 所 有 选 
项 (包含 上 面 这 5 个 基本 选项 ) 。 


在 深入 了 解 所 有 选项 之 前 ， 我 们 得 知道 可 以 通过 给 jQuery.ajaxSetupO 传 
入 一 个 选项 对 象 来 设置 任意 选项 的 默认 值 : 


jQuery.ajaxSetup({ 


timeout :2000, // 在 两 秒 后 取消 所 有 Ajax 请 求 


cache ;false// 通 过 给 URL 添 加 时 间 惟 来 禁用 浏览 器 缓存 


}); 


运行 以 上 代码 后 ， 指 定 的 timeout 和 cache 选 项 会 在 所 有 未 指定 这 两 个 选 
Re (包括 jQuery.get0 和 load0) 方 法 等 高 级 工 


ww 


在 阅读 下 面 章节 中 jQuery 的 大 量 选 项 和 回调 函数 时 ， 参 考 19.6.1 节 和 
19.6.2 节 下 面 的 “3.jQuery.get() 和 jQuery.post(0)” 广 中 天 于 jQuery Ajax 状态 
码 和 数据 类 型 字符 串 的 内 容 会 非常 有 神 益 。 


jQuery 1.5 中 的 Ajax 


在 本 书 即 将 交付 印刷 时 ，jQuery 1.5 发 布 了 。 在 1.5 版 本 中 ， 重 写 了 Ajax 
模块 ， 提 供 一 些 非常 便捷 的 新 特性 。 最 重要 的 一 个 特性 是 jQuery.ajax() 
和 所 有 之 前 描述 的 Ajax 工 具 函 数 现在 都 返回 一 个 jqXHR 对 象 。 该 对 象 模 
拟 XMLHttpRequest 的 API， 甚 至 对 于 那些 没有 使 用 XMLHttpRequest 对 
象 的 请 求 (比如 $.getScript0 发 起 的 请 求 ) 也 进行 了 模拟 。 更 进一步 的 
是 ，jqXHR 对 象 定 义 了 success0 和 error0) 方 法 ， 可 用 来 注册 请 求 成 功 或 
失败 时 的 回调 函数 。 例 如 ， 不 用 给 jQuery.get(0 传 递 回 调 函 数 ， 只 须 将 回 
调 函 数 传递 给 工具 函数 返回 的 jdqXHR 对 象 的 Success(0) 方 法 : 


jQuery.get("data.txt") 
.Success(function(data){console.log("Got", data);}) 


.Success(function(data){process(data);}); 


1. 通 用 选项 
jQuery.ajax() 中 最 常用 的 选项 如 下 : 
type 


指定 HTTP 的 请 求 方法 。 默 认 是 "GET"。 男 一 个 常用 值 是 "POST"。 可 以 
指定 其 他 HTTP 的 请 求 方法 ， 比 如 "DELETE" 或 "PUSH"， 但 不 是 所 有 浏 
哆 器 都 支持 它们 。 注 意 : 该 选项 的 命名 有 误导 嫌疑 : 该 选项 与 请 求 或 

响应 的 数据 类 型 没有 任何 关系 ， 或 许 取 名 为 "method" 或 是 一 个 更 好 的 选 


择 。 
url 


要 获取 的 URL。 对 于 GET 请 求 ，data 选 项 会 添加 到 该 URL 后 。 对 于 
JSONP 请 求 ， 当 cache 选 项 为 false 时 ，jQuery 可 以 添加 参数 到 URL 中 。 


data 


添加 到 URL 中 (对 GET 请 求 ) 或 在 请 求 的 内 容 体 中 〈 对 POST 请 求 ) 发 
送 的 数据 。 这 可 以 是 字符 串 或 对 象 。 通 常会 把 对 象 转化 为 字符 串 ， 就 
如 19.6.2 节 下 面 的 "2.jQuery.geUJSONO" 节 中 描述 的 一 样 ， 除 了 在 process 
data 选 项 中 描述 的 异常 情况 。 


dataType 
指定 啊 应 数据 的 预期 类 型 ， 以 及 jQuery 处 理 该 数据 的 方式 。 合 法 值 


是 "text"、"html"、"script"、"json"、"jsonp" 和 "xml"。19.6.2 廊 下 面 

的 “3.jQuery.get() 和 jQuery.post(0)” 广 中 有 解释 这 些 值 的 仿 义 。 该 选项 没有 
默认 值 。 当 没有 指定 时 ，jQuery 会 检查 啊 应 中 的 Content-Type 头 来 确定 
如 何人 处理 返回 的 数据 。 


ContentIype 


指定 请 求 的 HTTP Content-Type 头 。 默 认 是 "application/x-www-form- 
urlencoded"， 这 是 HTML 表 单 和 绝 大 部 分 服务 器 脚本 使 用 的 正常 值 。 如 
果 将 type 选 项 设置 为 "POST"， 想 发 送 纯 文本 或 XML 文 档 作 为 请 求 体 

上 时， 需要 设置 该 选项 。 


timeout 

超时 时 间 ， 单位 是 膏 秒 。 如 果 设 置 了 该 选项 ， 当 请 求 没 有 在 指定 超时 
时 间 内 完成 时 ， 请 求 会 取消 同时 触发 error 回 调 ， 回 调 中 的 状态 码 参数 
为 "timeout"。 默认 超 时 时 间 是 0， 表 示 除 非 请 求 完 成 ， 否 则 永远 不 会 取 
消 。 


cache 


对 于 GET 请 求 ， 如 果 该 选项 设置 为 false，jQuery 会 添加 一 个 “_=” 参 数 到 
URL 中 ， 或 者 替换 已 经 存在 的 同名 参数 。 该 参数 的 值 是 当前 时 间 (之 
Ei °。 这 可 以 禁用 基于 浏览 器 的 缓存 ， 因 为 每 次 请 求 的 URL 都 不 


ifModified 


当 该 选项 设置 为 tue 时 ，jQuery 会 为 请 求 的 每 一 个 URL 记 录 Last- 
Modified 和 If-None-Match 响 应 头 的 值 ， 并 会 在 接 下 来 的 请 求 中 为 相同 的 
URL 设 置 这 些 头 部 信息 。 这 可 以 使 得 ， 如 果 上 次 请 求 后 URL 的 内 容 没 
有 改变 ， 则 服务 器 会 发 送 回 HTTP 304"Not Modified" 响 应 。 上 默认 情况 
下 ， 该 选项 未 设置 ，jQuery 不 会 设置 或 记录 这 些 头 部 信息 。 


jQuery 将 HTTP 304 啊 应 解释 成 "notmodified" 状 态 码 。"notmodified" 状 态 
不 会 被 当成 错误 ， 传 入 success 回 调 中 的 状态 码 是 "notmodified"， 而 不 是 
通常 的 "success" 状 态 码 。 因 此 ， 如 果 设 置 了 ifModified 选 项 ， 就 必须 在 
回调 中 检查 该 状态 人 码 如 果 状 态 码 是 "notmodified"， 则 第 一 个 参数 

(响应 数据 ) 会 是 undefined。 注 意 ]Query 1.4 及 其 之 前 的 版 本 ，HTTP 
304 会 被 当成 一 个 错误 ，"notmodified" 状 态 码 会 被 传 入 error 回 调 中 ， 而 
不 是 suceess 回 调 中 。 请 参考 19.6.1 世 中 的 信息 ， 以 获取 jQuery Ajax 状态 
人 码 的 更 多 信息 。 


global 


该 选项 指定 jQuery 十 否 应 该 触发 上 面 描述 的 Ajax 请 求 过 程 中 的 事件 。 灼 
认 值 是 true; 设置 该 选项 为 false 会 葵 用 Ajax 相关 的 所 有 事件 。 (参考 
19.6.4 节 获取 事件 的 细 玫 。) 该 选项 的 命名 有 些 令 人 迷惑 : 取 名 
人 而 不 是 在 具体 某 
对象 上 。 


2. 回 调 


下 面 的 选项 指定 在 Ajax 请 求 的 不 同 阶段 调用 的 函数 。success 选 项 已 经 
很 锅 悉 了 : 这 是 传 入 给 jQuery.getJSONO 等 方法 的 回调 函数 。 注 意 
yo . 将 Ajax 请 求 过 程 的 消息 当做 事件 发 送 〈 除 非 设置 了 global 选 
项 为 false) 。 


context 

该 选项 指定 回调 函数 在 调用 时 的 上 下 文 对 象 就 是 this。 该 选项 没有 
默认 值 ， 如 果 不 设置 ，this 会 指 问 选项 对 象 。 设 置 context 选 项 也 会 影响 
Ajax 事件 触发 的 方式 (参考 19.6.4 广 ) 。 如 果 设 置 该 选项 ， 值 应 该 为 
Window、Document 或 触发 事件 所 在 的 Element 。 


beforeSend 


该 选项 指定 Ajax 请 求 发 送 到 服务 器 之 前 激活 的 回调 函数 。 第 一 个 参数 
是 XMLHttpRequest 对 象 ， 第 二 个 参数 是 该 请 求 的 选项 对 象 。beforeSend 
回调 使 得 程序 有 机 会 在 XMLHttpRequest 对 象 上 设置 自 定 义 HTTP 头 部 。 
如 果 该 回调 函数 返回 false，Ajax 请 求 会 取消 。 注 意 跨 域 

的 "script" 和 "jsonp" 请 求 没 有 使 用 XMLHttpRequest 对 象 ， 因 此 不 会 触发 
beforeSend 回 调 。 


SUCCESS 


该 选项 指定 Ajax 请 求 成 功 完成 时 调用 的 回调 函数 。 第 一 个 参数 是 服务 
右 发 送 的 数据 ， 第 二 个 参数 是 jQuery 状态 码 ; 第 三 个 参数 是 用 来 发 送 该 
请 求 的 XMLHttpRequest 对 象 。 如 19.6.2 节 下 面 的 “3.jQuery.getO0 和 
jQuery.post()” 广 所 描述 ， 第 一 个 参数 的 类 型 取决 于 dataType 选 项 或 服务 
右 啊 应 的 Content-Type 头 信息 。 如 果 类 型 是 "xzml"， 则 第 一 个 参数 是 
Document 对 象 。 如 果 类 型 是 "json" 或 "jsonp"， 第 一 个 参数 是 服务 器 返回 
的 JSON 格 式 啊 应 的 解析 结果 。 如 果 类 型 是 "script"， 则 响应 内 容 是 所 加 
载 脚本 的 文本 内 容 〈 该 脚本 已 经 执行 了 ， 因 此 ， 在 这 种 情况 下 通常 可 
。 对 于 其 他 类 型 ， 啊 应 内 容 直 接 丈 是 请 求 资 源 的 文 
谷 O 


第 二 个 参数 的 状态 码 通 常 是 字符 串 "success"， 但 是 如 果 设 置 了 
ifModified 选 项 ， 该 参数 就 可 能 是 "notmodified"。 在 这 种 情况 下 ， 服 务 
回 不 发 送 啊 应 并 且 不 定义 第 1 个 参数 。"script" 和 "jsonp" 类 型 的 垮 域 请 求 
通过 < script> 元 素 而 不 是 XMLHttpRequest 执 行 ， 因 此 对 于 那些 请 求 ， 
不 会 定义 第 三 个 参数 。 


eITOFT 


该 选项 指定 Ajax 请 求 不 成 功 时 调用 的 回调 函数 。 该 回调 的 第 一 个 参数 
是 该 请 求 的 XMLHttpRequest 对 象 《如 果 用 到 的 话 ) 。 第 二 个 参数 是 
jQuery 的 状态 码 。 对 于 HTTP 错 误 ， 该 状态 码 可 能 是 "error"， 对 于 超 
时 ， 则 是 "timeout"，"parsererror" 则 表示 解析 服务 妖 响 应 时 出 了 问题 。 
例如 ， 如 果 XML 文 档 或 JSON 对 象 不 符合 格式 ， 则 状态 码 

为 "parsererror"。 在 这 种 情况 下 ，error 回 调 的 第 三 个 参数 是 抛 出 的 Error 
对 象 。 注 意 dataType 为 "script" 的 请 求 在 返回 无 效 JavaScript 代 码 时 不 会 触 
发 错误 。 脚 本 中 的 任何 错误 都 会 直接 名 上 略 ， 调 用 的 回调 则 是 success 而 


不 是 error 。 


complete 


该 选项 指定 Ajax 请 求 完成 时 激活 的 回调 画 数 。 每 一 个 Ajax 请 求 或 者 成 
功 时 调用 success 回 调 ， 或 者 失败 时 调用 error 回 调 。 在 调用 success 或 error 
后 ，jQuery 会 调用 complete 回 调 。 传 给 complete 回 调 的 第 一 个 参数 是 
XMLHttpRequest 对 象 ， 第 二 个 参数 则 是 状态 码 。 


3. 不 毅 用 的 选项 和 钩子 


下 述 Ajax 选 项 不 经 营 使 用 。 茶 些 特定 选项 通 肖 不 可 能 设置 ， 为 一 些 选 
CN 目 定 义 钩 子 ， 使 得 可 以 修改 jQuery Ajax 请 求 的 默认 处 理 方 
工 O 


async 


脚本 化 的 HTTP 请 求 本 身 就 是 异步 的 。 然 而 ，XMLHttpRequest 对 象 提供 
了 一 个 选项 ， 可 用 来 阻 赛 当前 进程 ， 直 到 接收 到 啊 应 。 如 有 果 想 开局 这 
一 阻塞 行为 ， 可 以 设置 该 选项 为 false。 设 置 该 选项 不 会 更 改 
jQuery.ajax0O 的 返回 值 : 如 果 有 使 用 XMLHttpRequest 对 象 的 话 ， 该 函数 
会 始终 返回 该 对 象 。 对 于 同步 请 求 ， 可 以 自己 从 XMLHttpRequest 对 和 象 
中 提取 服务 妖 的 啊 应 和 HTTP 状 态 码 ， 如 果 想 要 获取 jQuery 解析 的 响应 
LU 可 以 指定 一 个 complete 回 调 (就 和 给 异步 请 求 指定 的 一 


dataFilter 


该 选项 指定 一 个 函数 ， 用 来 过 沽 或 预 处 理 服务 器 返回 的 数据 。 第 一 个 
参数 是 从 服务 器 返回 的 原始 数据 〈 字 符 串 或 XML 请 求 返 回 的 Document 
对 象 ) ， 第 二 个 参数 是 dataType 选 项 的 值 。 如 果 指 定 该 函数 ， 则 它 必须 
返回 一 个 值 ， 该 值 会 用 来 蔡 换 挥 服务 器 的 响应。 注意 dataFilter() 函 数 会 
在 JSON 解 析 和 脚本 执行 前 执行 。 同 时 注意 对 于 跨 域 

的 "script" 和 "jsonp" 请 求 不 会 调用 dataFilter()。 


jsonp 


当 设 置 dataType 选 项 为 "jsonp" 时 ，url 或 data 选 项 通常 会 包含 一 个 类 
似 "jsonp=?" 的 参数 。 如 果 jQuery 在 URL 或 data 选 项 中 没有 找到 类 似 参数 
时 ， 会 使 用 该 选项 指定 的 名 字 插 入 一 个 。 该 选项 的 默认 值 

是 "callback"。 在 使 用 JSONP 时 ， 如 果 服 务 器 需要 一 个 不 同 的 参数 名 ， 


而 URL 或 data 选 项 中 又 没有 指定 时 ， 需 要 设置 该 选项 。 请 查看 18.2 节 获 
取 JSONP 的 更 多 细节 。 


jsonpCallback 


对 于 dataType 为 "jsonp" 的 请 求 (或 URL 中 带 有 大 似 'jsonp=? 这 种 JSONP 
参数 的 "json" 请 求 ) ， jQuery 必 须 将 URL 中 的 “?” 蔡 换 成 包装 函数 名 ， 服 

务 絮 会 将 数据 传递 给 该 包装 函数 。 通 常 ，jQuery 会 根据 当前 时 间 来 生成 
一 个 唯一 的 函数 名 。 如 果 想 用 目 己 的 函数 来 蔡 代 jQuery 生成 的 ， 则 可 以 
设置 该 选项 。 但 是 ， 一 旦 这 样 做 了 ， 会 阻止 jQuery 在 触发 正常 事件 时 调 
用 success 或 complete 回 调 。 


processData 


当 设 置 data 选 项 为 对 象 (或 将 对 象 作 为 第 二 个 参数 传递 给 jQuery.get() 和 
相关 方法 ) 时 ，jQuery 通 常会 将 该 对 象 转换 成 字符 串 ， 该 字符 串 遵守 标 
准 的 HTML"application/Xx-www-form-urlencoded" 格 式 〈 参 考 19.6.2 节 下 
面 的 "2.jQuery.geUSON0O"T) 。 如 果 想 省 略 掉 该 步骤 (比如 想 将 
Document 对 象 作 为 POST 请 求 体 发 送 ) ， 请 设置 该 选项 为 false 。 


ScriptCharset 


对 于 里 域 的 "script" 和 "jsonp" 请 求 ， 会 使 用 <script> 元 宗 ， 该 选项 用 来 
指定 <script> 元 素 的 charset 属 性 值 。 该 选项 对 正常 人 
XMLHttpRequest 的 请 求 不 会 有 任何 作用 。 


tranditional 


jQuery 1.4 改 变 了 数据 对 象 序 列 化 为 "application/x-www-form- 
urlencoded" 字 符 串 的 方式 〈 细 节 请 参考 19.6.2 节 下 面 

的 "2.jQuery.getJSON0O" 节 ) 。 设 置 该 选项 为 tue， 可 以 让 jQuery 回复 到 
原来 的 方式 。 


USeIllqIle ,password 


如 采 请 求 需要 密码 验证 ， 请 使 用 这 两 个 选项 来 指定 用 户 名 和 和 密码。 


xhr 


该 选项 指定 一 个 工厂 函数 ， 用 来 获取 XMLHttpRequest 对 象 。 该 工厂 画 
数 在 调用 时 不 市 参数 ， 而 且 必须 返回 一 个 实现 了 XMLHttpRequest API 
的 对 象 。 这 个 非常 底层 的 钧 子 可 以 创建 自己 对 XMLHttpRequest 的 包 
装 ， 可 以 给 方法 添加 特性 或 测量 。 


19.6.4 Ajax 事件 


19.6.3 万 下 面 的 2. 回调 ”六 描述 了 jQuery.ajax0 拥 有 4 个 回调 选项 : 
beforeSend、success、error 和 complete。 除 了 分 别 激活 这 些 指定 的 回调 
函数 ，jQuery 的 Ajax 函 数 还 会 在 Ajax 请 求 的 每 一 个 相同 阶段 触发 自 定义 
事件 。 下 面 的 表格 展示 了 这 些 回 调 函 数 和 相应 的 事件 ; 


回调 事件 类 型 处 理 程序 注册 方法 

beforeSend "ajaxSend' ajaxSend() 

SuCess "ajaxSuccess" ajaxSucess() 

error "ajaxError" ajaxError() 

complete "ajaxComplete' ajaxComplete() 
"ajaxStart' ajaxStart() 
"ajaxStop" ajaxStop() 


可 以 使 用 bind() 方 法 和 上 表 第 二 列 中 的 事件 类 型 字符 串 来 注册 这 些 目 定 
义 Ajax 事件 ， 也 可 以 使 用 第 三 列 中 的 事件 注册 方法 来 注册 。 
ajaxSuccess() 和 其 他 方法 的 使 用 方式 就 与 click()、mouseover() 以 及 19.4.1 
廊 中 的 其 他 简单 事件 注册 方法 一 样 。 


由 于 Ajax 事 件 是 目 定 义 事 件 ， 是 由 jQuery 而 个 是 浏 贤 絮 产生 的 ， 因 此 传 
递 给 事件 处 理 程序 的 Event 对 象 不 是 很 有 用 。 其 实 ，ajaxSend、 
ajaxSuccess、ajaxError 和 ajaxComplete 事 件 在 触发 时 都 带 有 其 他 参数 。 
这 些 事件 的 处 理 程序 激活 时 在 event 参 数 后 都 囊 有 两 个 额外 的 参数 。 第 
一 个 额外 参数 是 XMLHttpRequest 对 象 ， 第 二 个 额外 参数 是 选项 对 象 。 
例如 ， 这 意味 着 ajaxSend 事 件 的 处 理 程 序 可 以 向 XMLHttpRequest 对 象 


添加 目 定义 头 ， 束 和 beforeSend 回 调 可 以 做 的 一 样 。 除 了 上 面 描述 的 两 
个 额外 参数 ， 触 发 gjaxError 事 件 时 还 会 市 有 第 三 个 额外 参数 。 如 果 有 的 
话 ， 事 件 处 理 程序 的 第 三 个 额外 参数 是 Error 对 象 ， 是 在 发 生 错 误 时 抛 
出 的 。 令 人 奇怪 的 是 ， 这 些 Ajax 事 件 并 没有 传 入 jQuery 的 状态 码 。 例 
如 ， 如 果 ajaxSuccess 事 件 的 一 个 处 理 程序 需要 区 

分 "success" 和 "notmodified"， 则 它 需 要 从 XMLHttpRequest 对 象 中 检查 原 
始 HTTP 状 态 码 。 


上 面 表 格 中 列举 的 最 后 两 个 事件 与 其 他 事件 不 同 ， 最 明显 的 是 它们 没 
有 相应 的 回调 函数 ， 同 时 它们 在 触发 时 不 带 额 外 参数 。ajaxStart 和 
ajaxStop 是 一 对 表示 与 Ajax 相 关 的 网 络 活 动 开始 和 停止 的 事件 。 当 
jQuery 没 在 执行 任何 Ajax 请 求 时 ， 如 果 开 始 一 个 新 请 求 ， 它 就 会 触发 
ajaxStart 事 件 。 如 果 在 第 一 个 请 求 还 没完 成 时 ， 其 他 请 求 就 开始 了 ， 这 
些 新 请 求 不 会 触发 新 的 ajaxStart 事 件 。 当 最 后 一 个 挂 起 的 Ajax 请 求 完 成 
并 且 jQuery 不 再 执行 任何 网 络 活动 时 ， 会 触发 ajaxStop 事 件 。 这 一 对 事 
de 来 显示 和 隐藏 菜 些 “ 加 载 中 ...” 动 画 或 网 络 活动 的 图 标 。 
| 如 : 


$("#loading_ animation").bind({ 
ajaxStart:function(){$(this).show();}, 
ajaxSstop:function(){$(this).hide();} 


}); 


这 些 ajaxStart 和 ajaxStop 的 事件 处 理 程序 可 以 绑 定 到 任意 文档 元 素 上 : 
jQuery 是 全 局 地 触发 它们 (参考 19.4.6 节 ) 而 不 是 在 某 个 特定 元 素 上 触 
发 。 其 他 4 个 Ajax 事件 ，ajaxSend、ajaxSuccess、ajaxError 和 
ajaxComplete， 通 常 也 是 全 局 触发 的 ， 因 此 处 理 程 序 也 可 以 绑 定 到 任何 
元 素 上 。 然 而 ， 如 果 在 调用 jQuery.ajax0O 时 设置 了 context 选 项 ， 则 这 4 个 
事件 不 会 全 局 地 触发 ， 而 会 在 context 元 素 上 触发 。 


最 后 ， 记 住 可 以 通过 设置 global 选 项 为 false 来 阻止 jQuery 触发 任何 Ajax 
相关 的 事件 。 尽 管 这 个 选项 名 很 让 人 迷惑 ， 但 是 设置 global 为 false 可 以 
让 jQuery 不 再 在 context 对 象 上 触发 事件 以 及 不 再 全 局 地 触发 事件 。 


19.7 工具 函数 


jQuery 类 库 定 义 了 不 少 工具 函数 (还 有 两 个 属性 ) ， 在 编写 程序 时 挺 有 
用 。 在 下 面 的 列表 中 你 会 发 现 ， 部 分 函数 在 ECMAScript (ES5) 中 已 
经 有 了 等 价 形式 。jQuery 的 函数 比 ES5 早 ， 并 且 可 以 工作 在 所 有 浏览 器 
中 。 按 照 字 母 排序 ， 将 这 些 工具 函数 列举 如 下 : 


jQuery.browser 


browser 属 性 不 是 一 个 函数 而 是 一 个 对 象 ， 可 用 于 客户 端 噢 探 (参见 
13.4.5 节 ) 。 如 果 浏 览 需 是 下， 该 对 象 会 拥有 一 个 msie 属 性 ， 值 为 
true。 如 条 浏 贤 右 是 Firefox 或 与 其 相关 ， 会 有 一 个 人 为 tue 的 mozilla 属 
性 。 同 样 ， 在 Safari 和 Chrome 中 ，webkit 属 性 为 tue; 在 Opera 中 ，opera 
属性 为 hue。 除 了 与 浏览 器 相关 的 属性 ， 还 有 一 个 version 属 性 ， 包 含 浏 
如 如 的 版 本 号 。 尺 量 不 要 使 用 客户 端 吗 探 ， 但 是 可 以 通过 以 下 代码 使 
用 该 属性 来 解决 浏览 器 相 天 的 bug: 


if($.browser.mozilla&&parseInt($.browser .version)<4){// 在 此 解决 一 个 假设 的 Firefox 


bug... 


} 


jQuery.contains() 


该 函数 接受 两 个 文档 元 素 作 为 参数 。 如 果 第 一 个 元 素 包 含 第 二 个 元 
素 ， 则 返回 true; 否则 返回 false。 


jQuery.each() 


和 each() 方 法 不 同 ，each(0) 方 法 只 能 过 历 jQuery 对 象 ， 而 jQuery.eachO 工 
具 函 数 可 以 亿 历 数组 元 素 或 对 象 属性 。 第 一 个 参数 是 要 遍历 的 数组 或 

对 象 ， 第 二 个 参数 是 要 在 每 个 数组 元 素 或 对 象 属性 上 调用 的 函数 。 该 

函数 在 调用 时 会 带 有 两 个 参数 : 数组 元 素 的 序号 或 对 象 的 属性 名 ， 以 

及 数组 元 素 的 值 或 对 象 的 属性 值 。 函 数 中 的 this 值 和 第 二 个 参数 是 一 样 
的 。 如 果 该 函数 返回 false，jQuery.each0 会 停止 当前 遍历 并 立刻 返回 。 

jQuery.each(0) 总 是 返回 第 一 个 参数 的 值 。 


jQuery.each() 会 使 用 普通 的 for/in 循 环 来 下 历 对 象 属性 ， 所 以 会 毅 历 所 有 
可 枚 举 的 属性 ， 包 括 继承 的 属性 。jQuery.eachO 在 遍历 数组 元 素 时 ， 会 
以 序号 从 小 到 大 来 和 历 ， 不 会 跳 过 稀 玻 数组 中 的 undefined 属 性 。 


jQuery.extend() 


该 函 数 接受 对 象 作为 参数 。 它 会 将 第 二 个 及 其 以 后 参数 对 象 的 属性 复 
制 到 第 一 个 参数 对 象 中 ， 如 果 同 名 的 属性 在 第 一 个 参数 对 象 中 已 经 存 
在 ， 则 会 覆盖 它 。 该 函数 会 忽略 任何 值 为 undefined 或 null 的 属性 。 如 果 
仅 传 入 了 一 个 对 象 ， 该 对 象 的 属性 会 被 复制 到 jQuery 对 和 象 目 身 中 。 该 对 
象 的 返回 值 是 属性 被 复制 到 的 对 象 。 如 果 一 个 参数 的 值 为 tue， 会 执行 
深 找 贝 ， 第 三 个 (及 其 以 后 ) 对 象 的 属性 会 被 复制 到 第 二 个 对 象 上 。 


函数 用 来 复制 对 象 以 及 合并 市 有 几 组 默认 值 的 选项 对 象 时 非常 有 


var clone=jQuery.extend({},original); 


var options=jQuery.extend({},default_optinos,user_options); 


jQuery.globalEval() 


该 函数 会 在 全 局 上 下 文中 执行 JavaScript 代 码 字符 串 ， 就 像 它 是 < script 
> 元 素 的 内 容 一 样 。 (实际 上 ，jQuery 实 现 该 函数 时 ， 就 是 通过 创建 一 
个 <script> 元素 并 临时 把 它 插 入 文档 中 来 实现 的 。) 呈 


jQuery.grep() 


该 男 数 和 ES5 中 Array 对 象 的 filter(0 方 法 类 似 。 它 接受 数组 作为 第 一 个 参 
数 ， 以 及 一 个 判断 函数 作为 第 二 个 参数 ， 该 判断 函数 会 在 数组 的 每 一 
个 元 素 上 调用 ， 调 用 时 会 传 入 元 素 值 和 元 素 序 号 作为 参数 。 
jQuery.grepO 返 回 一 个 新 数组 ， 新 数组 由 调用 判断 函数 时 返回 true (或 
其 他 真 值 ) 的 元 素 组 成 。 如 果 给 jQuery.grepO 传 入 true 作 为 第 三 个 参 
数 ， 则 它 会 反 转 判断 函数 ， 返 回 的 数组 将 会 由 判断 函数 调用 时 为 false 
或 其 他 假 值 的 元 素 组 成 。 


jQuery.inArray() 


该 函数 和 ES5 中 Array 对 象 的 indexOfO 方 法 类 似 。 它 的 第 一 个 参数 可 以 

是 任意 值 ， 第 二 个 参数 则 是 数组 〈 或 类 数组 对 象 ) ， 返 回 值 是 第 一 个 

如 果 该 参数 值 不 存在 的 话 ， 则 返 
| ;5 


jQuery.isArray() 

当 参 数 是 原生 Array 对 象 时 ， 返 回 true。 
jQuery.isEmptyObject() 

当 参 数 对 象 没 有 可 枚 举 的 属性 时 ， 返 回 true。 
jQuery.isFunction() 


当 参 数 是 原生 Function 对 象 时 ， 返 回 true。 注 意 ， 在 IE8 及 以 前 版 本 中 ， 
window.alert() 和 window.attachEvent() 等 浏览 器 方法 返回 false 。 


jQuery.isPlainObject() 


人 而 不 是 某 些 特定 类 型 或 类 的 对 象 的 实例 时 ， 返 
true ° 


jQuery.makeArray() 


如 采 参 数 是 类 数组 对 象 ， 该 函数 会 将 对 象 的 属性 复制 到 一 个 新 的 
( 真 ) 数组 中 ， 并 返回 该 数组 。 如 果 参 数 不 是 类 数组 对 象 ， 该 函数 会 
仅 返 回 一 个 新 数组 ， 该 数组 只 包含 传 入 的 参数 一 个 元 素 。 


jQuery.mapO) 


该 男 数 和 ES5 中 Array 对 象 的 map(0) 方 法 类 似 。 它 接受 数组 或 类 数组 对 象 
作为 第 一 个 参数 ， 第 二 个 参数 则 为 映射 函数 。 每 一 个 数组 元 素 与 其 序 
号 都 会 传 入 这 映射 久 数 中 ， 返 回 值 就 是 由 映射 钞 数 返回 的 值 组 成 的 狐 
数组 。jQuery.map() 与 ES5 map0 方 法 存在 两 点 不 同 。 首 和 完 ， 如 果 映 射 函 
数 返 回 的 是 null， 该 值 不 会 被 包含 在 返回 的 数组 中 。 其 次 ， 如 采 映 射 函 
该 数组 的 元 素 会 被 添加 到 结果 数组 中 ， 而 不 是 数组 


jQuery.merge() 

函数 接受 两 个 数组 或 类 数组 对 象 。 它 会 将 第 二 个 参数 的 元 隶 添 加 到 
2 并 返回 第 一 个 参数 。 第 一 个 数组 会 修改 ， 第 二 个 不 会 。 
可 以 使 用 该 函数 来 浅 拷贝 类 数组 对 象 : 


var clone=jQuery.merge([],original); 


jQuery.parseJSON() 


该 函数 会 解析 JSON 格 式 的 字符 串 ， 返 回 解析 结果 。 当 传 入 的 格式 有 误 
时 ， 它 会 抛 出 异常 。 在 定义 它 的 浏 贤 絮 中 jQuery 使 用 标准 的 
JSON.parse0 函 数 。 注 意 jQuery 只 定义 JSON 解 析 函 数 ， 而 没有 定义 
JSON 序 列 化 函数 。 


jQuery.proxy() 


该 函数 和 ES5 中 Function 对 象 的 bind() 方 法 (参见 8.7.4 节 ) 类 似 。 它 接受 
函数 作为 第 一 个 参数 ， 对 象 作 为 第 二 个 参数 ， 并 返回 一 个 新 函数 ， 该 
0 。 它 没有 像 bind() 方 法 那样 实现 


jQuery.proxy() 在 调用 时 还 可 以 传 入 对 象 作 为 第 一 个 参数 ， 传 入 属性 名 
作为 第 二 个 参数 。 该 名 称 代 表 的 属性 值 应 该 是 一 个 函数 。 通 过 这 种 方 
式 调 用 ， 琴 数 jQuery.proxy(o,n) 的 返回 值 与 jQuery.proxy(o[n],0) 一 样 。 


jQuery.proxy0 的 目的 是 用 来 与 jQuery 的 事件 处 理 程序 绑 定 机 制 一 起 使 
用 。 如 条 绑 定 了 一 个 代理 函数 ， 可 以 使 用 原始 函数 来 解除 绑 定 它 。 


jQuery.support 


这 个 属性 类 似 jQuery.browser, 它 用 来 做 可 移植 的 特性 探测 (参见 13.4.3 
节 ) ， 而 不 是 脆弱 的 浏览 器 探测 。jQuery.support 的 值 是 一 个 对 象 ， 该 
对 象 的 属性 都 是 布尔 值 ， 用 来 指明 浏览 器 特性 的 存在 博 况 。 

jQuery. support 鸭 绝 六 部 分 属性 都 是 jQuery 内 部 使 用 的 底层 特性 。 这 可 能 
会 引起 插件 开发 者 的 兴趣 ， 但 对 应 用 开发 者 来 说 大 部 分 都 用 途 不 大 。 
一 个 例外 是 jQuery.support.boxModel: 当 浏 贤 器 使 用 CSS 标 准 的 "context- 


box" 模 型 时 ， 该 属性 为 tue， 而 在 IE6 和 IE7 的 怪异 模式 下 时 为 false ( 参 
考 16.2.3 廊 下面 的 “边框 盒 模 型 和 box-sizing 属 性 ” 节 ) 。 


jQuery.trim() 


该 函数 和 ES5 中 给 字符 串 添加 的 trim0) 方 法 类 似 。 它 接受 字符 串 作 为 唯 
一 参数 ， 返 回 的 字符 串 开头 和 结尾 处 的 空白 字符 都 已 移 除 。 


19.8 ”jQuery 选择 器 和 选取 方法 


在 本 间 中 ， 我 们 已 经 使 用 了 带 有 简单 CSS 选 择 侨 的 jQuery 选取 函数 : 
$()。 现 在 是 时 候 深入 了 解 jQuery 选择 器 语法 ， 以 及 一 些 提 取 和 扩充 选 
中 元 素 集 的 方法 了 。 


19.8.1 jQuery 选择 器 


在 CSS3 选 择 融 标准 草案 定义 的 选择 亏 语 法 中 ，jQuery 文 持 相 当 完 整 的 
一 套子 集 ， 同 时 还 添加 了 一 些 非 标准 但 很 有 用 的 伪 类 。15.2.5 下 描述 过 
基本 的 CSS 选 择 器 。 在 此 我 们 会 重复 一 下 ， 并 增加 对 更 多 高 级 选择 器 的 
阐释 。 注 意 : 本 市 讲述 的 是 jQuery 选择 器 。 其 中 有 不 少 选 择 器 (但 不 是 
全 部 ) 可 以 在 CSS 样 式 表 中 使 用 。 


选择 器 语法 有 三 层 结构 。 你 肯定 已 经 见 过 选择 强 中 最 人 简单 的 形 

式 。"#test" 选 取 id 属 性 为 "test" 的 元 素 。"blockquote" 选 取 文 档 中 的 所 有 
<blockquote> 元 素 ， 而 "divnote" 则 选取 所 有 class 属 性 为 "note" 的 < div 
> 元 素 。 简 单 选 择 塘 可 以 组 合成 组 合 选 择 右 >， 比如 "divnote > 

p" 和 "blockquote 让， 只 要 用 组 合 字 符 做 分 隅 符 丈 行 。 人 简单 选择 大 和 组 合 
选择 需 还 可 以 分 组 成 速 号 分 隔 的 列表 。 这 种 选择 需 组 是 传递 给 $0 函 数 
最 常见 的 形式 。 在 解释 组 合 选择 硕 和 选择 需 组 之 前 ， 我 们 必须 爷 了 解 
简单 选择 器 的 语法 。 

1. 简 单 选 择 需 

简单 选择 器 的 开头 部 分 ( 显 式 或 隐 式 地 ) 是 标签 类 型 声明 。 例 如 ， 如 
果 只 对 <p> 元 素 感 兴趣 ， 简 单 选 择 器 可 以 用 "p" 开 头 。 如 果 选 取 的 元 素 


和 标签 名 无 天 ， 则 可 以 使 用 通配符 “*” 号 来 代 耕 。 如 末 选 择 紫 没有 以 标 
签名 或 通配符 开头 ， 则 隐 式 含有 一 个 通配符 。 


标签 名 或 通配符 指定 了 备 选 文 档 元 素 的 一 个 初始 集 。 在 简单 选择 器 

中 ， 标 签 类 型 声明 之 后 的 部 分 由 零 个 或 多 个 过 滤 顺 组 成 。 过 滤器 从 左 
到 右 应 用 ， 和 书写 顺序 一 致 ， 其 中 每 一 个 都 会 缩小 选中 元 素 集 。 表 19-1 
列举 了 jQuery 文 持 的 过 滤 右 。 


表 19.1, jQuery 选择 过 滤器 


过 滤器 含义 
拉 d 匹配 id 属性 为 id 的 元 素 。 在 有 效 的 HTML 文 档 中 ， 永 远 不 会 出 现 多 


个 元 隶 拥 有 相同 的 ID， 因 此 该 过 湾 粥 通明 作为 独立 选择 玲 来 使 用 


过 滤器 


.Class 


[attr] 
[attr=val] 
[attr!=val] 


[attr^=val] 
[attr$=val] 
[attr*=val] 
[attr~ =val] 


[attr|=val] 


:animated 


:button 


:checkbox 


:checked 


:contains(text) 


:disabled 
:empty 
:enabled 
:eq(n) 


:even 


wie 
ftirst 
:first-child 


含义 

匹配 class 属 性 (是 一 串 被 解析 成 用 空格 分 隔 的 单词 列表 ) 含有 class 
单词 的 所 有 元 素 

匹配 拥有 attr 属 性 (和 值 无 关 ) 的 所 有 元 素 

匹配 拥有 attr 属 性 且 值 为 val 的 所 有 元 素 

匹配 没有 attr 属 性 、 或 attr 属 性 的 值 不 为 val 的 所 有 元 素 (jQuery 的 扩 
展 ) 

匹配 attzr 属 性 值 以 vol 开头 的 元 素 

匹配 ottzr 属 性 值 以 vol 结尾 的 元 素 

匹配 attr 属 性 值 含有 val 的 元 素 


当 其 attz 属 性 解释 为 一 个 由 空格 分 隔 的 单词 列表 时 ， 匹 配 其 中 包含 单 
词 val 的 元 素 。 因 此 选择 器 “div.note” 与 “div [class~=note]” 相 同 


匹配 attr 属 性 值 以 val 开 头 且 共 后 没有 共 他 字符 ,或 其 他 字符 是 以 连 
字符 开头 的 元 素 

匹配 正在 动画 中 的 元 素 ， 该 动画 是 由 jQuery 产生 的 

匹配 <button type="button"> 和 <input type="button"> 元 素 (jQuery 
的 扩展 ) 

匹配 <input type="checkbox"> 元 素 (jQuery 的 扩展 ) ， 当 显 式 带 有 
input 标 签 前 级 “input:checkbox” 上 有 时， 该 过 滤器 更 高 效 
匹配 选中 的 input 元 素 

匹配 含有 指定 text 文 本 的 元 素 (jQuery 的 扩展 ) 。 该 过 滤器 中 的 圆 括 


号 确定 了 文本 的 范围 无 须 添加 引号 。 被 过 滤 的 元 素 的 文本 是 由 
textContent 或 innerText 属 性 来 决定 的 这 是 原始 文档 文本 ， 不 带 标 
签 和 注释 

匹配 禁用 的 元 素 

匹配 没有 子 节点 、 没 有 文本 内 容 的 元 素 

匹配 没有 禁用 的 元 素 


匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 的 第 n 个 元 素 (jQuery 
的 扩展 ) 

匹配 列表 中 偶数 序号 的 元 素 。 由 于 第 一 个 元 素 的 序号 是 9， 因 此 实际 
上 选中 的 是 第 1 个 、 第 3 个 、 第 5 个 等 元 素 (jQuery 的 扩展 ) 

匹配 <input type="file"> 元 素 (jQuery 的 扩展 ) 

匹配 列表 中 的 第 一 个 元 素 。 和 “:eq(0)” 相同 (jQuery 的 扩展 ) 

匹配 的 元 素 是 其 父 节点 的 第 一 个 子 元 素 。 注 意 : 这 与 “:first” 不 同 


过 滤器 
:gt(n) 


:has(sel) 


:header 


:hidden 


:image 


:input 


:last 
:last-child 
:lt(n) 


:not(sel) 
:nth(n) 
:nth-child(n) 


:odd 


:only-child 
:parent 


:password 


含义 

匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 序号 大 于 mn 的 元 素 
(jQuery 的 扩展 ) 

匹配 的 元 素 拥 有 匹配 内 和 内 选 择 器 seI 的 子孙 元 素 

匹配 所 有 头 元 素 : <h1>、<h2>、<h3>、<h4>、<h52 或 ch6>》(jQuery 的 
扩展 ) 

匹配 所 有 在 屏幕 上 不 可 见 的 元 素 : 大 体 上 可 以 认为 这 些 元 素 的 
offsetWidth 和 offsetHeight 为 0 

匹配 <input type="image"> 元 素 。 注 意 该 过 滤器 不 会 匹配 cimg> 元 素 
(jQuery 的 扩展 ) 

匹配 用 户 输入 元 素 : cinput>、<textarea>、<select> 和 <button> 
(jQuery 的 扩展 ) 

匹配 选中 列表 中 的 最 后 一 个 元 素 (jQuery 的 扩展 ) 

匹配 的 元 素 是 其 父 节 点 的 最 后 一 个 子 元 素 。 注 意 : 这 与 “:1ast” 不 同 
匹配 基于 文档 顺序 、 序 号 从 0 开始 的 选中 列表 中 序号 小 于 n 的 元 素 
(jQuery 的 扩展 ) 

匹配 的 元 素 不 匹配 内 由 选择 器 sel 

与 “:eq(n)” 相 同 (jQuery 的 扩展 ) 

匹配 的 元 素 是 其 父 节 点 的 第 n 个 子 元 素 。n 可 以 是 数值 、 单 词 even.、 
单词 odd 或 计算 公式 。 使 用 “:nth-child(even)” 来 选取 那些 在 
其 父 节 点 的 子 元 素 中 排行 第 2 或 第 4 等 序号 的 元 素 。 使 用 “:nth- 
child(odd)” 来 选取 那些 在 其 父 节 点 的 子 元 素 中 排行 第 1、 第 3 等 序号 
的 元 素 。 

更 常见 的 情况 是 ，n 是 xn 或 Xn+y 这 种 计算 公式 ， 其 中 x 和 是 整数 ，n 是 
字面 量 n。 因 此 可 以 用 nth-child(3n+1) 来 选取 第 1 个 、 第 4 个 、 第 7 个 
注意 该 过 滤器 的 序号 是 从 1 开始 的 ， 因 此 如 果 一 个 元 素 是 其 父 节 点 的 
第 一 个 子 元 素 ， 会 认为 它 是 奇数 元 素 ， 匹 配 的 是 3n+1， 而 不 是 3n。 要 
和 “:even” 以 及 “:odd” 过 滤器 区 分 开 来 ， 后 者 匹配 的 序号 是 从 0 开 
始 的 。 

匹配 列表 中 奇数 (从 0 开始 ) 序号 的 元 素 。 注 意 序号 为 1 和 3 的 元 素 分 
别 是 第 2 个 和 第 4 个 匹配 元 素 (jQuery 的 扩展 ) 


匹配 那些 是 其 父 节 点 唯一 子 节点 的 元 素 
匹配 是 父 节 点 的 元 素 ， 这 与 “:empty” 相 反 (jQuery 的 扩展 ) 
匹配 <input type="password"> 元 素 (jQuery 的 扩展 ) 


过 滤器 合 义 


:Tadi0 匹配 (input type="radio"> 元 素 (jQuery 的 扩展 ) 

:reset 匹配 (input type="reset"> 和 <button type="reset"> 元 系 (jQuery 的 
扩展 ) 

:selected 匹配 选中 的 coption> 元 素 。 使 用 “;checked” 来 选取 选中 的 复 选 框 和 
单 选 框 (jQuery 的 扩展 ) 

:submit 匹配 (input type="submit"> 和 <button type="submit"> 元 素 (jQuery 
的 扩展 ) 

:text 匹配 (input type="text"> 元 素 (jQuery 的 扩展 ) 

:visible 匹配 所 有 当前 可 见 的 元 素 ， 大 体 上 可 以 认为 这 些 元 素 的 offsetWidth 


和 offsetHeight 的 值 不 为 0%， 这 和 “:hidden” 相 反 


注意 : 表 19-1 中 列举 的 部 分 选择 器 在 圆 括号 中 接受 参数 。 例 如 ， 下 面 这 
个 选择 器 选取 的 元 和 聚 在 其 父 世 点 的 子 元 素 中 排行 第 1 或 第 2 等 ， 只 要 它 
们 含有 "JavaScript" 单 词 ， 残 不 包含 <a> 元 丸 。 


p:nth-child(3n+1):text(Javascript):not(:has(a)) 


通常 来 说 ， 指 定 标签 类 型 前 缀 ， 可 以 让 过 滤器 的 运行 更 高 效 。 例 如 ， 
不 要 简单 使 用 ":radio" 来 选取 单 选 框 按 钮 ， 使 用 "input:radio" 会 更 好 。ID 
过 滤器 是 个 例外 ， 不 添加 标签 前 缀 时 它 会 更 高 效 。 例 如 ， 选 择 

句 "#address" 通 常 比 更 明确 的 "form#address" 更 高 效 。 


2. 组 合 选择 器 


使 用 特殊 操作 符 或 “组 合 符 " 可 以 将 商 单 选择 瑚 组 合 起 来 ， 表 达 文 档 树 
中 元 素 之 间 的 关系 。 表 19-2 列 举 了 jQuery 文 持 的 组 合 选择 器 。 这 些 组 合 


选择 器 与 CSS3 文 持 的 组 合 选择 器 是 一 样 的 。 


表 19-2; jQuery 的 组 合 选择 器 
组 合 方式 。 ”含义 


AB 从 匹配 选择 右 A 的 元 素 的 子孙 元 素 中 ， 选 取 匹 配 选 树 絮 B 的 文档 元 素 。 注 
荡 在 这 种 组 合 方式 下 ， 组 合 符 就 是 空白 字符 
A>B 从 匹配 选择 器 A 的 元 素 的 子 元 素 中 ， 选 取 匹配 选择 器 B 的 文档 元 素 


A+B 从 匹配 选择 器 A 的 元 素 的 下 一 个 兄弟 元 素 (忽略 文本 市 点 和 注释 ) 中 ， 寺 
取 匹 配 选 择 咒 B 的 文档 元 素 
A"~B 从 匹配 选择 器 A 的 元 素 后 面 的 兄弟 元 素 中 ， 选 取 匹 配 选 择 咒 B 的 文档 元 素 


下 面 是 组 合 选 择 融 的 一 些 例子 : 


"blockquote i"// 匹 配 <blockquote>> 里 的 <i> 元 素 


"01>1i"//<1i> 元 素 是 <01> 的 直接 子 元 素 


"#0Utput+*"//id="output" 元 素 后 面 的 兄弟 元 素 


"div.note>hi+p"// 紧 跟 <h1i> 的 <p> 元 素 , 在 <div class="note"> 里 理 


注意 组 合 选 择 器 并 不 限于 组 合 两 个 选择 器 : 组 合 三 个 甚至 更 多 选择 器 
也 是 允许 的 。 组 合 选 择 器 从 左 到 右 处 理 。 

3. 选 择 怖 组 

传递 给 $0 男 数 (或 在 样式 表 中 使 用 ) 的 选择 器 就 是 选择 器 组 ， 这 是 一 


个 逗号 分 隔 的 列表 ， 由 一 个 或 多 个 簿 单 选 择 咒 或 组 合 选择 器 构成 。 选 
择 右 组 匹配 的 元 于 只 要 匹配 该 选择 此 组 中 的 任何 一 个 选择 右 束 行 。 对 


我 们 来 说 ， 一 个 简单 选择 器 也 可 以 认为 是 一 个 选择 器 组 。 下 面 是 选择 
绥 组 的 一 些 例子 : 


"hl1, h2,h3"7/ 匹 配 <h1>、<h2> 和 <h3> 元 素 


"#p1,#p2,#p3"// 匹 配 id 为 p1、p2 或 p3 的 元 素 


"div.note,p.note"// 匹 配 class="note" 的 <div> 和 <p> 元 素 


"body>p,div.note>p"//<body> 和 和 <div class="note"> 的 <p> 子 元 素 


注意 : CSS 和 jQuery 选择 器 语法 允许 在 简单 选择 器 的 某 些 过 滤器 中 使 用 
圆 括号 ， 但 并 不 允许 使 用 圆 括号 来 进行 更 常见 的 分 组 。 例 如 ， 不 能 把 
选择 郁 组 或 组 合 选 择 吉 放 在 圆 插 号 中 并 且 当 成 商 单 选择 瑚 : 


(hd1, h2,h3)+p// 非 法 


hi+p,h2+p,h3+p// 正 确 的 写法 


19.8.2 ”选取 方法 


除了 $0 画 数 支持 的 选择 器 语法 ，jQuery 还 定义 了 一 些 选取 方法 。 本 章 
中 我 们 已 看 到 过 的 大 部 分 jQuery 方法 都 是 在 选中 元 素 上 执行 某 种 操作 。 
选取 方法 不 一 样 : 它们 会 修改 选中 元 聚集 ， 对 其 进行 握 取 、 扩 充 或 仅 
作为 新 选取 操作 的 起 点 。 


本 节 描 述 这 些 选 取 方 法 。 你 会 注意 到 这 些 选取 方法 中 的 多 数 提供 的 功 
能 与 选择 需 语 法 的 功能 是 一 样 的 。 


提取 选中 元 素 最 简单 的 方式 是 按 位 置 提取 。first0 返 回 的 jQuery 对 象 仅 
包 伟人 选中 元 聚 中 的 第 一 个 ，last0 返 回 的 jQuery 对 象 则 只 包含 最 后 一 个 元 
素 。 更 通用 的 是 ，ed0 方 法 返回 的 jQuery 对 象 只 包含 指定 序号 的 单个 选 
中 元 素 。 (在 jQuery 1.4 中 ， 负 序号 也 是 允许 的 ， 会 从 选区 的 末尾 开始 
计数 。) 注意 这 些 方法 返回 的 jQuery 对 象 只 含有 一 个 元 素 。 这 与 常见 的 
数组 序号 是 不 一 样 的 ， 数 组 序号 返回 的 单一 元 素 没 有 经 过 jQuery 包装 : 


var paras=$("p"); 


paras .first()// 仅 选取 第 一 个 <p>> 元 素 


paras .1last( )// 仅 选取 最 后 一 个 <p> 


paras .eq(1)// 选 取 第 二 个 <p> 


paras .eq(-2)// 选 取 倒 数 第 二 个 <p> 


paras[1]// 第 二 个 <p> 元 素 自 身 


通过 位 置 提取 选区 更 通用 的 方法 是 slice()。jQuery 的 slice() 方 法 与 
Array.slice() 方 法 类 似 : 前 者 接受 开始 和 结束 序号 〈 负 序号 会 从 结尾 处 
计算 ) ， 返 回 的 jQuery 对 象 包 含 从 开始 到 结束 序号 〈 但 不 包含 结束 序 
号 ) 处 的 元 素 集 。 如 果 省 略 结束 序号 ， 返 回 的 对 象 会 包含 从 开始 序号 
起 的 所 有 元 素 : 


$("p").slice(2,5)// 选 取 第 3 个 、 第 4 个 和 第 5 个 <p>> 元 素 


$("div").slice(-3)// 选 取 最 后 3 个 <div>> 元 素 


filter0) 十 通用 的 选区 过 滤 方 法 ， 有 3 种 调用 方式 .: 


传递 选择 句 字 符 囊 给 们 ter()， 它 会 返回 一 个 jQuery 对 象 ， 仅 包含 也 匹配 
该 殉 择 融 的 克 中 元 素 。 


传递 男 一 个 jQuery 对 象 给 们 ter()， 它 会 返回 一 个 新 的 jQuery 对 象 ， 该 对 
0 。 也 可 以 传递 元 素数 组 甚至 单一 文档 元 
系 给 filterO。 


传递 判断 函数 给 filter()， 会 为 每 一 个 匹配 元 素 调 用 该 贸 数 ，filter() 则 返 
回 一 个 jQuery 对 象 ， 仅 包含 判断 函数 为 true (或 任意 真 值 ) 的 元 素 。 在 
调用 判断 函数 时 ，this 值 为 当前 元 素 ， 参 数 是 元 素 序 号 。 (参考 19.7 市 
中 的 jQuery.grepO) 


$("div").filter(".note")// 与 $("div.note") 一 样 


$("div").filter($(".note"))// 与 $("div.note")— 样 


$("div").filter(function(idx){return idx%2==0})// 与 $("div:even") 一 样 


not() 方 法 与 filter0 一 样 ， 除 了 含义 与 filter0 相 反 。 如 果 传 递 选 择 器 字符 
串 给 not0， 它 会 返回 一 个 新 的 jQuery 对 象 ， 该 对 象 只 包含 不 匹配 该 选择 
器 的 元 素 。 如 果 传 递 jQuery 对 象 、 元 素数 组 或 单一 元 素 给 not0)， 它 会 返 
回 除 了 显 式 排除 的 元 素 之 外 的 所 有 选中 元 素 。 如 采 传 递 判断 函数 给 
not()， 该 判断 函数 的 调用 就 与 在 filter() 中 一 样 ， 只 是 返回 的 jQuery 对 象 
仅 包 含 那 些 使 得 判断 函数 返回 false 或 其 他 假 值 的 元 于 : 


$("div").not("#header,#footer");// 除 了 两 个 特殊 元 素 之 外 的 所 有 <div>> 元 素 


在 jQuery 1.4 中 ， 提 取 选 区 的 另 一 种 方式 是 has(0) 方 法 。 如 果 传 入 选择 
器 ，has0) 会 返回 一 个 新 的 jQuery 对 象 ， 仅 包含 有 子孙 元 素 匹配 该 选择 器 
的 选中 元 素 。 如 果 传 入 文档 元 素 给 has()， 它 会 将 选中 元 素 集 调整 为 那 
些 是 指定 元 素 祖 和 完 市 太 的 选中 元 素 : 


$("p").has("a[href]")// 包 含 链 接 的 段落 


add0) 方 法 会 扩充 选区 ， 而 不 是 对 其 进行 过 滤 或 提取 。 可 以 将 传 给 $0 芳 
数 的 任何 参数 〈 除 了 函数 ) 照样 传 给 add() 方 法 。add0 方 法 会 返回 原来 
的 选中 元 素 ， 加 上 传 给 $0 画 数 的 那些 参数 所 选中 (或 创建 ) 的 那些 元 
素 。add0) 会 移 除 重复 元 素 ， 并 对 该 组 合 选区 进行 排序 ， 以 便 里 面 的 元 
素 按照 文档 中 的 顺序 排列 : 


// 选 取 所 有 < div> 和 所 有 <p> 元 素 的 等 价 方式 


$("div, p" )// 使 用 选择 器 组 


$("div").add(p)// 给 add( ) 传 入 选择 器 


$("div").add($("p"))// 给 add( ) 传 入 jQuery 对 象 
var paras=document .getElementsByTagName("p");// 类 数组 对 象 


$("div").add(paras);// 给 add( ) 传 入 元 素数 组 


1. 将 选中 元 取 集 用 做 上 下 文 


上 面 摘 述 的 filter0)、add0、 和 not() 方 法 会 在 各 目的 选中 元 素 集 上 执行 奖 
集 、 并 集 和 过 集运 算 。jQuery 还 定义 一 些 其 他 选取 方法 可 将 当前 选中 元 
素 集 作 为 上 下 文 来 使 用 。 对 选中 的 每 一 个 元 隶 ， 这 些 方法 会 使 用 该 先 
中 元 素 作为 上 下 文 或 起 始点 来 得 到 新 的 选中 元 素 集 ， 然 后 返回 一 个 新 
的 jQuery 对 象 ， 包 含 所 有 新 的 选中 元 素 的 并 集 。 与 add0 方 法 类 似 ， 会 


该 类 别 选 取 方 法 中 最 通用 的 是 find()。 它 会 在 每 一 个 当前 选中 元 素 的 子 
孙 元 素 中 寻找 与 指定 选择 器 字符 串 匹 配 的 元 素 ， 然 后 它 返 回 一 个 新 的 
jQuery 对 象 来 代表 所 匹配 的 子孙 元 素 集 。 注 意 这些 新 选中 的 元 素 不 会 并 
入 已 存在 的 选中 元 素 集中 。 同 时 注意 find0 和 filter0 不 同 ，filter0 不 会 选 
中 新 元 素 ， 只 是 简单 地 将 当前 选中 的 元 素 集 进行 缩减 : 


$("div").find("p")// 在 <div> 中 查找 <p> 元 素 , 与 $("div p") 相 同 


该 类 别 中 的 其 他 方法 返回 新 的 jQuery 对 象 ， 代 表 当 前 选中 元 素 集中 每 一 
个 元 聚 的 子 元 隶 、 兄 第 元 聚 或 父 元 聚 。 大 部 分 都 接受 可 选 的 选择 硼 字 
符 串 作为 参数 。 不 传 入 选择 郝 时 ， 它 们 会 返回 所 有 子 元 素 、 兄 第 元 素 
或 父 元 素 。 传 入 选择 占 时 ， 它 们 会 过 滤 元 素 集 ， 仪 返回 匹配 的 。 


children() 方 法 返回 每 一 个 选中 元 素 的 直接 于 元素 ， 可 以 用 可 远 的 选择 
如 参数 进行 过 滤 : 


// 寻 找 id 为 "header" 和 "footer "元 素 的 子 节点 元 素 中 的 所 有 < span > 元 素 


// 与 $("#header>span,#footer>span" ) 相 同 


$("#header,#footer").children("span") 


contents() 方 法 与 children() 方 法 类 似 ， 不 同 的 是 它 会 返回 每 一 个 元 素 的 
所 有 子 方 点， 包括 文本 方 点。 如 采 这 中 元 素 集 中 有 <iframe>> 元 素 ， 
contents() 还 会 返回 该 <iframe> 内 容 的 文档 对 象 。 注 意 contents() 不 接受 
可 选 的 选择 絮 字 符 串 参数 因为 它 返回 的 文档 节点 不 完全 是 元 素 ， 
而 选择 名 字符 串 仅 用 来 摘 述 元 到 节点 。 


next() 和 prev() 方 法 返回 每 一 个 选中 元 素 的 下 一 个 和 上 一 个 兄弟 元 素 (如 
人 。 如 守 传 入 了 选择 荐 ， 会 只 选中 匹配 该 选择 郁 的 兄弟 元 


$("h1") .next("p")// 与 $("h1i+p") 相 同 


$("h1").prev()//<hi> 元 素 前 面 的 兄弟 元 素 


nextAl10 和 prevAl10 返 回 每 一 个 选中 元 系 前 面 或 后 面 的 所 有 兄弟 元 素 
(如 果 有 的 话 ) 。siblings0) 方 法 则 返回 每 一 个 选中 元 素 的 所 有 兄弟 元 素 
(选中 元 素 本 身 不 是 自己 的 兄弟 元 素 ) 。 如 果 给 这 些 方法 传 入 选择 

引 ， 则 只 会 返回 匹配 的 兄弟 元 素 : 


号 


$("#footer").nextAll("p")// 紧 跟 #footer 元 素 的 所 有 <p> 兄 弟 元 素 


$("#footer").prevAll( )//#footer 元 素 前 面 的 所 有 兄弟 元 素 


从 jQuery 1.4 开 始 ，nextUntilO 和 prevUntil() 方 法 接受 一 个 选择 器 参 数 ， 
会 选取 选中 元 妹 后 面 或 前 面 的 所 有 郊 第 元 素 ， 直 到 找到 某 个 匹配 该 选 
择 圳 的 兄弟 元 素 为 止 。 如 采 省 略 该 选择 器 ， 这 两 个 方法 的 作用 残 和 不 
带 选 择 器 的 nextAll0 和 prevAl0 一 样 。 


parent() 方 法 返回 每 一 个 选中 元 系 的 父 玉 点 : 


$("1i").parent()// 列 表 元 素 的 父 节 点 ， 比 如 <uL> 和 <o1> 元 素 


parents() 方 法 返回 每 一 个 选中 元 素 的 祖先 节 扩 〈 回 上 直到 <html> 元 
素 ) 。parent0 和 parents0O) 都 接受 一 个 可 选 的 选择 器 字符 串 参 数 : 


$("a[href]").parents("p")// 含 有 链接 的 <p>> 元 素 


parentsUntil0 返 回 每 一 个 选中 元 素 的 祖先 元 素 ， 直 到 出 现 匹配 指定 选择 
句 的 第 一 个 祖先 元 素 。closest0) 方 法 必须 传 入 一 个 选择 需 字 符 串 ， 会 返 
回 每 一 个 选中 元 素 的 祖先 元 素 中 匹配 该 选择 强 的 最 近 一 个 依 先 元 于 

(如 果 有 的 话 ) 。 对 该 方法 而 言 ， 元 素 被 认为 是 自身 的 祖先 元 素 。 在 
jQuery 1.4 中 ， 还 可 以 给 closest(0 传 入 一 个 祖先 元 素 作 为 第 二 个 参数 ， 用 
来 阻止 Query 往 上 查找 时 超越 该 指定 元 素 : 


$("a[href]").closest("div")// 包 含 链接 的 最 里 层 <div> 


$("a[href]").parentsUuntil(":not(div)")// 所 有 包 于 <a> 的 <div> 元 素 


2. 恢 复 到 之 前 的 选中 元 素 集 


为 了 实现 方法 的 链 式 调用 ， 很 多 jQuery 对 象 的 方法 最 后 都 会 返回 调用 对 
象 。 然 而 本 下 讲述 的 方法 都 返回 新 的 jQuery 对 象 。 可 以 链 式 调用 下 去 ， 
但 必须 清晰 地 意识 到 ， 在 链 式 调用 的 后 面 所 操作 的 元 素 集 ， 可 能 已 经 
不 是 该 链 式 调用 开始 时 的 元 素 集 了 。 


实际 情况 还 要 复杂 些 。 当 这 里 所 描述 的 选取 方法 在 创建 或 返回 一 个 新 
的 jQuery 对 象 时 ， 它 们 会 给 该 对 象 添 加 一 个 到 它 派 生 自 的 旧 jQuery 对 象 
的 内 部 引用 。 这 会 创建 一 个 jQuery 对 象 的 链 式 表 或 栈 。end0 方 法 用 来 
弹出 栈 ， 返 回 保存 的 jQuery 对 象 。 在 链 式 调用 中 调用 end0 会 将 匹配 元 
素 集 还 原 到 之 前 的 状态 。 考 虚 以 下 代码 : 


// 寻 找 所 有 < div> 元 素 ， 然 后 在 其 中 寻找 <p> 元 素 


// 高 之 显示 <p> 元 素 ， 然 后 给 < div> 元 素 添加 一 个 边框 


// 首 先 ， 不 使 用 链 式 调 


Var divs=$("div"); 


var paras=div.find("p"); 


paras.addClass("highlight"); 


divs.css("border", "solid black 1px");// 下 面 展 现 如 何 使 用 链 式 调用 来 实现 


$("div").find("p").addclass("highlight").end().css("border","solid black 1px");// 还 可 
以 将 操作 调换 顺序 来 避免 调用 end( ) 


$("div").css("border","solid block 1px").find("p").addCclass("highlight"); 


如 果 想 手动 定义 选中 元 素 集 ， 同 时 保持 与 end() 方 法 的 兼容 ， 可 以 将 新 
的 元 素 集 作为 数组 或 类 数组 对 象 传递 给 pushStack0 方 法 。 指 定 的 元 素 会 
成 为 新 的 选中 元 素 ， 之 前 选中 的 元 素 集 则 会 压 入 栈 中 ， 之 后 可 以 用 
end() 方 法 还 原 它们 : 


var sel=$("div");// 选 取 所 有 <div>> 元 素 


a 


sel.pushstack(document.getElementsByTagName("p"));// 修 改 为 所 有 <p> 元 素 


sel .end();// 还 原 为 <div> 元 素 


既然 我 们 已 经 讲解 了 end(0) 方 法 及 其 使 用 的 选区 栈 ， 就 有 最 后 一 个 方法 
需要 讲解 。andSelf0 返 回 一 个 新 的 jQuery 对 象 ， 包 含 当前 的 所 有 选中 元 
素 ， 加 上 之 前 的 所 有 选中 元 素 (会 去 除 重复 的 ) 。andSelf0 和 add0) 方 法 
一 样 ， 或 许 "addPrev" 是 一 个 更 具 描 述 性 的 名 字 。 作 为 例子 ， 考 虑 上 面 
代码 的 下 述 变化 : 高 亮 显示 <p> 元 素 及 其 父 节 点 中 的 <div> 元 素 ， 然 
后 给 这 些 < div> 元 素 添 加 边框; 


$("div").find("p").andself().// 寻 找 <div> 中 的 <p>， 合并 起 来 


addclass("highlight").// 都 高 亮 


end() .end().// 弹 出 栈 两 次 ， 返回 $ ("div") 


css("border", "solid black 1px");// 给 divs 添 加 边框 


19.9 ”jQuery 的 插件 扩展 


jQuery 的 写法 使 得 添加 新 功能 很 方便 。 添 加 新 功能 的 模块 称 为 插件 

(plug-in) ， 可 以 在 这 里 找到 很 多 插件 : http://plugins.jquery.com 。 
jQuery 插件 是 普通 的 JavaScript 代 码 文件 ， 在 网 页 中 使 用 时 ， 只 需要 用 
<script> 元素 引入 就 好 ， 就 和 3 引用 任何 其 他 JavaScript 类 库 一 样 〈 注 
意 ， 必 须 在 jQuery 之 后 3 引入 插件 ) 。 


开发 jQuery 插件 非常 人 简单。 关键 点 是 要 知道 jQuery.fn 是 所 有 jQuery 对 象 
J 该 函数 会 成 为 一 个 jQuery 方 
全 用 虽 下 : 


jQuery.fn.println=function(){// 将 所 有 参数 合并 成 空格 分 隔 的 字符 串 


var msg=Array.prototype.join.call(arguments,"");// 遍 历 jQuery 对 象 中 的 每 一 个 元 素 


this.each(function(){// 将 参数 字符 串 作为 纯 文 本 添加 到 每 一 个 元 素 后 面 ， 并 添加 一 个 <br/> 


jQuery(this).append(document.createTextNode(msg).append("<br/>")); 


});// 返 回 这 个 未 加 修改 的 jQuery 对 象 ， 以 便 链 式 调 


return this,; 


} 


通过 上 面 对 jQuery.fn.printIn() 函 数 的 定义 ， 我 们 可 以 在 任何 jQuery 对 象 
上 类 似 如 下 调用 println(0) 方 法 了 : 


$("#debug").printin("x=", xXx,";y=",y); 


这 是 添加 新 方法 到 jQuery.fn 中 的 常见 开发 方式 。 如 采 发 现 自 己 在 使 用 

each() 方 法 “手动 ” 吉 历 jQuery 对 和 象 中 的 元 素 ， 并 在 元 素 上 执行 某 些 操作 
时 ， 束 可 以 问 问 目 己 ， 是否 可 以 将 代码 重 构 一 下 ， 使 得 这 些 each() 回 调 
移动 到 一 个 扩展 方法 里 吧 -。 在 开发 扩展 功能 时 ， 如 果 遵 守 基 本 的 模块 
化 代码 实践 ， 以 及 如 和 守 jQuery 特定 的 一 些 传统 约定 ， 束 可 以 将 该 扩展 称 
为 插件 ， 并 与 他 人 分 享 。 下 面 是 一 些 值 得 留意 的 jQuery 插件 约定 : 


.不 要 依赖 $ 标 识 符 : 包含 的 页 面 有 可 能 调用 了 jQuery.noConflictO 函 数 ， 
$() 可 能 不 再 等 同 于 jQuery0) 孙 数 。 在 上 面 这 种 简短 的 插件 里 ， 只 要 使 用 
jQuery 代 蔡 $ 就 行 。 如 果 开 发 的 扩展 很 长 ， 则 最 好 用 一 个 匿名 函数 将 扩 
展 代 码 都 包装 起 来 ， 以 避免 创建 全 局 变量 。 如 果 这 样 做 ， 可 以 将 jQuery 
作为 参数 传递 给 匿名 函数 ， 参 数 名 采用 $: 


(function($){// 带 有 参数 名 为 $ 的 匿名 画 数 


// 在 此 书写 插件 代码 


}(jQuery));// 使 用 jQuery 对 象 作为 参数 调用 该 匿名 函数 


:如 果 插 件 代 码 不 返回 自己 的 值 ， 请 确保 返回 jQuery 对 象 以 便 链 式 调 

用 。 通 常 这 就 古 this 对 象 ， 只 要 不 加 修改 地 返回 即 可 。 在 上 面 的 例子 
中 ， 方 法 末尾 是 "return this;" 代 码 行 。 遵 循 jQuery 的 另 一 个 习俗 ， 可 以 
让 上 面 的 方法 更 简短 些 (可 读 性 低 一 些 ) : 返回 each() 方 法 的 结果 。 这 
样 ，println() 方 法 会 包含 代码 "return this.each(functionO{...});"。 


.如 果 扩 展 方式 拥有 两 个 以 上 参数 或 配置 选项 ， 请 允许 用 户 能 使 用 对 象 
的 方式 传递 选项 〈 就 如 我 们 在 19.5.2 节 看 到 的 animate() 方 法 和 在 19.6.3 节 
看 到 的 jQuery.ajax0 本 数 一 样 ) 


.不 要 污染 jQuery 方法 的 命名 空间 。 优 雅 的 jQuery 插件 会 用 一 人 套 有 用 的 
API 定 义 最 少量 的 方法 。 通 常 ， 一 个 jQuery 搬 件 只 会 在 jQuery.fn 上 定义 
一 个 方法 。 该 方法 会 接受 字符 串 作 为 第 一 个 参数 ， 然 后 将 该 字符 串 作 


为 函数 名 解析 ， 然 后 将 剩余 参数 传 给 该 解析 函数 。 当 可 以 将 插件 限定 
为 一 个 方法 时 ， 该 方法 名 应 该 与 插件 同名 。 如 有 果 需 要 定义 多 个 方法 ， 
则 使 用 插件 名 作为 每 一 个 方法 名 的 前 级 。 


如果 插 件 需要 绑 定 事件 处 理 程序 ， 请 将 所 有 这 些 处 理 程序 放 在 事件 命 
名 空间 中 〈 参 见 19.4.4 节 ) 。 使 用 插件 名 作为 命名 空间 名 。 


.如果 插件 需要 使 用 data() 方 法 与 元 素 关 联 数据 ， 请 将 所 有 数据 值 放 在 单 
一 对 象 中 ， 然 后 用 与 插件 名 相同 的 键 值 将 该 对 象 作 为 单一 值 存储 。 


:用 "jquery.plugin.js" 这 种 文件 命名 方式 保存 插件 代码 到 一 个 文件 中 
(将 "plugin" 替 换 为 插件 名 ) 8 


插件 可 以 给 jQuery 目 吴 增加 函数 来 添加 新 的 工具 函数 。 例 如 : 


// 该 方法 输出 其 参数 (使 用 printlin( ) 插 件 方法 ) 


// 到 id 为 "debug" 的 元 素 上 。 如 果 不 存在 该 元 素 ， 则 创建 


ee 


添加 到 文档 中 


jQuery.debug=function(){ 


var elt=jQuery("#debug");// 查 找 #debug 元 素 


if(elt.length==0){// 如 果 它 不 存在 则 创建 之 


elt=jQuery("<div id='debug'><h1>Debugging Output</h1i> </div>"); 


jQuery(document .body) ,append(elt )， 


} 


elt.println.apply(elt,arguments);// 将 参数 输出 到 元 素 中 


}; 


除了 定义 新 方法 ， 还 可 以 扩展 jQuery 类 库 的 其 他 部 分 。 例 如 ， 在 19.5 节 
中 ， 我 们 已 经 看 到 可 以 通过 给 jQuery.fx.speeds 添 加 属性 来 扩充 新 的 动画 


时 长 名 (除了 "fast" 和 "slow") ， 也 可 以 通过 给 jQuery.easing 添 加 属性 来 
添加 新 的 缓 动 钞 数 。 插 件 甚 至 可 以 扩展 jQuery 的 CSS 选 择 器 引 警 ! 可 以 
通过 给 jQuery.expr[':] 对 和 象 添加 属性 来 添加 新 的 伪 类 过 滤器 (比如 :first 
和 :input) 。 下 面 这 个 例子 定义 了 一 个 新 的 :draggable 过 滤器 ， 可 用 来 仅 
返回 拥有 draggable=true 属 性 的 元 素 : 


jQuery.expr[':'].draggable=function(e){return e.draggable===true;}; 


使 用 上 面 定 义 的 这 个 选择 絮 ， 可 以 用 $("img:draggable") 来 选取 可 皂 忠 的 
图 片 ， 而 不 用 使 用 见长 的 $("img[draggable=true]")。 


从 上 面 的 代码 中 可 以 看 到 ， 目 定义 选择 絮 玉 数 的 第 一 个 参数 是 候选 的 
DOM 元 系 。 如 果 该 元 素 匹配 选择 硕 ， 则 返回 true; 否则 返回 false。 许 多 
自 定义 选择 器 只 需要 这 一 个 元 素 参数 ， 但 实际 上 在 调用 它们 时 传 入 了 4 
个 参数 。 第 二 个 参数 是 整数 序号 ， 表 示 当 前 元 素 在 候选 元 素数 组 中 的 
位 置 。 候 选 元 素数 组 作为 第 4 个 参数 传 入 ， 选 择 器 不 应 该 修改 它 。 第 三 
个 参数 很 有 趣 的 :这 是 调用 RegExp.exec0 方 法 后 返回 的 数组 。 如 果 有 
的 话 ， 该 数组 的 第 4 个 元 素 (序号 是 3) 是 盆 类 过 小 器 后 面 的 圆 括 号 中 
的 值 。 圆 括号 和 里 面 的 任何 引号 都 去 除了 ， 只 留 下 参数 字符 串 。 下 面 
是 一 个 例子 ， 用 来 说 明 如 何 实 现 一 个 :data(x) 盆 类 ， 该 伪 类 只 在 元 素 拥 
有 data-x 属 性 时 返回 true (参考 15.4.3 节 ) : 


jQuery.expr[':'] .data=function(element,index,match,array){// 注 意 IE7 及 其 以 下 版 本 不 支持 


hasAttribute() 
return element.hasAttribute("data-"+match[3]); 


}; 


19.10 jQuery UI 类 库 


jQuery 限定 自己 只 提供 核心 DOM 、CSS、 事 件 处 理 以 及 Ajax 功能 。 这 提 
供 了 一 个 很 棒 的 基础 ， 可 用 来 构建 高 层面 的 抽象 ， 比 如 用 户 界面 组 
件 ，jQuery UI 类 库 就 是 这 么 做 的 。 对 jQuery UI 做 全 面 讲述 不 属于 本 书 


的 范畴 ， 在 此 我 们 只 会 简单 概要 地 介绍 它 。 该 类 库 及 其 文档 可 以 在 这 
里 找到 : http:Wjqueryui.com 。 


类 如 其 名 ，jQuery UI 定义 了 一 些 用 户 界 面 组件 ， 输 入 区 域 的 目 动 完 

成 、 输 入 日 期 的 日 期 选取 器 、 用 来 组 织 信息 的 手风琴 和 标签 页 、 可 视 
化 展现 数字 的 清 块 和 进度 条 ， 以 及 用 来 和 用 户 紧急 通信 的 模 态 对 话 

框 。 除 了 这 些 组 件 ，jQuery UI 还 实现 了 更 一 般 化 的 “交互 >， 可 以 使 得 
任何 文档 元 素 轻松 就 实现 可 拖 忠 、 可 放置 、 可 改变 大 小 、 可 选取 或 可 
排序 。 最 后 ，jQuery UT 还 给 jQuery 目 身 的 效果 方法 提供 了 一 些 新 的 视觉 
效果 方法 (还 使 得 可 以 变化 颜色 ) ， 同 时 定义 很 多 新 的 缓 动画 数 。 


可 以 把 jQuery UI 想象 成 一 组 相关 的 jQuery 搬 件 ， 只 是 最 后 打包 成 一 个 
JavaScript 文 件 。 要 使 用 它 很 滑 单 ， 在 网 页 中 ， 将 jQuery UI 脚本 放 在 
jQuery 代码 后 面 引入 进来 下 行 。 下 载 页 面 http:Wjqueryui.com 人 允许 选取 计 
划 使 用 的 组 件 ， 然 后 会 构建 一 个 自 定 义 的 下 载 包 ， 与 整个 jQuery UI 类 
库 相 比 ， 这 可 以 减少 页 面 的 加 载 时 间 。 


jQuery UI 是 完全 皮肤 化 的 ， 它 的 皮肤 直接 采用 CSS 文 件 的 形式 。 因 此 除 
了 要 加 载 jQuery UI 的 JavaScript 代 码 到 网 页 中 ， 还 需要 引入 选中 皮肤 的 
CSS 文 件 。jQuery UI 站 点 标注 了 一 些 预先 打包 好 的 皮肤 包 ， 还 有 一 

个 “皮肤 工作 坊 ” 页 面 ， 可 以 让 你 目 定 义 和 下 载 目 己 的 皮肤 。 


jQuery UI 组 件 和 交互 功能 采用 jQuery 插件 的 方法 构建 ， 每 一 个 都 定义 一 
个 jQuery 方法 。 通 铝 ， 在 已 存在 的 文档 元 素 中 调用 该 方法 时 ， 会 将 该 元 
丢 转 化 为 组 件 。 例 如 ， 要 改变 输入 文本 ， 以 便 在 单 击 或 聚焦 文本 输入 
框 时 它 要 弹出 一 个 日 期 选取 组 件 ， 直 接 用 下 面 鸭 代码 调用 datapicker0 惑 
行 : 


// 将 class="date" 的 <input> 元 素 转化 成 日 期 选取 组 件 


$("input.date").datepicker(); 


要 想 灵活 目 如 地 使 用 jQuery UI 组 件 ， 需 要 熟悉 三 件 东西 : 它 的 配置 选 
项 、 它 的 方法 以 及 它 的 事件 。 所 有 jQuery UI 组 件 都 是 可 配置 的 ， 有 一 
些 组 件 有 很 多 配置 选项 。 可 以 通过 给 组 件 方法 传递 选项 对 象 《和 在 动 


西 操作 里 ， 传递 选项 对 象 给 animate() 类 似 ) 来 自 定 义 组 件 的 行为 和 外 
站。 


jQuery UI 组 件 通 常会 定义 至 少 有 几 个 “方法 ”来 与 组 件 交 互 。 但 是 ， 为 
了 避免 jQuery 方法 的 迅速 增多 ，jQuery UI 组 件 不 会 将 它们 的 “方法 ”定义 
成 真正 的 方法 。 每 个 组 件 只 会 有 一 个 方法 (与 上 例 中 的 datapicker( 方 法 
一 样 ) 。 当 需要 调用 组 件 的 一 个 "方法 "时 ， 需 要 给 该 组 件 定义 的 真正 
方法 传递 预期 “方法 ”的 名 称 。 例 如 ， 想 要 禁用 日 期 选取 组 件 ， 不 能 调 
用 disableDatapicker() 方 法 ， 而 需要 调用 datepicker("disable")。 


jQuery UI 组 件 通常 会 定义 目 定义 事件 ， 啊 应 用 户 交 互 时 触发 它们 。 可 
以 使 用 常用 的 bind(0) 方 法 来 给 这 些 自 定义 事件 绑 定 事件 处 理 程 序 ， 通 党 
还 可 以 将 事件 处 理 程序 函数 作为 选项 对 象 的 属性 ， 该 选项 对 象 会 传递 
给 组 件 方 法 。 事 件 处 理 程序 的 第 一 个 参数 依旧 是 Event 对 象 。 某 些 组 件 
还 会 传递 一 个 "UI" 对 象 作为 事件 处 理 程序 的 第 二 个 参数 。 该 对 象 通常 提 
供 了 当前 组 件 的 状态 信息 。 


注意 ，jQuery UI 文档 中 有 时 描述 的 “事件 ”并 不 是 真正 的 自 定义 事件 ， 
可 能 描述 为 回调 函数 会 更 好 ， 这 些 回 调 函 数 是 通过 配置 选项 对 象 设 置 
的 。 例 如 ， 日 期 选取 组 件 文 持 不 少 回 调 函 数 ， 可 以 在 不 同 的 时 间 点 调 
用 它 。 但 是 ， 这 些 函 数 中 没有 一 个 拥有 标准 的 事件 处 理 程 序 签名 ， 不 
能 使 用 bind0) 来 为 这 些 “ 事 件 ” 注 册 处 理 程序 。 正 确 的 做 法 是 ， 在 初始 调 
用 datapicker() 方 法 ， 给 组 件 传递 配置 选项 时 ， 就 指定 合适 的 回调 函数 。 


[1 本 书 不 涵盖 Prototype、YUI、dojo 等 其 他 通用 类 库 。 搜 索 "JavaScript 
libraries" 可 以 找到 更 多 类 库 。 


[2]. 如 果 你 在 目 己 的 代码 中 有 使 用 $ 作 为 变量 ， 或 者 引入 了 Prototype 等 使 
用 $ 作 为 全 局 变量 的 类 库 ， 这 时 ， 为 了 避免 冲突 ， 可 以 调用 
jQuery.noConflict() 来 释放 $ 变 量 ， 让 其 指向 原始 值 。 


[3] 在 撰写 本 间 时 ，jQuery 的 最 新 版 本 是 1.4.2。 在 本 书 准备 出 版 时 ， 
jQuery 刚 发 布 1.5。1.5 版 本 最 大 的 变化 是 Ajax 工 具 函 数 ， 这 将 在 19.6 广 
提 及 。 在 本 书 翻译 成 中 文 时 ，jQuery 已 发 布 1.6.2 版 本 ， 不 过 万 物 归 宗 ， 
0 跟 进 jQuery 的 最 新 版 本 ， 都 是 很 简单 的 事情 


[4] textColor 不 对 ， 应 该 是 color 。 


[5]jQuery 使 用 术语 "bind" 来 表示 事件 处 理 程序 的 注册 。ECMA Script 5 
(以 及 不 少 JavaScript 框 架 ) 给 函数 定义 了 bind(0) 方 法 (参见 8.7.4 闻 ) ， 
使 用 "bind" 术 语 来 表示 对 象 与 画 数 之 间 的 关联 ， 这 些 函 数 会 在 这 些 对 和 象 
上 调用 。Function.bind0 方 法 的 jQuery 版 本 是 一 个 名 为 jQuery.proxy0 的 

工具 函数 ， 在 19.7 节 中 会 讲解 它 。 


[6]jQuery 的 实现 方式 不 支持 非 数 值 动画 ， 但 有 其 他 实现 方案 ， 比 如 传 
入 自 定义 的 CSS 属 性 变化 函数 。 


[7] 在 最 新 版 本 的 jQuery 里 ， 已 优化 了 实现 ， 采 用 eval 和 execScript 来 执 
行 。 


[8]jQuery 插 件 的 这 种 扩展 方式 是 全 局 性 的 ， 市 来 方便 的 同时 ， 也 污染 
J 容易 造成 潜在 的 冲突 。 译 着 并 不 推荐 "随时 想 独 ”使 用 这 
3 


第 20 章 ”客户 端 存储 


Web 应 用 允许 使 用 浏览 器 提供 的 API 实 现 将 数据 存储 到 用 户 的 电脑 上 。 
这 种 客户 端 存 储 相 当 于 赋予 了 Web 浏 览 响 记忆 功能 。 比 方 说 ，Web 应 
用 束 可 以 用 这 种 方式 来 “ 记 住 "用户 的 偏好 甚至 是 用 户 所 有 的 状态 信 

思 ， 以 便 准 确 地 “回忆 ?起 用 户 上 一 次 访问 的 位 置 。 客 户 端 存 储 章 循 “ 同 
源 策 略 ”， 因 此 不 同 站 点 的 页 面 是 无 法 互相 读 取 对 方 存储 的 数据 ， 而 同 
一 站 点 的 不 同 页 面 之 间 是 可 以 互相 共 吾 存储 数据 的 ， 它 为 我 们 提供 了 
一 种 通信 机 制 ， 例 如 ， 一 个 页 面 上 填写 的 表单 数据 可 以 显示 在 另外 一 
个 页 面 中 。Web 应 用 可 以 选择 它们 存储 数据 的 有 效 期 : 比如 采用 临时 
存储 可 以 让 数据 保存 至 当前 窗口 天 闭 或 者 浏览 器 退出 ， 采 用 永久 存 
储 ， 可 以 将 数据 永久 地 存储 到 硬盘 上 ， 数 年 或 者 数 月 不 失效 。 


客户 端 存 储 有 以 下 几 种 形式 : 
Web 存 储 


Web 存 储 最 初 作为 HTML5 的 一 部 分 被 定义 成 API 形 式 ， 但 是 后 来 被 剥 

离 出 来 作为 独立 的 一 份 标准 了 。 该 标准 目前 还 在 草案 阶段 ， 但 其 中 一 
部 分 内 容 已 经 被 包括 IE8 在 内 的 所 有 主流 浏 贤 絮 (可 交互 地 ) 实现 了 。 
Web 存 储 标准 所 摘 述 的 API 包 含 localStorage 对 象 和 sessionStorage 对 象 ， 

这 两 个 对 象 实际 上 是 持久 化 关联 数组 ， 是 名 值 对 的 映射 

表 , “名 ”和 "“ 值 ?都 是 字符 串 。Web 存 储 易于 使 用 、 支 持 大 容量 (但 非 

无 限量 ) 数据 存储 同时 兼容 当前 所 有 主流 浏览 右 ， 但 是 不 兼容 早期 浏 
览 右 。20.1 节 会 对 localStorage 和 sessionStorage 这 两 个 对 象 作 详细 介 

绍 。 


cookie 


cookie 是 一 种 早期 的 客户 端 存储 机 制 ， 起 初 是 针对 服务 器 端 脚本 设计 
使 用 的 。 尽 管 在 客户 端 提供 了 非常 繁琐 的 JavaScript API 来 操作 
cookie， 但 它们 难 用 至 极 ， 而 且 只 适合 存储 少量 文本 数据 。 不 仅 如 
此 ， 任 何以 cookie 形 式 存储 的 数据 ， 不 论 服 务 器 端 是 否 需要 ， 每 一 次 
HTTP 请 求 都 会 把 这 些 数据 传输 到 服务 器 端 。cookie 目 前 仍然 被 客户 端 
程序 员 大 量 使 用 的 一 个 重要 原因 是 ， 所 有 新 旧 浏 览 器 都 支持 它 。 但 
是 ， 随 着 Web Storage 的 普及 ，cookie 终 将 会 回归 到 最 初 的 形态 : 作为 
一 种 被 服务 端 脚本 使 用 的 客户 端 存 储 机 制 。20.2 节 会 详细 介绍 cookie 。 


[IE User Data 


微软 在 IE5 及 之 后 的 下 浏览 器 中 实现 了 它 专 属 的 客户 问 存 储 机 制 
"userData"。userData 可 以 实现 一 定量 的 字符 串 数 据 存储 ， 对 于 IE8 
以 前 的 下 浏览 絮 中 ， 可 以 将 其 用 做 是 Web 存 储 的 蔡 代 方案 。 关 于 
userData 的 API 会 在 20.3 节 中 进行 相应 介绍 。 


离线 Web 应 用 


HTML5 标 准 中 定义 了 一 组 “离线 web 应 用 ”API， 用 以 缓存 Web 页 面 以 及 
相关 资源 (脚本 、CSS 文 件 、 图 像 等 ) 。 它 实现 的 是 将 Web 应 用 整体 
存储 在 客户 端 ， 而 不 仅仅 是 存储 数据 。 它 能 够 让 Web 应 用 “安装 ”在 客 
户 端 ， 这 样 一 来 ， 哪 人 网 络 不 可 用 的 时 候 Web 应 用 依然 是 可 用 的 。 离 
线 Web 应 用 相关 的 内 容 会 在 20.4 节 中 介绍 。 


Web 数 据 库 


为 了 能 够 让 开发 者 像 使 用 数据 库 那 样 来 操作 大 量 数据 ， 很 多 主流 的 浏 
贤 句 纷纷 在 其 中 开始 集成 客户 端 数据 库 的 功能 。Safari、Chrome 和 
Opera 都 内 置 了 SQL 数据 库 的 客户 端 API。 赴 憾 的 是 ， 这 类 API 的 标 谁 
化 工作 以 失败 告终 ， 并 且 Firefox 和 IE 看 样子 也 都 不 打算 实现 这 种 API。 
目前 还 有 一 种 正在 标准 化 的 数据 库 API， 称 为 “索引 数据 库 

API” (Indexed Database API) 。 调 用 该 API 返 回 的 是 一 个 不 包含 查询 
语言 的 简单 数据 库 对 象 。 这 两 种 客户 端 数据 库 API 都 是 异步 的 ， 都 使 
用 了 事件 处 理 机 制 ! 册 ， 这 样 的 方式 多 多 少 少 会 显得 有 些 复杂 。 本 章 不 
人 但 是 22.8 广 会 简要 介绍 索引 数据 库 API 同 时 会 提供 一 
ce 分 8 


文件 系统 API 


本 书 第 8 章 介绍 过 现在 主流 浏览 右 都 文 持 一 个 文件 对 象 ， 用 以 将 择 的 文 
件 通过 XMLHttpRequest 上 传 到 服务 端 。 与 之 相关 的 规范 (草案 阶段 ) 
定义 了 一 组 API， 用 于 操作 一 个 私有 的 本 地 文件 系统 。 在 该 文件 系统 
中 可 以 进行 对 文件 的 读 写 操作 。 这 些 内 容 正在 紧 锣 密 芍 标准 化 当中 ， 
这 些 API 将 在 22.7 节 中 介绍 。 随 着 这 些 API 被 广泛 地 实现 和 文 持 ，Web 
这 对 于 大 部 分 程序 员 来 说 再 
于 候 vid 


存储 、 安 全 和 隐私 


Web 浏 听 絮 通常 会 提供 “ 记 住 Web 密 码 ” 功 能 ， 这 些 密 码 会 以 加 密 的 形式 
安全 地 存储 到 硬盘 上 。 然 而 ， 本 章 介绍 的 任何 形式 的 客户 端 数 据 存 储 
都 不 牵涉 加 密 : 任何 存储 在 用 户 人 硬盘 上 的 数据 都 是 未 加 密 的 形式 。 这 
样 一 来 ， 对 于 拥有 电脑 访问 权限 的 恶意 用 户 以 及 计算 机 上 存在 的 恶意 
软件 (比如 : 间谍 软件 ) 同样 也 可 以 获取 到 存储 的 数据 。 因 此 ， 任 何 
形式 的 客户 端 存 储 不 应 该 用 来 保存 密码 、 商 业 账 号 或 者 其 他 类 似 的 敏 
感 信 息 。 记 住 ， 尽 管用 户 访 问 你 的 网 站 时 ， 愿 意 在 表单 中 输入 一 些 信 
轧 ， 但 绝 不 代表 用 户 愿 意 将 这 些 信息 保存 到 便 盘 上 。 吏 拿 信用 卡 卡号 
来 举例 好 了 ， 这 是 用 户 的 隐私 ， 用 户 并 不 愿意 公开 ， 如 末 你 利用 客户 
端 持 久 性 将 该 信息 存储 起 来 ， 这 无 异 于 你 将 信用 卡号 写 在 一 张 便签 纸 
上 ， 随 后 精 贴 在 用 户 的 键盘 上 ， 让 所 有 人 都 看 到 。 


还 有 要 谍 记 的 一 点 ， 很 多 Web 用 户 不 信任 那些 使 用 cookie 和 其 他 客户 端 
存储 机 制 来 做 类 似 “ 跟 踪 ? 功 能 的 网 站 。 所 以 ， 尽 量 党 试用 本 章 讨论 的 

存储 机 制 来 为 网 站 提升 用 户 体验 ， 而 不 是 用 它们 来 收集 和 侵犯 隐私 相 

天 的 数据 。 如 采 网 站 滥用 客户 端 存储 ， 用 户 将 会 栖 用 该 功能 ， 这 样 一 

来 不 仅 起 不 到 效果 ， 还 会 导致 依赖 客户 端 存储 的 网 站 完全 不 可 用 。 


20.1 localStorage 和 sessionStorage 


实现 了 了 “Web 存储” 草案 标准 的 浏览 絮 在 Window 对 象 上 定义 了 两 个 属 
性 : localStorage 和 sessionStorage。 这 两 个 属性 都 代表 同一 个 Storage 对 
象 一 一 一 个 持久 化 关联 数组 ， 数 组 使 用 字符 串 来 索引 ， 存 储 的 值 也 都 
是 字符 串 形式 的 。Storage 对 象 在 使 用 上 和 一 般 的 JavaScript 对 象 没什么 
区 别 : 设置 对 象 的 属性 为 字符 串 值 ， 随 后 浏览 器 会 将 该 值 存 储 起 来 。 
localStorage 和 sessionStorage 两 者 的 区 别 在 于 存储 的 有 效 期 和 作用 域 的 
不 同 : 数据 可 以 存储 多 长 时 间 以 及 谁 拥有 数据 的 访问 权 。 


下 面 ， 我 们 会 对 存储 的 有 效 期 和 作用 域 进行 详细 的 解释 。 不 过 ， 在 此 
之 前 ， 让 我 们 先 来 看 些 例子 。 下 面 的 代码 使 用 的 是 localStorage， 但 是 
它 对 sessionStorage 也 同样 适用 : 


var name=localStorage.username;// 查 询 一 个 存储 的 值 


name=localStorage["username"];// 等 价 于 数组 表示 法 


if(!name)t{ 


name=prompt ("What is your name?");// 询 问 用 户 一 个 问题 


localStorage.username=name;// 存 储 用 户 的 答案 


// 人 迭代 所 有 存储 的 name/value 对 


for(var name in localStorage){// 迭 代 所 有 存储 的 名 字 


var value=localStorage[name];// 查 询 每 个 名 字 对 应 的 值 


Storage 对 象 还 定义 了 一 些 诸 如 存储 、 获 取 、 遍 历 和 删除 的 方法 。 这 些 


方法 会 在 20.1.2 节 中 介绍 。 


“Web 存 储 ” 草 案 标 准 指出 ， 我 们 既 可 以 存储 结构 化 的 数据 (对 象 和 数 
组 ) ， 也 可 以 存储 原始 类 型 数据 ， 还 可 以 存储 诸如 日 期 、 正 则 表达 式 
甚至 文件 对 象 在 内 的 内 置 类 型 的 数据 。 但 是 ， 
右 仅 仅 文 持 存 储 字符 串 类 型 数据 。 如 果 想 要 存储 和 获取 其 他 类 型 的 数 
据 ， 不 得 不 自己 手动 进行 编码 和 人 解码。 如 以 下 例子 所 示 : 


// 当 存储 一 个 数字 的 时 候 ， 会 把 它 自动 转换 成 一 个 字符 串 


// 但 是 ， 当 获取 该 值 的 时 候 别 忘记 了 手动 将 其 转换 成 数字 类 型 


localStorage.x=10; 


ns 


var x=parseInt(localStorage.x);// 同 样 地 ， 存 储 


企 


截至 本 书 截 入 时 ， 浏 所 


其 类 型 数 和 


localStorage.lastRead=(new Date()).toUTCString(); 


var lastRead=new Date(Date.parse(localsStorage.lastRead));// 使 


编码 的 工作 变 得 很 方便 


外 的 时 候 进行 纺 


码 ， 获 取 的 时 候 进行 解码 


JSON 可 以 使 得 对 基本 数据 类 型 


localstorage.data=JSON.stringify(data);// 编 码 然后 存储 


var data=JSON.parse(localStorage.data);// 获 取 数 值 之 后 再 解码 


20.1.1 存储 有 效 期 和 作用 域 


localStorage 和 sessionStorage 的 区 别 在 于 存储 的 有 效 期 和 作用 域 的 不 
同 。 通 过 localStorage 存 储 的 数据 是 永久 性 的 ， 除 非 Web 应 用 刻意 删除 
存储 的 数据 ， 或 者 用 户 通过 设置 浏览 器 配置 (浏览 器 提供 的 特定 UT) 
来 删除 ， 否 则 数据 将 一 直 保留 在 用 户 的 电脑 上 ， 永 不 过 期 。 
localStorage 的 作用 域 是 限定 在 文档 源 (document origin) 级 别 的 。 正 


如 13.6.2 节 所 介绍 的 ， 文 档 源 是 通过 协议 、 主 机 名 以 及 端口 三 者 来 确定 
的 ， 因 此 ， 下 面 每 个 URL 都 拥有 不 同 的 文档 源 ; 


http://www.example.com// 协 议 :http; 主 机 名 :www.example.com 


https://www.example.com// 不 同 协议 


http://static.example.com// 不 同 主机 名 


http://www.example .com:8000// 不 同 端 


同 源 的 文档 间 共 享 同 样 的 localStorage 数 据 (不 论 该 源 的 脚本 是 否 真 正 
地 访问 localStorage) 。 它 们 可 以 互相 读 取 对 方 的 数据 ， 甚 至 可 以 覆盖 
对 方 的 数据 。 但 是 ， 非 同 源 的 文档 间 互 相 都 不 能 读 取 或 者 履 盖 对 方 的 
数据 〈 即 使 它们 运行 的 脚本 是 来 自 同一 台 第 三 方 服务 器 也 不 行 ) 。 


需要 注意 的 是 localStorage 的 作用 域 也 受 浏 览 器 供应 两 限制 。 如 果 你 使 
用 Firefox 访 问 站 点 ， 那 么 下 次 用 另 一 个 浏览 器 (比如 ，Chrome) 再 次 
访问 的 时 候 ， 那 么 本 次 是 无 法 获取 上 次 存储 的 数据 的 。 


通过 sessionStorage 存 储 的 数据 和 通过 localStorage 存 储 的 数据 的 有 歼 期 
也 是 不 同 的 : 前 者 的 有 歼 期 和 存储 数据 的 脚本 所 在 的 最 顶层 的 窗口 或 
者 是 浏览 絮 标 签 页 是 一 样 的 。 一 旦 窗口 或 者 标签 页 被 永久 关闭 了 ， 那 


么 所 有 通过 sessionStorage 存 储 的 数据 也 都 被 删除 了 。 (当时 要 注意 的 
是 ， 现 代 浏 览 絮 已 经 具备 了 重新 打开 最 近 关 闭 的 标签 页 随后 恢复 上 一 
次 浏 贤 的 会 话 功 能 ， 因 此 ， 这 些 标签 页 以 及 与 之 相关 的 sessionStorage 
的 有 效 期 可 能 会 更 加 长 些 ) 。 


与 localStorage 一 样 ，sessionStorage 的 作用 域 也 是 限定 在 文档 源 中 ， 
此 非 同 源 文 档 间 都 是 无 法 共享 sessionStorage 的 。 不 仪 如 此 ， 
sessionStorage 的 作用 域 还 被 限定 在 窗口 中 。 如 果 同 源 的 文档 泻 染 在 不 
同 的 浏 贤 絮 标签 页 中 ， 那 么 它们 互相 之 间 拥 有 的 是 各 目的 
sessionStorage 数 据 ， 无 法 共享 ， 一 个 标签 页 中 的 脚本 是 无 法 读 取 或 者 
窗 盖 由 男 一 个 标签 页 脚本 写 入 的 数据 ， 哪 怕 这 两 个 标签 页 泻 染 的 是 同 
一 个 页 面 ， 运 行 的 是 同一 个 脚本 也 不 行 。 


要 注意 的 是 : 这 里 提 到 的 基于 窗口 作用 域 的 sessionStorage 指 的 窗口 只 
是 顶级 窗口 。 如 琳 一 个 浏览 器 标签 页 包含 两 个 <iframe > 元素 ， 它 们 
所 包含 的 文档 是 同 源 的 ， 那 么 这 两 者 之 间 是 可 以 共享 sessionStorage 
时 。 


20.1.2 ”存储 API 


localStorage 和 sessionStorage 通 常 被 当做 普通 的 JavaScript 对 象 使 用 : 通 
过 设置 属性 来 存储 字符 串 值 ， 人 查询 该 属性 来 读 取 该 值 。 除 此 之 外 ， 这 
两 个 对 象 还 提供 了 更 加 正式 的 API。 调 用 setItem() 方 法 ， 将 对 应 的 名 字 
和 值 传递 进去 ， 可 以 实现 数据 存储 。 调 用 getItem() 方 法 ， 将 名 字 传 递 

进去 ， 可 以 获取 对 应 的 值 。 调 用 removeItem() 方 法 ， 将 名 字 传 递 进去 ， 

可 以 删除 对 应 的 数据 。 (在 非 IE8 浏 览 器 中 ， 还 可 以 使 用 delete 操 作 符 

来 删除 数据 ， 就 和 对 普通 的 对 象 使 用 delete 操 作 符 一 样 。) 调用 clear0) 
方法 (不 需要 参数 ) ， 可 以 删除 所 有 存储 的 数据 。 最 后 ， 使 用 length 属 
性 以 及 key0 方 法 ， 传 入 0~length-1 的 数字 ， 可 以 枚 举 所 有 存储 数据 的 

名 字 。 下 面 是 一 些 使 用 localStrage 的 例子 。 这 些 代码 对 sessionStorage 也 
适用 : 


localstorage.setItem("x",1);// 以 "x" 的 名 字 存 储 一 个 数值 


localStorage.getItem("x");// 获 取 数 值 


// 枚 举 所 有 存储 的 名 字 / 值 对 


for(var i=0;i<localStorage.length;i++){//length 表 示 了 所 有 名 字 / 值 对 的 总 数 


var name=localStorage.key(i);// 获 取 第 i 对 的 名 字 


var value=localStorage.getItem(name ) ;// 获 取 该 对 的 值 


} 


localStorage.removeItem("x");// 删 除 "x" 项 


localStorage.clear( );// 全 部 删除 


尽管 通过 设置 和 得 询 属 性 能 更 加 方便 地 存储 和 获取 数据 ， 但 是 有 的 时 
候 还 是 不 得 不 使 用 上 面 提 到 的 这 些 方法 的 。 比 方 说 ， 其 中 clear() 方 法 
征 唯 一 能 删除 存储 对 象 中 所 有 名 / 值 对 的 方式 。 同 样 的 还 有 ， 
removeltem() 方 法 也 是 唯一 通用 的 删除 单个 名 / 值 对 的 方式 ， 因 为 IE8 不 
文 持 delete 操 作 符 。 


如 果 浏 览 器 提供 商 完全 实现 了 “Web 存 储 ” 的 标准 ， 文 持 对 象 和 数组 类 
型 的 数据 存储 ， 那 么 整 会 又 多 了 一 个 使 用 类 似 于 setItem() 和 getItem() 这 
类 方法 的 理由 。 对 象 和 数组 类 型 的 值 通 常 是 可 变 的 ， 因 此 存储 对 象 要 
求 存储 它们 的 副本 ， 以 确保 之 后 任何 对 这 类 对 和 象 的 改变 都 不 影响 到 存 
储 的 对 象 。 同 样 的 ， 在 获取 该 对 象 的 时 候 也 要 求 获 取 的 是 该 对 象 的 副 
本 ， 以 确保 对 已 获取 对 象 的 改动 不 会 影响 到 存储 的 对 象 。 而 这 类 操作 
如 果 使 用 基于 属性 的 API 就 会 令 人 困惑 。 考 虑 下 面 这 段 代 码 (假设 浏 
览 妖 已 经 支持 了 结构 化 数据 的 存储 ) : 


localStorage .0o={x:1};// 存 储 一 个 带 有 "x" 属 性 的 对 象 


localStorage.0.x=2;// 试 图 去 设置 该 对 象 的 属性 值 


localStorage.0.x//=>1:x 没 有 变 


上 述 第 二 行 代码 想 要 设置 存储 的 对 象 的 属性 值 ， 但 是 事实 上 ， 它 获取 
到 的 只 是 存储 的 对 象 的 副本 ， 随 后 设置 了 该 对 象 的 属性 值 ， 然 后 殉 将 


该 副本 废弃 了 “。 真 正 存储 的 对 象 保持 不 变 。 像 这 样 的 情况 ， 使 用 
getItem() 束 不 会 这 么 让 人 困惑 了 。 


localStorage.getItem("o").x=2;// 我 们 并 不 想 存 储 2 


最 后 ， 还 有 另外 一 个 使 用 显 式 的 机 遇 方 法 的 存储 API 的 理由 束 是 : 在 
还 不 文 持 “web 存储” 标准 的 浏览 右 中 ， 其 他 的 存储 机 制 的 顶层 API 对 其 
也 是 兼容 的 。 下 面 这 段 代码 使 用 cookie 和 IE userData 来 实现 存储 API。 
如 果 使 用 基于 方法 的 API， 当 localStorage 可 用 的 时 候 就 可 以 使 用 它 编 
写 代 码 ， 而 当 它 在 其 他 浏览 右上 不 可 用 的 时 候 依然 可 以 依赖 于 其 他 的 
存储 机 制 2。 代 码 如 下 所 示 : 


// 识 别 出 使 用 的 是 哪 类 存储 机 制 


var memory=window.localStorage|| 


(window.UserDataStorage&&new UserDatastorage())|| 


new cookieStorage( );// 然 后 在 对 应 的 机 制 中 查询 数据 


var username=memory.getIitem("username"); 


20.1.3 ”存储 事件 


无 论 什么 时 候 存 储 在 localStorage 或 者 sessionStorage 的 数据 发 生 改变 ， 
浏览 器 都 会 在 其 他 对 该 数据 可 见 的 窗口 对 象 上 触发 存储 事件 (但 是 ， 
在 对 数据 进行 改变 的 窗口 对 象 上 是 不 会 触发 的 ) 。 如 采 浏 贤 器 有 两 个 
标签 页 都 打开 了 来 目 同 源 的 页 面 ， 其 中 一 个 页 面 在 localStorage 上 存储 
了 数据 ， 那 么 另外 一 个 标签 页 驶 会 接收 到 一 个 存储 事件 。 要 记 住 的 是 
sessionStorage 的 作用 域 是 限制 在 顶层 窗口 的 ， 因 此 对 sessionStorage 的 
改变 只 有 当 有 相 率 连 的 窗口 的 时 候 才 会 触发 存储 事件 。 还 有 要 注意 的 
是 ， 只 有 当 存 储 数据 真正 发 生 改 变 的 时 候 才 会 触发 存储 事件 。 像 给 已 
经 存在 的 存储 项 设置 一 个 一 模 一 样 的 值 ， 抑 或 是 删除 一 个 本 来 就 不 存 
在 的 存储 项 都 是 不 会 触发 存储 事件 的 。 


为 存储 事件 注册 处 理 程序 可 以 通过 addEventListener() 方 法 (或 者 在 IE 
下 使 用 attachEvent() 方 法 ) 。 在 绝 大 多 数 浏览 器 中 ， 还 可 以 使 用 给 
Window 对 和 象 设置 onstorage 属 性 的 方式 ， 不 过 Firefox 不 支持 该 属性 。 


与 存储 事件 相关 的 事件 对 象 有 5 个 非常 重要 的 属性 《遗憾 的 是 ，IE8 不 
支 柯 它们 六 
key 


被 设置 或 者 移 除 的 项 的 名 字 或 者 键 名 。 如 果 调 用 的 是 clear() 函 数 ， 那 
么 该 属性 值 为 null。 


newValue 
保存 该 项 的 新 值 ， 或 者 调用 removeItem0 时 ， 该 属性 值 为 null 。 
oldValue 


改变 或 者 删除 该 项 前 ， 保 存 该 项 原先 的 值 ， 当 插入 一 个 新 项 的 时 候 ， 
该 属性 值 为 null 。 


storageArea 


这 个 属性 值 束 好 比 是 目标 Window 对 象 上 的 localStorage 属 性 或 者 是 
sessionStorage 属 性 。 


url 
触发 该 存储 变化 脚本 所 在 文档 的 URL 。 


最 后 要 注意 的 是 : localStorage 和 存储 事件 都 是 采用 广播 机 制 的 ， 浏 多 
右 会 对 目前 正在 访问 同样 站 点 的 所 有 窗口 发 送 消 轧 。 举 个 例子 ， 如 采 
一 个 用 户 要 求 网 站 停止 动画 效果 ， 那 么 站 点 可 能 会 在 localStorage 中 存 
储 该 用 户 的 首选 项 ， 这 样 依赖 ， 以 后 再 访问 该 站 点 的 时 候 殉 目 动 俘 目 
动画 效果 了 。 因 为 存储 了 该 首选 项 ， 导 致 了 触发 一 个 存储 事件 让 其 他 
展现 统一 站 点 的 窗口 也 获得 了 这 样 的 一 个 用 户 请 求 。 再 比如 ， 一 个 基 
于 Web 的 独 片 编辑 应 用 ， 通 音 允 许 在 其 他 的 窗口 中 展示 工具 条 。 当 用 
尸 选 择 一 个 工具 的 时 候 ， 应 用 就 可 以 使 用 localStorage 来 存储 当前 的 状 
态 ， 然 后 通知 其 他 窗口 用 户 选 择 了 新 的 工具 。 


20.2 cookie 


cookie 是 指 Web 浏 览 器 存储 的 少量 数据 ， 同 时 它 是 与 具体 的 Web 页 面 或 
者 站 点 相关 的 。cookie 最 早 是 设计 为 被 服务 端 所 用 的 ， 从 最 撒 层 来 
看 ， 作 为 HTTP 协议 的 一 种 扩展 实现 它 。cookie 数 据 会 目 动 在 Web 浏 贤 
角 和 和 Web 服务 絮 之 间 传 输 的 ， 因 此 服务 端 脚本 就 可 以 读 、 写 存储 在 客 
户 端 的 cookie 的 值 。 本 节 将 介绍 客户 端的 脚本 如 何 通 过 使 用 Document 
对 象 的 cookie 属 性 实现 对 cookie 的 操作 。 


为 什么 叫 "cookie" 


"cookie" 这 个 名 字 没 有 太 多 的 含义 ， 但 是 在 计算 机 历史 上 其 实 很 早 束 用 
到 它 了 。"cookie" 和 "magic cookie" 用 于 代表 少量 数据 ， 特 别 是 指 类 似 
密码 这 种 用 于 识别 吴 份 或 者 许可 访问 的 保密 数据 。 在 JavaScript 中 ， 
cookie 用 于 保存 状态 以 及 能 够 为 web 浏览 右 提供 一 种 身份 识别 机 制 。 但 
是 ，JavaScript 中 使 用 cookie 不 会 采用 任何 加 密 机 制 ， 因 此 它们 是 不 安 
全 的 。 (但 是 ， 通 过 https 来 传输 cookie 数 据 是 安全 的 ， 不 过 这 和 cookie 
本 身 无 关 ， 而 和 https: 协 议 相 关 。 ) 


操作 cookie 的 API 很 早 就 已 经 定义 和 实现 了 ， 因 此 该 API 的 兼容 性 很 

好 。 但 是 ， 该 API 几 乎 形同虚设 。 根 本 没有 提供 诸如 查询 、 设 置 、 删 
除 cookie 的 方法 ， 所 有 这 些 操作 都 要 通过 以 特殊 格式 的 字符 串 形 式 读 
写 Document 对 象 的 cookie 属 性 来 完成 。 每 个 cookie 的 有 歼 期 和 作用 域 都 
可 以 通过 cookie 属 性 来 分 别 指定 。 这 些 属 性 也 是 通过 在 同一 个 cookie 属 
性 上 以 特殊 格式 的 字符 串 来 设 定 的 。 


本 闻 剩 余部 分 会 解释 如 何 通过 cookie 属 性 来 指定 cookie 的 有 效 期 和 作用 
域 ， 以 及 如 何 通 过 JavaScript 来 设置 和 查询 cookie 的 值 。 最 后 ， 将 以 一 
个 “实现 基于 cookie 的 存储 API”* 例 子 来 结束 本 市 的 介绍 。 


仿 测 cookie 是 否 启 用 


由 于 滥用 第 三 方 cookie (如: cookie 是 和 网 页 上 的 图 片 相关 而 非 网 
页 本 二 相关 ) 的 缘故 ， 导 致 cookie 在 大 多 数 Web 用 户 心 目 中 都 留 下 了 很 
不 好 的 印象 。 比 如 ， 广 告 公 司 可 以 利用 第 三 方 cookie 来 实现 跟 踩 用 户 
的 访问 行为 和 习惯 ， 而 用 户 为 了 禁止 这 种 “条 探 "用 户 隐私 的 行为 会 在 
它们 的 浏览 妖 中 禁用 cookie。 因 此 ， 在 JavaScript 代 码 中 使 用 cookie 前 ， 
首先 要 确保 cookie 是 启用 的 。 在 绝 大 多 数 浏 贤 器 中 ， 可 以 通过 检测 


navigator.cookieEnabled 这 个 属性 实现 。 若 该 值 为 tue， 则 当前 cookie 是 
局 用 的 ; 反之 则 是 禁用 的 (但 是 ， 只 具备 “当前 浏览 会 话 生命 周期 "的 
韭 持久 化 cookie 仍 然 古 启用 的 ) 。 但 是 ， 该 属性 不 是 一 个 标准 的 属性 

(不 是 所 有 浏览 器 都 支持 的 ) 。 因 此 在 不 支持 该 属性 的 浏览 器 上 ， 必 
须 通过 使 用 下 面 将 要 介绍 的 技术 演 试 着 读 、 写 和 删除 测试 cookie 数 据 
来 测试 是 否 文 持 cookie。 


20.2.1 cookie 属 性 有 效 期 和 作用 域 


除了 名 (name) 和 值 (value) ，cookie 还 有 一 些 可 选 的 属性 来 控制 
cookie 的 有 效 期 和 作用 域 。cookie 默 认 的 有 歼 期 很 短暂 ; 它 只 能 持续 在 
Web 浏 览 恬 的 会 话 期 间 ， 一 旦 用 户 关 闭 浏 览 右 ，cookie 保 存 的 数据 驶 丢 
失 了 。 要 注意 的 是 : 这 与 sessionStorage 的 有 效 期 还 是 有 区 别 的 : 
coookie 的 作用 域 并 不 是 局 限 在 浏览 妖 的 单个 窗口 中 ， 它 的 有 效 期 和 整 
个 浏览 器 进程 而 不 是 单个 浏览 器 窗口 的 有 效 期 一 怪 。 如 果 想 要 延长 
cookie 的 有 效 期 ， 可 以 通过 设置 max-age 属 性 ， 但 是 必须 要 明确 告诉 浏 
唤 器 cookie 的 有 效 期 是 多 长 (单位 是 秒 ) 。 一 旦 设置 了 有 有效期， 浏览 
铬 吏 会 将 cookie 数 据 存储 在 一 个 文件 中 ， 并 且 直 到 过 了 指定 的 有 效 期 
才 会 删除 该 文件 。 


和 localStorage 以 及 sesstionStorage 类 似 ，cookie 的 作用 域 是 通过 文档 源 
和 文档 路 径 来 确定 的 。 该 作用 域 通过 cookie 的 path 和 domain 属 性 也 是 可 
配置 的 。 默 认 情 况 下 ，cookie 和 创建 它 的 web 页 面 有 关 ， 并 对 该 Web 页 
面 以 及 和 该 Web 页 面 同 目录 或 者 子 目 录 的 其 他 Web 页 面 可 见 。 比 如 ， 
Web 页 面 http://www.example.com/catalog/index.html 页 面 创 建 了 一 个 
cookie， 那 么 该 cookie 对 http://www.example.com/catalog/order.htm 页 面 
和 http://www.example.com/catalog/widgets/index.html 页 面 都 是 可 见 的 ， 
但 它 对 http://www.example.com/about.html 页 面 不 可 见 。 


默认 的 cookie 的 可 见 性 行为 满足 了 最 常见 的 需求 。 不 过 ， 有 的 时 候 ， 
你 可 能 希望 让 整个 网 站 都 能 够 使 用 cookie 的 值 ， 而 不 管 是 哪个 页 面 创 
建 它 的 。 比 方 说 ， 当 用 户 在 一 个 页 面 表 单 中 输入 了 他 的 邮件 地 址 ， 你 
想 将 它 保 存 下 来 ， 为 了 下 次 该 用 户 回 到 这 个 页 面 填写 表单 ， 或 者 在 网 
站 其 他 页 面 的 任何 地 方 要 求 输入 账单 地 址 的 时 候 ， 将 其 作为 默认 的 邮 
可 以 设置 cookie 的 路 径 (设置 cookie 的 
path 属 : 9 


这 样 一 来 ， 来 目 同 一 个 web 服务 器 的 Web 页 面 ， 只 要 其 URL 是 以 指定 
的 路 径 前 级 开始 的 ， 都 可 以 共享 cookie。 例 如 ， 如 有 果 
http://www.example.com/catalog/widgets/index.html 页 面 创建 了 一 个 
cookie， 并 且 将 该 路 径 设置 成 catalog"， 那 么 该 cookie 对 于 
http://www.example.com/catalog/order.html 页 面 也 是 可 见 的 。 或 者 ， 如 
果 把 路 径 设 置 成 *”， 那 么 该 cookie 对 任何 http:/www.example.com 这 人 台 
Web 服 务 塘 上 的 页 面 都 是 可 见 的 。 


将 cookie 的 路 径 设 置 成 ”等 于 是 让 cookie 和 localStorage 拥 有 同样 的 作用 
域 ， 同 时 当 它 请 求 该 站 点 上 任何 一 个 Web 页 面 的 时 候 ， 浏 贤 妖 都 必须 
将 cookie 的 名 字 和 值 传递 给 服务 右 。 但 是 ， 要 注意 的 是 ，cookie 的 path 
属性 不 能 被 用 做 访问 控制 机 制 。 如 果 一 个 web 页 面 想 要 读 取 同 一 站 点 
其 他 页 面 的 cookie， 只 要 简单 地 将 其 他 页 面 以 隐藏 <iframe> 的 形式 加 
载 进 来 ， 随 后 读 取 对 应 文档 的 cookie 台 可 以 了 。 同 源 策 略 (参见 13.6.2 
ee 但 是 对 于 同一 站 点 的 文档 它 是 完全 合 
法 的 。 


cookie 的 作用 域 默 认 由 文档 源 限制 。 但 是 ， 有 的 大 型 网 站 想 要 子 域 之 
间 能 够 互相 共 至 cookie。 比 如 ，order.example.com 域 下 的 服务 器 想 要 读 
取 catalog.example.com 域 下 设置 的 cookie 值 。 这 个 时 候 就 需要 通过 设置 
cookie 的 domain 属 性 来 达到 目的 。 如 果 catalog.example.com 域 下 的 一 个 
页 面 创 建 了 一 个 cookie， 并 将 其 path 属 性 设置 成 “”， 其 domain 属 性 设 
置 成 ".example.com"， 那 么 该 cookie 就 对 所 有 catalog.example.com、 
orders.example.com 以 及 任何 其 他 example.com 域 下 的 任何 其 他 服务 器 都 
可 见 。 如 采 没 有 为 一 个 cookie 设 置 域 必 性， 那么 domain 属 性 的 默认 值 
是 当前 Web 服 务 器 的 主机 名 。 要 注意 的 是 ，cookie 的 域 只 能 设置 为 当前 
服务 器 的 域 。 


最 后 要 介绍 的 cookie 的 属性 是 secure， 它 是 一 个 布尔 类 型 的 属性 ， 用 来 
表明 cookie 的 值 以 何 种 形式 通过 网 络 传递 。cookie 默 认 是 以 不 安全 的 形 
式 (通过 普通 的 、 不 安全 的 HTTP 连 接 ) 传递 的 。 而 一 旦 cookie 被 标识 
为 “安全 的 ”， 那 就 只 能 当 浏 览 右 和 服务 器 通过 HTTPS 或 者 其 他 的 安全 
协议 连接 的 时 候 才 能 传递 它 。 


20.2.2 ”保存 cookie 


要 给 当前 文档 设置 默认 有 效 期 的 cookie 值 ， 非 常 简 单 ， 只 须 将 cookie 属 
性 设置 为 一 个 字符 串 形 式 的 值 : 


name=value 


如 下 所 示 : 


document .cookie="version="+encodeURIComponent (document.1lastModified ) ， 


下 次 读 取 cookie 属 性 的 时 候 ， 之 前 存储 的 名 / 值 对 的 数据 就 在 文档 的 
cookie 列 表 中 。 由 于 cookie 的 名 / 值 中 的 值 是 不 允许 包含 分 号、 人 如 号 和 
至 日 待 ， 因 此 ， 在 存储 前 一 般 可 以 采用 JavaScript 核 心 的 全 局 函数 
encodeURIComponent() 对 值 进行 编码 。 相 应 的 ， 读 取 cookie 值 的 时 候 
需要 采用 decodeURIComponentO 函 数 解码 。 


以 简单 的 名 / 值 对 形式 存储 的 cookie 数 据 有 效 期 只 在 当前 Web 浏 览 絮 的 
会 话 内 ,一旦 用 户 关 闭 浏览 器 ，cookie 数 据 就 丢失 了 。 如 果 想 要 延长 
cookie 的 有 效 期 ， 就 需要 设置 max-age 属 性 来 指定 cookie 的 有 效 期 ( 单 
位 是 秒 ) 。 按 照 如 下 的 字符 串 形式 设置 cookie 属 性 即 可 : 


name=value;max-age=seconds 


I 函数 用 来 设置 一 个 cookie 的 值 ， 同 时 提供 一 个 可 选 的 max-age 属 


// 以 名 / 值 的 形式 存储 cookie 


// 同 时 采用 encodeURIComponent( ) 画 数 进行 编码 ， 来 转 义 分 号 、 逗 号 和 空白 符 


// 如 果 daysToLive 是 一 个 数字 , 设置 max-age 属 性 为 该 数值 表示 cookie 直 到 指定 的 天 数 


// 到 了 才 会 过 期 。 如 果 daysToLive 是 0 就 表示 删除 cookie 


function setcookie(name,value,daysToLive)t{ 


var cookie=name+"="+encodeURIComponent (value ) ， 


cookie+=";max-age="+(daysToLive*60*60*24); 
document .cookie=cookie; 
} 


同样 地 ， 如 果 要 设置 cookie 的 path、domain 和 和 secure 属 性 ， 只 须 在 存储 
cookie 值 前 ， 以 如 下 字符 串 形式 追加 在 cookie 值 的 后 面 : 


;bath=path 
;domain=domain 


Secure 


要 改变 cookie 的 值 ， 需 要 使 用 相同 的 名 字 、 路径 和 域 ， 但 是 新 的 值 重 
源 设 置 cookie 的 值 。 同 样 地 ， 设 置 渐 max-age 属 性 就 可 以 改变 原来 的 
cookie 的 有 效 期 。 


要 删除 一 个 cookie， 需 要 使 用 相同 的 名 字 、 路 径 和 域 ， 然 后 指定 一 个 
任意 〈 非 空 ) 的 值 ， 并 且 将 max-age 属 性 指定 为 0， 再 次 设置 cookie 。 


20.2.3” 读 取 cookie 


使 用 JavaScript 表 达 式 来 读 取 cookie 属 性 的 时 候 ， 其 返回 的 值 是 一 个 字 
符 捉 ， 该 字符 串 都 是 由 一 系列 名 / 值 对 组 成 ， 不 同名 / 值 对 之 间 通 过 “分 
号 和 空格 ”分 开 ， 其 内 容 包 含 了 所 有 作用 在 当前 文档 的 cookie。 但 是 ， 
它 并 不 包含 其 他 设置 的 cookie 属 性 。 通 过 document.cookie 属 性 可 以 获取 
cookie 的 值 ， 但 是 为 了 更 好 地 查看 cookie 的 值 ， 一 般 会 采用 split() 方 法 
将 cookie 值 中 的 名 / 值 对 都 分 离 出 来 。 


把 cookie 的 值 从 cookie 属 性 分 离 出 来 之 后 ， 必 须要 采用 相应 的 解码 方式 

(取决 于 之 前 存储 cookie 值 时 采用 的 编码 方式 ) ， 把 值 还 原 出 来 。 比 
如 ， 先 采用 decodeURIComponent() 方 法 把 cookie 值 解码 出 来 ， 之 后 再 
利用 JSON.parse() 方 法 转化 成 json 对 象 。 


例 20-1 定 义 了 一 个 getcookie() 函 数 ， 该 男 数 将 document.cookie 属 性 的 值 
0 出 来 ， 将 对 应 的 名 / 值 对 存储 到 一 个 对 象 中 ， 画 数 最 后 返回 该 对 


例 20-1: 解析 document.cookie 属 性 值 


| 


// 将 document .cookie 的 值 以 名 / 值 对 组 成 的 一 个 对 象 返 


// 假 设 存储 cookie 的 值 的 时 候 是 采用 encodeURIComponent( ) 函数 编码 的 


function getcookie(){ 


var cookie={};// 初 始 化 最 后 要 返回 的 对 象 


var all=document .cookie;// 在 一 个 大 写字 符 串 中 获取 所 有 的 cookie 值 


if(all==="")// 如 果 该 cookie 属 性 值 ;> 


return cookie;// 返 回 一 个 空 对 象 


var list=all,split(";");// 分 离 出 名 / 值 对 


for(var i=0;i<1list.length;i++){// 遍 历 每 个 cookie 


Var cookie=list[i]; 


var p=cookie.,indexof("=");// 查 找 第 一 个 "=" 符 号 


var name=cookie.substring(0,p);// 获 取 cookie 名 字 


var value=cookie.substring(p+1);// 获 取 cookie 对 应 的 值 


value=decodeURIComponent (value ) ;// 对 其 值 进行 解码 


cookie[name]=value;// 将 名 / 值 对 存储 到 对 象 中 


} 


return cookie; 


} 


20.2.4 ”cookie 的 局 限 性 


cookie 的 设计 初衷 是 给 服务 端 脚 本 用 来 存储 少量 数据 的 ， 该 数据 会 在 

每 次 请 求 一 个 相关 的 URL 时 传递 到 服务 器 中 。RFC 2965 或 励 浏 贤 器 供 
应 商 供 应 两 对 cookie 的 数目 和 大 小 不 做 限制 。 可 是 ， 要 知道 ， 该 标准 

不 允许 浏览 器 保存 超过 300 个 cookie， 为 每 个 Web 服 务 絮 保存 的 cookie 

数 不 能 超过 20 个 (是 对 整个 服务 器 而 言 ， 而 不 仅仅 指 服务 器 上 的 页 面 
和 站 点 ) ， 而 且 ， 每 个 cookie 保 存 的 数据 不 能 超过 4KB 〈 即 名 字 和 值 

的 总 量 不 能 超过 4KB 的 限制 ，。 实 际 上 ， 现 代 浏 贤 器 允许 cookie 总 数 

超过 300 个 ， 但 是 部 分 浏览 器 对 单个 cookie 大 小 仍然 有 4KB 的 限制 。 


20.2.5 ”cookie 相 关 的 存储 


例 20-2 展 示 了 如 何 实 现 基 于 cookie 的 一 系列 存储 API 方 法 。 该 例 定 义 了 
一 个 cookieStorage 琴 数 〈 被 实例 化 的 时 候 具 有 构造 函数 特性 ) ， 通 过 
将 max-age 和 path 属 性 传递 给 该 构造 函数 ， 束 会 返回 一 个 对 象 ， 然 后 丈 
可 以 像 使 用 localStorage 或 者 sessionStorage 一 样 来 使 用 这 个 对 象 了 。 但 
是 要 注意 的 是 ， 该 例 并 没有 实现 存储 事件 ， 因 此 ， 当 设置 和 查询 
属性 的 时 候 ， 不 会 实现 目 动 保存 和 获取 对 应 的 


例 20-2: 实现 基于 cookie 的 存储 API 


/A* 


*cookieStorage.js 


* 本 类 实现 像 localStorage 和 sessionStorage 一 样 的 存储 API， 不 同 的 是 ， 基 于 HTTP cookie 实现 它 


Wh 


function cookieStorage(maxage, path){f// 两 个 参数 分 别 代表 存储 有 效 期 和 作 


// 获 取 一 个 存储 全 部 cookie 信 息 的 对 象 


var cookie=(function(){// 类 似 之 前 介绍 的 getcookie( ) 画 数 


var cookie={};// 该 对 象 最 终 会 返 


var all=document .cookie;// 以 大 字符 串 


if(al1==="")// 如 果 该 属性 为 空 字符 串 


| 

> 
已 
地 
潍 


return cookie;// 返 


Hh 
RH 
wT 


乡 式 获取 所 有 cookjie 信 息 


var list=all,split(";");// 分 离 出 名 / 值 对 


for(var i=0;i<1list.length;i++){// 遍 历 每 个 cookie 


Var cookie=1list[i]; 


var p=cookie.,index0f("=");// 查 找 第 一 个 "=" 符 号 


var name=cookie.substring(0,p);// 获 取 cookie 名 字 


var value=cookie.substring(p+1);// 获 取 cookie 对 应 的 值 


value=decodeURIComponent (value);// 对 其 值 进行 解码 


cookie[name]=value;// 将 名 值 对 存储 到 对 象 


return cookie; 


}() ) ; // 将 所 有 cookie 的 名 字 存储 到 一 个 数组 


var keys=[]; 


UD 


UD 


域 


for(var key in cookie)keys.push(key) ;// 现 在 定义 存储 API 公 共 的 


// 存 储 的 cookie 的 个 数 


this.length=keys.length;// 返 


this.key=function(n){ 


if(n<0||n>=keys.length)return null; 


return keys[n]; 


};// 返 回 指定 名 字 的 cookie 值 , 如 果 不 存 在 则 返 


this.getIitem=function(name){ 


return cookie[name]||null; 


};// 存 储 cookie 值 


this.setItem=function(key,value)t{ 


if(!(key in cookie)){// 如 果 要 存储 的 cookie 还 不 存在 


属性 和 方法 


可 第 n 个 cookie 的 名 字 , 如 果 n 越 界 则 返 


null. 


有 cookie 名 的 数组 中 


keys .push(key);// 将 指定 的 名 字 加 入 到 存储 所 


this.length++;//cookie 个 数 加 一 


// 将 该 名 / 值 对 数据 存储 到 cookie 对 象 中 


cookie[key]=value;// 开 始 正式 设置 cookie 


// 首 先 将 要 存储 的 cookie 的 值 进行 纺 


码 ， 同 时 创建 一 个 "名 字 = 编 码 后 的 值 " 


onull 


var cookie=key+"="+encodeURIComponent(value);// 将 cookie 的 


if(maxage)cookie+=";max-age="+maxage; 
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设置 cookie 


if(path)cookie+=";path="+path;// 通 过 document . cookie 属性 


document .cookie=cookie,; 


};// 删 除 指定 的 cookie 


this.removeItem=function(key)t{ 


if(!(key in cookie))return;// 如 果 cookie 不 存在 ， 则 什么 也 不 做 


// 从 内 部 维护 的 cookie 组 删除 指定 的 cookie 


delete cookie[key];// 同 时 将 cookie 中 的 名 字 也 在 内 部 的 数组 中 删除 


Hl 


// 如 果 使 用 ES5 定 义 的 数组 indexof( ) 方 法 会 更 加 简单 


for(var i=0;1I<keys,Length;i++){f// 遍 历 所 有 的 名 字 


if(keys[i]===key){// 当 我 们 找到 了 要 找 的 那个 


keys .splice(i,1);// 将 它 从 数组 中 删除 


break; 


this.length--;//cookie 个 数 减 一 


入 | 


// 最 终 通过 将 该 cookie 值 设置 为 空 字符 串 以 及 将 有 效 期 设置 为 6 来 删除 指定 的 cookie 


document ,cookie=key+"=);max-age=0"， 


};// 删 除 所 有 的 cookie 


this,clear=function( ){// 循 环 所 有 的 cookie 的 名 字 ， 并 将 cookie 删 除 


for(var i=0;i<keys.length;i++) 


document .cookie=keys[i]+"=;max-age=0";// 重 置 所 有 的 内 部 状态 


cookie={}; 
keys=[]; 
this.1length=0; 
}; 


} 


20.3 利用 IE userData 持 久 化 数据 


IE5 以 及 下 5 以 上 版 本 的 浏览 器 是 通过 在 document 元 素 后 面 附加 一 个 专 
属 的 “DHTML 行 为 ”来 实现 客户 端 存 储 的 。 如 以 下 代码 所 示 : 


var memory=document .createElement ("div");// 创 建 一 个 元 素 


memory .id="_memory";// 设 定 一 个 jd 名 


memory.style.display="none";// 将 其 隐藏 


memory.style.behavior="url( '#default#userData' )";// 附 加 userData 行 为 


document .body.appendchild(memory );// 将 其 添加 到 document 元 素 中 


一 旦 给 元 素 赋 予 了 "userData" 行 为 ， 该 元 素 就 拥有 load(O 和 save() 方 法 。 
1l0ad0) 方 法 用 于 载 入 存储 的 数据 。 使 用 它 的 时 候 必 须 传递 一 个 字符 串 作 
为 参数 一 一 类 似 于 一 个 文件 名 ， 该 参数 用 来 指定 要 载 入 的 存储 数据 。 

当 数 据 载 入 后 ， 就 可 以 通过 该 元 素 的 属 1 
据 ， 可 以 使 用 getAttribute() 来 查询 这 些 数据 。 通 过 setAttribute() 方 法 设 
置 属 性 ， 然后 因 全 oo 法 下 以 存 请 新 的 数 尖 而 要 删除 数据 ， 通 过 
使 用 removeAttribute() 方 法 然后 调用 save0) 方 法 即 可 。 如 下 例 所 示 (该 
例 使 用 了 此 前 例子 中 初始 化 的 那个 memory 元 素 ) 


memory,.1oad("myStoredData" ) ;// 根 据 指定 名 ， 载 入 对 应 的 数据 


var name=memory .getAttribute("username" ) ;// 获 取 其 中 的 数据 片段 


if(!name ){// 如 果 没 有 指定 的 数据 片段 


name=prompt("What is your name?);// 获 取 用 户 输入 


I 


memory.setAtttribute("username",name);// 将 其 设置 成 memory 元 素 的 一 个 属性 


memory .save("myStoredData");// 保 存 它 方便 下 次 使 


默认 情况 下 ， 通 过 userData 存 储 的 数据 ， 除 非 手 动 去 删除 它 否 则 永 不 

失效 。 但 是 ， 也 可 以 通过 设置 expires 属 性 来 指定 它 的 过 期 时 间 。 就 拿 

上 加 的 例子 来 说 可 以 给 存储 的 数据 设置 时 长 100 达 天 的 有 效 期 ， 如 下 
个 \: 


var now=(new Date()).getTime();// 获 取 当 前 时 间 ， 以 毫秒 为 单位 


var expires=now+100*24*60*60*1000;// 距 离 当 前 时 间 100 天 ， 把 天 数 换算 成 毫秒 


expires=new Date(expires).toUTCString();// 将 其 转换 成 字符 串 


memory .expires=expires;// 设 置 userData 的 过 期 时 间 


IE userData 的 作用 域 限制 在 和 当前 文档 同 目 隶 的 文档 中 。 它 的 作用 域 
没有 cookie 宽 泛 ，cookie 对 其 所 在 目录 下 的 子 目 录 也 有 效 。userData 的 
机 制 并 没有 像 cookie 那 样 ， 通 过 设置 path 和 domain 属 性 来 控制 或 者 改变 
其 作用 域 的 方式 。 


userData 人 允许 存储 的 数据 量 要 比 cookie 大 ,但 是 却 比 localStorage 以 及 
sessionStorage 人 允许 存储 的 数据 量 要 小 。 


例 20-3 基 于 正 的 userData 实 现 了 存储 API 提 供 的 getItem0、setItemO 以 及 
removeltem() 方 法 。 (但 是 它 没有 实现 key0 或 者 clear0 方 法 ， 原 因 是 
userData 并 没有 定义 遇 历 所 有 存储 项 的 一 种 方法 。) 


例 20-3: 基于 I 下 的 userData 实 现 部 分 存储 API 


function UserDataStorage(maxage){// 创 建 一 个 document 元 素 并 附加 userData 行 为 


// 因 此 该 元 素 获得 save( ) 和 1load( ) 方 法 


var memory=document .createElement ("div");// 创 建 一 个 元 素 


memory,.style.display="none";// 将 其 隐藏 


memory.style.behavior="url('#default#userData' )";// 附 加 userData 行 为 


document .body .appendchild(memory );// 将 该 元 素 添 加 到 document 元 素 中 


// 如 果 传 递 了 maxage 参 数 (单位 为 秒 ) ， 则 将 其 设置 为 userData 的 有 交 


洗 


期 ， 以 毫秒 为 单 人 


交 志 


Ta 


If(maxage){ 


var now=new Date().getTime();// 当 前 时 间 


var expires=now+maxage*10090;// 当 前 时 间 加 上 有 效 期 就 等 于 过 期 时 间 


memory ,expires=new Date(expires).toUTCString(); 


// 通 过 载 入 存储 的 数据 来 初始 化 memory 元 素 


// 参 数 是 任意 的 ， 只 要 是 在 保存 的 时 候 存在 的 就 可 以 了 


memory.1load("UserDataStorage");// 载 入 存储 的 数据 


this.getItem=function(key){// 通 过 属性 来 获取 保存 的 值 


return memory.getAttribute(key)||null; 


}; 


this.setItem=function(key,value)t{ 


性 的 形式 来 保存 数据 


memory .setAttribute(key,value);// 以 设置 属 


el 


memory .save("UserDataStorage");// 保 存 数据 改变 后 的 状态 


}; 


this.removeItem=function(key)t{ 


memory .removeAttribute(key );// 删 除 存储 的 数据 


memory .save("UserDataStorage");// 再 次 保存 状态 


}; 


由 于 上 上 述 代 码 多 在 于 浏 哆 絮 下 有 效 ， 最 好 使 用 I 下 条 件 注 释 来 避免 其 他 
浏览 磺 载 入 上 述 代码 。 

<!--[if IE]> 

<script src="UserDataStorage.js"></script> 


<!l[endif]--> 


20.4 ”应 用 程序 存储 和 离线 Web 应 用 


HTML5 中 新 增 了 “应 用 程序 缓存 "， 人 允许 Web 应 用 将 应 用 程序 自身 本 地 
保存 到 用 户 的 浏览 器 中 。 不 像 localStorage 和 sessionStorage 只 是 保存 
Web 应 用 程序 相关 的 数据 ， 它 是 将 应 用 程序 自身 保存 起 


序 所 需 运 行 的 所 有 文件 (HTML、CSS、JavaScript、 图 片 等 ) 。“ 应 用 
程序 缓存 "和 一 般 的 浏览 器 缓存 不 同 : 它 不 会 随 着 用 户 清 除 浏览 器 缓存 
而 被 清除 。 同 时 ， 缓 存 起 来 的 应 用 程序 也 不 会 像 一 般 固定 大 小 的 缓存 
那样 ， 老 数据 会 被 最 近 一 次 访问 的 新 数据 代替 掉 。 它 其 实 不 是 临时 存 
储 在 缓存 中 ， 应 用 程序 更 像 是 被 < 安装 ”在 那里 ， 除 非 被 用 户 “ 外 载 ?或 

者 “删除 它们， 否则 它们 就 会 一 直 “ 驻 扎 ? 在 那里 。 所 以 ， 总 的 来 

说 , “应 用 程序 缓存 ”在 真正 意义 上 不 是 “缓存 "”， 更 好 的 说 法 应 该 称 之 

为 “应 用 程序 存储 ”。 


让 Web 应 用 能 够 实现 “本 地 安装 ”的 目的 是 要 你 证 它们 能 够 在 离线 状态 
(比如 ， 当 在 飞机 上 或 者 手机 没 信号 的 时 候 ) 下 依然 可 访问 。 将 上 自 

己 “ 安 装 ? 到 应 用 程序 缓存 中 的 web 应用， 在 离线 状态 下 使 用 

localStorage 来 保存 应 用 相关 的 数据 ， 同 时 还 具备 一 套 同 步 机 制 ， 在 再 

次 回 到 在 线 状 态 的 时 候 ， 能 够 将 存储 的 数据 传输 给 服务 器 。 在 20.4.3 节 

我 们 会 看 到 一 个 离线 web 应 用 的 例子 。 不 过 ， 在 这 之 前 ， 移 来 介绍 下 

应 用 程序 是 如 何 将 自己 “安装 ”到 应 用 程序 缓存 中 的 。 


20.4.1 应 用 程序 缓存 清单 


想 要 将 应 用 程序 “安装 ”到 应 用 程序 缓存 中 ， 首 先 要 创建 一 个 清单 : 包 
含 了 所 有 应 用 程序 依赖 的 所 有 URL 列 表 。 然 后， 通过 在 应 用 程序 主 
a <html> 标签 中 设置 manifest 属 性 ， 指 向 到 该 清单 文件 就 
可 以 了 了: 


<!IDOCTYPE HTML > 


<html manifest="myapp.appcache"> 


<head>...</head> 


<body>...</body> 


</html> 


清单 文件 中 的 首 行内 容 必须 以 "CACHE MANIFEST" 字 符 串 开始 。 其 余 
束 是 要 缓存 的 文件 URL 列 表 ， 一 行 一 个 URL。 相 对 路 径 的 URL 都 相对 


于 清单 文件 的 URL。 会 忽略 内 容 中 的 空 行 ， 会 作为 注释 而 忽略 以 “打开 
始 的 行 。 注释 前 面 可 以 有 空格 ， 但 是 在 同一 行 注 释 后 面 是 不 允许 有 非 
空 字符 的 。 如 下 所 示 有 是 一 个 简单 的 清单 文件 : 


CACHE MANIFEST 


# 上 一 行 标识 此 文件 是 一 个 清单 文件 。 本 行 是 注释 


# 下 面 的 内 容 都 是 应 用 程序 依赖 的 资源 文件 的 URL 


myapp.html 
myapp.js 
myapp.css 


images/background.png 


缓存 清单 的 MIME 类 型 


应 用 程序 缓存 清单 文件 约定 以 .appcache 作 为 文件 扩展 名 。 但 是 ， 这 也 

仅仅 只 是 约定 而 已 ，Web 服 务 器 真正 识别 清单 文件 的 方式 是 通 

过 "textcache-manifest" 这 个 MIME 类 型 的 一 个 清单 。 如 果 服 务 器 将 清单 
文件 的 Content-Type 的 头 信 息 设置 成 其 他 MIME 类 型 ， 那 么 就 不 会 缓存 
应 用 程序 了 。 因 此 ， 可 能 需要 对 Web 服 务 器 做 一 定 的 配置 来 使 用 这 个 

MIME 类 型 ， 比 如 ， 在 Web 应 用 目录 下 创建 Apache 服 务 需 的 一 

个 .htaccess 文 件 。 


清单 文件 包含 要 缓存 的 应 用 的 标识 。 如 果 一 个 Web 应 用 有 很 多 Web 页 
面 《用 户 可 以 访问 多 个 HTML 页面) ， 那 么 每 个 HTML 页面 就 需要 设 
置 <html manifest= > 属性 来 指向 清单 文件 。 事 实 上 ， 将 这 些 不 同 的 页 
面 都 指向 同一 个 清单 文件 ， 可 以 很 清楚 地 表达 出 它们 都 是 需要 缓存 起 
来 的 ， 同 时 它们 又 是 来 自 同一 个 Web 应 用 的 。 如 果 一 个 应 用 只 有 少量 
的 HTML 页 面 ， 那 么 一 般 会 把 这 些 页 面 都 显 式 地 列 在 清单 文件 中 。 但 
这 不 是 强制 的 : 会 认为 任何 链接 到 清单 文件 的 文件 都 是 Web 应 用 的 一 
部 分 ， 并 会 随 着 应 用 一 起 缓存 起 来 。 


像 之 前 提 到 的 ， 一 个 简单 的 清单 必须 列 出 Web 应 用 依赖 的 所 有 资源 。 
一 旦 一 个 Web 应 用 首次 下 载 下 来 并 缓存 ， 之 后 的 任何 加 载 请 求 就 都 来 
目 缓存 。 从 缓存 中 去 载 入 一 个 应 用 货源 的 时 候 ， 吏 要 求 它 请 求 的 任何 
货源 务必 要 在 清单 中 。 不 会 载 入 不 在 清单 中 的 货源 。 这 种 政策 有 点 离 
线 的 味道 。 如 有 果 一 个 简单 的 缓存 起 来 的 应 用 能 够 从 缓存 中 载 入 并 运 

行 ， 那么 它 也 可 以 在 浏览 器 的 离线 状态 下 运行 。 通 常情 况 下 ， 很 多 复 
杂 的 Web 应 用 无 法 将 它们 依赖 的 所 有 资源 都 缓存 起 来 。 但 是 ， 如 采 写 
们 同时 也 有 一 个 复业 的 清音 的话， 它们 仍然 可 以 使 用 应 用 程序 缓存 。 


复杂 的 清单 


一 个 应 用 从 应 用 程序 缓存 中 载 入 的 时 候 ， 只 有 其 清单 文件 中 列举 出 来 
的 资源 文件 会 载 入 。 前 面 例子 中 的 清单 文件 一 次 列举 一 个 资源 的 
URL。 事 实 上 ， 清 单 文件 还 有 比 这 更 复杂 的 语法 ， 列 举 资源 的 方式 也 
还 有 另外 两 种 。 在 清单 文件 中 可 以 使 用 特殊 的 区 域 头 出来 标识 该 头 信 
息 之 后 清单 项 的 类 型 。 像 该 例 中 列举 的 简单 缓存 项 事实 上 都 属 

于 "CACHE:" 区 域 ， 这 也 是 默认 的 区 域 。 另 外 两 种 区 域 是 

以 "Network:" 和 "FALLBACK:" 头 信息 开始 的 〈 一 个 清单 可 以 有 任意 数 
量 的 区 域 ， 而 且 在 相 邻 两 个 区 域 之 间 可 以 根据 需要 相互 切换 ) 。 


"NETWORK:" 区 域 标 识 了 该 URL 中 的 资源 从 不 缓存 ， 总 要 通过 网 络 获 
有 取 。 通 常 ， 会 将 一 些 服务 端的 脚本 资源 放 在 "NETWORK:" 区 域 中 ， 而 
实际 上 该 区 域 中 的 资源 的 URL 都 只 是 URL 前 级 ， 用 来 表示 以 此 URL 前 
级 开头 的 资源 都 应 该 要 通过 网 络 加 载 。 当 然 ， 如 果 浏 览 絮 处 于 离线 状 
态 ， 那 么 这 些 资源 都 将 获取 失败 。"NETWORK:" 区 域 中 的 URL 还 支 
持 “*” 通 配 符 。 该 通配符 表示 对 任何 不 在 清单 中 的 资源 ， 浏 览 絮 都 将 通 
过 网 络 加 载 。 这 实际 上 违背 了 这 样 一 条 规则 :缓存 应 用 程序 必须 要 在 
清单 中 列举 所 有 应 用 相关 的 资源 ! 


"FALLBACK:" 区 域 中 的 清单 项 每 行 都 包含 两 个 URL。 第 二 个 URL 是 指 
需要 加 载 和 存储 在 缓存 中 的 资源 ， 第 一 个 UREL 是 一 个 前 缀 。 任 何 能 够 
匹配 到 该 前 缀 的 URL 都 不 会 缓存 起 来 ， 但 是 可 能 的 话 ， 它 们 会 从 网 络 
中 载 入 。 如 果 从 网 络 中 载 入 这 样 一 个 URL 失 败 的 话 ， 就 会 使 用 第 二 个 
URL 指 定 的 缓存 资源 来 代替 ， 从 缓存 中 获取 。 想 象 一 个 Web 应 用 包含 
一 定数 量 的 视频 教程 。 这 些 视频 都 很 大 ， 显 然 把 它们 缓存 到 本 地 是 不 
合适 的 。 因 此 ， 在 离线 状态 下 ， 通 过 清单 文件 中 的 fallback 区 域 ， 就 可 
以 使 用 一 些 机 遇 文 本 的 帮助 文件 来 代替 了 。 


下 面 是 一 个 更 加 复杂 的 缓存 清单 : 


CACHE MANIFEST 

CACHE : 

myapp.html 

myapp.css 

myapp.js 

FALLBACK.: 
videos/offline_ help.html 
NETWORK : 


cgi/ 


20.4.2 ”缓存 的 更 新 


当 一 个 Web 应 用 从 缓存 中 载 入 的 时 候 ， 所 有 与 之 相关 的 文件 也 是 直接 
从 缓存 中 获取 。 在 线 状态 下 ， 浏 贤 絮 会 异步 地 检查 清单 文件 是 否 有 更 
新 。 如 果 有 更 新 ， 新 的 清单 文件 以 及 清单 中 列举 的 所 有 文件 都 会 下 载 
下 来 重新 保存 到 应 用 程序 缓存 中 。 但 是 ， 要 注意 的 是 ， 浏 览 絮 只 是 检 
查 清单 文件 ， 而 不 会 去 检查 缓存 的 文件 是 否 有 更 新 : 只 检查 清单 文 
件 。 比 如 ， 如 果 修 改 了 一 个 缓存 的 JavaScript 文 件 ， 并 且 要 想 让 该 文件 
生效， 束 必 须 去 更 新 下 清单 文件 。 由 于 应 用 程序 依赖 的 文件 列表 其 实 
并 没有 变化 ， 因 此 最 简单 的 方式 加 是 更 新 版 本 号 : 


CACHE MANIFEST 


#MyApp version 1( 更 改 这 个 数字 以 便 让 浏览 器 重新 下 载 这 个 文件 ) 


MyApp.html 


MyYApp ,js 


同样 ， 如 有 条 想 要 让 Web 应 用 从 缓存 中 “ 秋 载 >， 吕 要 在 服务 天 端 删除 清 
单 文件 ， 使 得 请 求 该 文件 的 时 候 返 回 HTTP 404 无 法 找到 的 错误 ， 同 
时 ， 修 改 HTML 文 件 以 便 他 们 与 该 清单 列表 “ 断 开 链接 ”。 


要 注意 的 是 ， 浏 宽 器 检查 清单 文件 以 及 更 新 缓存 的 操作 是 异步 的 ， 可 
能 是 在 从 缓存 中 载 入 应 用 之 前 ， 也 有 可 能 同时 进行 。 因 此 ， 对 于 倘 单 
的 Web 应 用 而 言 ， 在 更 新 清单 文件 之 后 ， 用 户 必须 载 入 应 用 两 次 才能 
保证 最 新 的 版 本 生效 : 第 一 次 是 从 缓存 中 载 入 老 版 本 随后 更 新 缓存 ; 
第 二 次 才 从 缓存 中 载 入 最 新 的 版 本 。 


浏览 需 在 更 新 缓存 过 程 中 会 触发 一 系列 事件 ， 可 以 通过 注册 处 理 程序 
来 跟 踩 这 个 过 程 同 时 提供 反馈 给 用 户 。 如 下 例 所 示 : 


applicationCache.onupdateready=function(){ 


var reload=confirm("A new version of this application is available\n"+"and will be 


used the next time you reload.\n"+"DoO you want to reload now?"); 
if(reload)location.reload(); 


} 


要 注意 的 是 ， 该 事件 处 理 程序 是 注册 在 ApplicationCache 对 象 上 的 ， 该 
对 象 是 window 的 applicationCache 属 性 的 值 。 文 持 应 用 程序 缓存 的 浏 贤 
丹 会 定义 该 属性 。 此 外 ， 除 了 上 面 例子 中 的 updateready 事 件 之 外 ， 还 
有 其 他 7 种 应 用 程序 缓存 事件 可 以 监 探 。 例 20-4 展 示 了 一 个 简单 的 处 理 
妃 来 通知 用 户 缓 存 更 新 的 进度 ， 以 及 当前 缓存 


例 20-4: 处 理应 用 缓存 相关 事件 


// 下 面 所 有 的 事件 处 理 程序 都 使 用 此 函数 来 显示 状态 消息 


// 由 于 都 是 通过 调用 status 函 数 来 显示 状态 ， 因 此 所 有 处 理 程序 都 返回 false 来 阻止 浏览 器 


// 显 示 其 默认 状态 消息 


function status(msg){// 将 消息 输出 到 id 为 "statusline" 的 文档 元 素 中 


document .getElementById("statusline").innerHTML=msg; 


console.1og(msg);// 同 时 在 控制 台 输出 此 消息 ， 便 于 调试 


// 每 当 应 用 程序 载 入 的 时 候 ， 都 会 检查 该 清单 文件 


让 


// 也 总 会 


触发 "checking" 事 伯 


Bh 


window.applicationCache.onchecking=function(){ 


status("Checking for a new version."); 


return false,; 


ey 


};// 如 果 清 单 文件 没有 改动 ， 同 时 应 用 程序 


已 经 缓存 了 


//"noupdate" 事 件 会 被 触发 ， 整 个 过 程 结束 


window.applicationCache.onnoupdate=function(){ 


status("This version is up-to-date.") 


return false,; 


}; // 如 果 还 未 缓存 应 用 程序 ， 或 者 清单 文件 有 改动 


// 那 么 浏览 器 会 下 载 并 缓存 清单 中 的 所 有 资源 


// 触 发 "downloading" 事 件 ， 同 时 意味 着 下 载 过 程 开始 


window.applicationCache.ondownloading=function(){ 


status("Downloading new version"); 


window,progresscount=0;// 在 下 面 的 "progress'" 习 


事件 处 理 程序 会 用 到 
return false， 
};// 在 下 载 过 程 中 会 间断 性 地 触发 "progress" 事 件 
// 通 常 是 在 每 个 文件 下 载 完 毕 的 时 候 
window.applicationCache.onprogress=function(e){// 事 伯 
XHR2 使 用 的 ) ， 


友人 件 对 象 应 当 是 "process'" 寻 


囊 人 


BY 


让 


mul 


(就 像 哪些 被 


// 通 过 该 对 象 可 以 计算 出 下 载 完成 比例 ， 但 是 


， 如 果 它 不 是 "process" 事 


ul 
个 
TT 


// 我 们 统计 调 


的 次 数 


var progress="",; 


if(e&&e.lengthCcomputable)//"process" 旺 


ul 
全 


件 : 计算 下 载 完成 比例 


progress=""+Math,.round(100*e.loaded/e.total)+"%" 


else// 否 则 ， 输 出 调 


0 
Lan 


progress="("+++progresscount+")" 


status("Downloading new version"+progress); 


return false,; 


};// 当 


下 载 完成 首次 将 
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到 缓存 中 时 ， 


// 浏 览 器 会 触发 "cached" 事 


window.applicationCache.oncached=function(){ 


status("This application is now cached locally"); 


return false,; 


};// 当 下 载 完 成 并 将 缓存 中 的 应 用 程序 更 新 后 ， 浏 览 器 会 触发 "updateready" 事 件 


// 要 注意 的 是 : 触发 此 事件 的 时 候 ， 用 户 任 然 可 以 看 到 老 版 本 的 应 用 程序 . 


window.applicationCache.onupdateready=function(){ 


status("A new version has been downloaded.Reload to run it"); 


return false,; 


};// 如 果 浏 览 器 处 于 离线 状态 ， 检 查 清单 列表 失败 ， 则 会 触发 "error "事件 


// 当 一 个 未 缓存 的 应 用 程序 引用 一 个 不 存在 的 清单 文件 ， 也 会 触发 此 事件 


window.applicationCache.onerror=function(){ 


status("Couldn't load manifest or cache application"); 


return false,; 


};// 如 果 一 个 缓存 的 应 用 程序 引用 一 个 不 存在 的 清单 文件 


// 会 触发 "obsolete" 事 件 ， 同 时 会 将 应 用 从 缓存 中 移 除 


// 之 后 都 不 会 从 缓存 而 是 通过 网 络 来 加 载 资源 


window.applicationCache.onobsolete=function(){ 
status("This application is no longer cached."+ 
"Reload to get the latest version from the network."); 
return false,; 

}; 


每 次 载 入 一 个 设置 了 manifest 属 性 的 HTML 文 件 ， 浏 宽 妖 都 会 触 
发 "checking" 事 件 ， 并 通过 网 络 载 入 该 清单 文件 。 不 过 之 后 ， 会 随 着 不 


同 的 情况 触发 不 同 的 事件 。 
没有 可 用 的 更 新 


如 果 应 用 程序 已 经 缓存 并 且 清 单 文件 没有 改动 ， 则 浏览 右 会 触 
发 "noupdate" 事 件 。 


有 可 用 的 更 新 

如 果 应 用 程序 已 经 缓存 了 并 且 清 单 文件 发 生 了 改动 ， 则 浏览 右 会 触 
发 "downloading" 事 件 ， 并 开始 下 载 和 缓存 清单 文件 中 列举 的 所 有 资 

源 。 随 着 下 载 过 程 的 进行 ， 浏 宽 妖 还 会 触发 "progress" 事 件 ， 在 下 载 完 
成 后 ， 会 触发 "updateready" 事 件 。 

首次 载 入 新 的 应 用 程序 


如 果 还 未 缓存 应 用 程序 ， 如 上 所 述 ，"downloading" 事 件 和 "progress" 事 
件 都 会 触发 。 但 是 ， 当 下 载 完 成 后 ， 浏 览 器 会 触发 "cached" 事 件 而 不 
是 "updateready 事件 。 


浏 蜗 絮 处 于 离线 状态 
如 果 浏 贤 器 处 于 离线 状态 ， 它 无 法 检查 清单 文件 ， 同 时 它 会 触 
发 "error" 事 件 。 如 果 一 个 未 缓存 的 应 用 程序 引用 一 个 不 存在 的 清单 文 
件 ， 浏 览 右 也 会 触发 该 事件 。 
清单 文件 不 存在 
如 果 浏 贤 器 处 于 在 线 状 态 ， 应 用 程序 也 已 经 针 爱 存 起 来 了 ， 但 是 清单 文 
件 不 存在 〈 返 回 404 无 法 找到 错误 ) ， 浏 览 句 会 触发 "obsolete" 事 件 ， 
并 将 该 应 用 程序 从 缓存 中 移 除 。 


除了 使 用 事件 处 理 程 序 之 外 ， 还 可 以 使 用 applicationCache.status 属 性 来 
查看 当前 缓存 状态 。 该 属性 有 6 个 可 能 的 属性 值 : 


ApplicationCache.UNCACHED(0) 
应 用 程序 没有 设置 manifest 属 性 : 未 缓存 


ApplicationCache.IDLE(1) 

清单 文件 已 经 检查 完毕 ， 并 且 已 经 缓存 了 最 新 的 应 用 程序 
ApplicationCache.CHECKING(2) 

浏 唤 器 正在 检查 清单 文件 
ApplicationCache.DOWNLOADING(3) 

浏 贤 右 正在 下 载 并 缓存 请 单 中 列举 的 所 有 文件 
ApplicationCache.UPDAIEREADY(4) 

已 经 下 载 和 缓存 了 最 新 版 的 应 用 程序 
ApplicationCache.OBSOLETE(5) 

清单 文件 不 存在 ， 绥 存 将 被 清除 


ApplicationCache 对 象 还 定义 了 两 个 方法 : update() 方 法 显 式 调用 了 更 
狐 缓存 算法 以 检测 是 否 有 最 新 版 本 的 应 用 程序 。 这 导致 浏览 絮 检 测 同 
a (并 触发 相同 的 事件 ) ， 这 和 第 一 次 载 入 应 用 程序 时 的 
效果 是 一 样 的 。 


还 有 一 个 方法 是 swapCache0， 该 方法 更 加 巧妙 。 还 记得 当 浏 览 右 下 载 
并 缓存 更 新 版 本 的 应 用 时 ， 用 户 仍 然 在 运行 老 版 本 的 应 用 吧 。 只 有 当 
用 户 再 次 载 入 应 用 时 ， 才 会 访问 到 最 新 版 本 。 但 是 如 果 用 户 没有 重新 
载 入 ， 就 必须 要 保证 老 版 本 的 应 用 也 要 工作 正常 。 同 时 要 注意 的 是 ， 
老 版 本 应 用 程序 的 相关 资源 可 能 是 从 缓存 中 加 载 的 : 比如 ， 应 用 程序 
可 能 使 用 XMLHttpRequest 去 获取 文件 ， 而 这 些 请 求 也 务必 要 保证 能 够 
从 老 版 本 缓存 中 的 文件 获取 到 。 因 此 ， 浏 览 器 在 用 户 再 次 载 入 应 用 前 
必须 在 缓存 中 保留 老 版 本 的 应 用 。 


swapCache() 方 法 告诉 浏览 颖 它 可 以 弃 用 老 的 缓存 ， 所 有 的 请 求 都 从 新 
绥 存 中 获取 。 要 注意 的 是 ， 这 并 不 会 重新 载 入 应 用 程序 : 所 有 已 经 载 
入 的 HTML 文 件 、 图 片 、 脚 本 等 资源 都 不 会 改变 。 但 是 ， 之 后 的 请 求 
都 将 从 最 新 的 缓存 中 获取 。 这 会 导致 “版 本 错乱 ”的 问题 ， 因 此 ， 一般 
不 推荐 使 用 ， 除 非 应 用 程序 设计 得 很 好 ， 确 保 这 样 的 方式 没有 问题 。 


想象 下 ， 比 方 说 ， 有 这 么 个 应 用 程序 ， 它 什么 也 不 做 ， 就 只 是 在 浏览 
器 检查 清单 文件 的 整个 过 程 中 ， 显 示 过 渡 画 面 中 。 触 发 "noupdate" 事 
件 时 ， 它 继续 “前 进 ” 并 载 入 应 用 程序 的 首页 。 触 发 "downloading" 事 
件 ， 并 且 更 新 缓存 后 ， 它 显示 合适 的 反馈 给 用 户 。 解 

发 "updateready" 事 件 时 ， 它 调用 swapCache(0) 方 法 ， 然 后 从 最 新 的 缓存 
中 载 入 更 独 过 的 首页 。 


要 注意 的 是 ， 只 有 当 状 态 属性 是 ApplicationCache.UPDATEREADY 或 
者 ApplicationCache.OBSOLETE 时 ， 调 用 swapCache(0) 方 法 才 有 意义 

( 当 状 态 是 OBSOLETE 时 ， 调 用 swapCache() 方 法 可 以 立即 弃 用 废弃 的 
缓存 ， 让 之 后 所 有 的 请 求 都 通过 网 络 获 取 ) 。 如 果 在 状态 属性 是 其 他 
数值 的 时 候 调 用 swapCache0) 方 法 ， 它 就 会 抛 出 异常 。 


20.4.3 ”离线 Web 应 用 


离线 Web 应 用 指 的 是 将 目 己 “安装 ”在 应 用 程序 缓存 中 的 程序 ， 使 得 哪 
怕 在 浏 贤 絮 处 于 离线 状态 时 候 依然 可 访问 它 。 举 个 最 简单 的 例子 一 一 
类 似 时 钟 和 万 花 简 生成 右 这 样 的 应 用 一 一 Web 应 用 要 离线 可 用 需要 做 
的 事情 。 但 是 ， 大 多 数 重要 的 Web 应 用 也 需要 回 服 务 妖 上 传 数据 : 哪 
怕 是 简单 的 游戏 应 用 都 有 可 能 需要 把 用 户 的 最 高 得 分 上 传 到 服务 器 
上 。 这 类 应 用 也 可 以 成 为 离线 应 用 。 它 们 可 以 使 用 localStorage 来 存储 
应 用 数据 ， 然 后 当 在 线 的 时 候 再 将 数据 上 传 到 服务 器 。 在 本 地 存储 和 
服务 器 端 同 步 数据 是 将 Web 应 用 转变 为 离线 应 用 最 巧妙 的 环节 ， 特 别 
是 当 用 户 需 要 从 多 台 设 备 获 取 数 据 的 时 候 。 


为 了 在 离线 状态 可 用 ，Web 应 用 需要 可 以 告知 别人 上 自己 是 离线 还 是 在 
线 ， 同 时 当 网 络 连接 的 状态 发 生 改 变 时 候 也 能 < 感知 ”到 。 通 过 
navigator.onLine 属 性 ， 可 以 检测 浏览 器 是 否 在 线 ， 同 时 ， 在 Window 对 
象 上 注册 在 线 和 离线 事件 的 处 理 程序 ， 可 以 检测 网 络 连 接 状 态 的 改 


福 


本 章 将 以 一 个 简单 的 离线 we b 应 用 结束 ， 该 应 用 使 用 了 这 些 技 术 。 该 
应 用 名 叫 "PermaNote" 一 个 简单 的 记事 本 程序 ， 它 将 用 户 的 文本 保 
存 到 locaStorage 中 ， 并 且 在 网 络 连 接 可 用 的 时 候 避 -， 将 其 上 传 到 服务 
厂 。PermaNote 只 人 允许 用 户 编辑 单个 笔记 ， 而 且 不 考虑 任何 授权 和 刁 份 
验证 的 问题 它 假 设 服务 端 有 区 分 用 户 的 方式 ， 但 是 不 包括 任何 登 
永 界面 。PermaNote 应 用 包含 三 个 文件 。 例 20-5 是 一 个 缓存 清单 文件 ， 


它 列 出 了 另外 两 个 文件 ， 同 时 指定 不 需要 缓存 "note" 这 个 URL: 我 们 
使 用 此 URL 来 实现 在 服务 端 读 写 笔记 数据 。 


例 20-5: permanote.appcache 


CACHE MANIFEST 
#PermaNote v8 
permanote.html 
permanote.js 
NETWORK : 


note 


例 20-6 是 PermaNote 应 用 的 第 二 个 文件 ， 它 是 一 个 HTML 文件 ， 定 义 了 
一 个 简单 的 编辑 器 的 UI: 1 元 素 ， 上 面 是 一 排 的 
按钮 ， 下 面 是 消息 的 一 个 状态 栏 。 要 注意 的 是 ，<html> 标签 设置 了 
manifest 属 性 。 


例 20-6: permanote.html 


<!1DOCTYPE HTML> 

<htm] manifest="permanote.appcache"> 
<head> 

<title>PermaNote Editor</title> 
<script src="permanote.js"></script> 


<style> 


#editor{width:100%;height:250px;} 
#statusline{width:100%;} 

</style> 

</head> 

<body> 

<div id="toolbar"> 

<button id="savebutton"onclick="save()">Save</button> 
<button onclick="sync()">Sync Note</button> 

<button onclick="applicationCache.update()">Update Application</button> 
</div> 

<textarea id="editor"></textarea> 

<div id="statusline"></div> 

</body> 


</html> 


最 后 ， 例 20-7 展 示 的 是 使 PermaNode Web 应 用 正常 工作 的 JavaScript 代 
码 。 它 定义 了 一 个 status0 玉 数 在 状态 栏 上 展示 消 轧 ， 一 个 save() 函 数 来 
当前 版 本 的 笔记 保存 到 服务 左上， 以 及 一 个 sync() 方 法 来 确保 本 地 副本 
和 服务 避 端 的 副本 的 同步 。 其 中 ，save0 和 syncO 两 个 函数 使 用 了 第 18 
章 介 绍 的 脚本 化 的 HTTP 技术 。 (有 趣 的 是 ，save() 函 数 使 用 了 HTTP 
的 "PUT" 方 法 而 不 是 常见 的 "POST" 方 法 。) 


除了 这 三 个 基本 的 函数 外 ， 例 20-7 还 定义 了 一 些 事 件 处 理 程序 。 为 了 
人 应 用 程序 需要 一 些 事件 处 理 程 
部 : 


onload 


芝 试 和 服务 器 同步 ， 一 旦 有 新 版 本 的 笔记 并 且 完 成 同步 后 ， 殉 局 用 编 
辑 咒 窗口 。 


saven() 和 sync() 芳 数 发 出 HTTP 请 求 ， 并 在 XMLHttpRequest 对 象 上 注册 
一 个 onload 事 件 处 理 程 序 来 获取 上 传 或 者 下 载 完 成 的 提醒 。 


onbeforeunload 
在 未 上 传 前 ， 把 当前 版 本 的 笔记 数据 保存 到 服务 右上 。 
oninput 


当 <textarea> 元 素 内 容 发 生变 化 时 ， 都 将 其 内 容 保存 到 localStorage 
中 ， 并 局 动 一 个 计时 器 。 当 用 户 停止 编辑 超过 5 秒 ， 残 目 动 把 笔记 数据 
保存 到 服务 右上。 


onoffline 
当 浏 览 器 进入 离线 状态 时 ， 在 状态 栏 中 显示 离线 消息 。 
ononline 


当 浏览 需 回 到 在 线 状态 时 ， 同 步 服务 右 ， 检 查 是 否 有 新 版 本 的 数据 ， 
并 且 保 存 当 前 版 本 的 数据 。 


onupdateready 


2 (已 缓存 ) 准备 就 绪 了 ， 就 在 状态 条 中 展示 消息 来 
省 州 用 js 


onnoupdate 


J 程序 缓存 没有 发 生变 化 ， 则 通知 用 户 他 /她 仍 在 运行 当前 版 


例 20-7 展 示 了 PermaNote 应 用 的 事件 驱动 逻辑 的 概 抠 : 


例 20-7: permanote.js 


// 一 些 


汕 
法 
这 
NS 
/7 

IT 
让 
内 
Lal 


var editor,statusline, savebutton, idletimer;//e 


次 载 入 应 


window.onload=function( ){// 第 一 次 载 和 时， 初始 化 本 地 存储 


if(localSstorage.note==null)localStorage.note="",，; 


if(localStorage.lastModified==null)localStorage.1lastModified=0; 


if(localstorage.lastSaved==null)localsStorage.lastSaved=0;// 查 找 编辑 器 UI 元 素 ， 


editor=document.getElementById("editor"); 


statusline=document .getElementById("statusline"),; 


savebutton=document .getElementById("savebutton"); 


editor .value=localStorage.note;// 初 始 化 编辑 器 ， 将 保存 的 笔记 数 盾 


editor .disabled=true;// 同 步 前 禁止 编辑 


// 一 旦 文本 


区 


有 内 容 输入 


editor.addEventListener("input", 


function(e){// 将 新 的 值 保存 到 locaStorage 中 


localStorage.note=editor .value,; 


闲 


localStorage.lastModified=Date.now( ) ;// 本 


if(idletimer)clearTimeout(idletimer); 


I 


idletimer=setTimeout(save,5000) ;// 启 用 保存 按钮 


计时 器 


四 填充 为 


并 


N 
人 


初始 化 


区 


| 


2 


savebutton.disabled=false; 


}, 


false);// 每 次 载 入 应 用 程序 时 ， 党 试 同步 服务 器 


sync(); 


}; // 离 开 页 面前 保存 数据 到 服务 器 


window.onbeforeunload=function(){ 


if(localStorage.lastModified>1localSstorage.1lastSaved) 


Save( ); 


};// 离 线 时 ， 通 知 用 户 


TS 


window.onoffline=function(){status("0ffline");}// 再 次 返 世 


a 


window,ononline=function( ){sync();};// 当 有 新 版 本 应 用 的 时 候 ， 提 醒 用 户 


// 这 里 我 们 也 可 以 采用 location .reload( ) 方 法 来 强制 重新 载 入 应 


window.applicationCache.onupdateready=function(){ 


企 线 状态 时 ， 进 行 同 步 


status("A new version of this application is available.Reload to run it"); 


} ;// 当 没有 新 版 本 的 时 候 也 通知 用 户 


window.applicationCache.onnoupdate=function(){ 


status("You are running the latest version of the application."); 


};// 用 于 在 状态 栏 中 显示 状态 消息 的 一 个 函数 


function status(msg){statusline.innerHTML=msg;}// 每 当 笔记 内 容 更 新 后 ， 如 
分 钟 ， 


// 就 会 自动 将 笔记 文本 上 传 到 服务 器 (在 线 状态 下 ) 


户 停止 编 


function save(){ 


if(idletimer)clearTimeout(idletimer); 


idletimer=null; 


if(navigator.onLine)t{ 


var xhr=new XMLHttpRequest(); 


xhr.open("PUT","/note"); 


xhr.send(editor .value); 


xhr.onload=function(){ 


localStorage.1lastSaved=Date .now!( ); 


savebutton.disabled=true; 


}; 


// 检 查 服务 端 是否 有 新 版 本 的 笔记 ， 


// 如 果 没 有 ， 则 将 当前 版 本 保存 到 服务 器 端 


function sync(){ 


if(navigator.onLine)t{ 


Var xhr=new XMLHttpRequest(); 


xhr.open("GET","/note"); 


xhr.send(); 


xhr.onload=function(){ 


var remoteModTime=0; 


if(xhr.status==200){ 


var remoteModTime=xhr .getResponseHeader("Last-Modified"); 


remoteModTime=new Date(remoteModTime).getTime(); 


if(remoteModTime>1localStorage.1lastModified){ 


status("Newer note found on server."); 


var useit= 


confirm("There is a newer version of the note\n"+ 


"on the server .ClLick Ok to use that version\n"+ 


"or click Cancel to continue editing this\n"+ 


"version and overwrite the server"); 


var now=Date .now( ); 


if(useit){ 


editor.value=localStorage.note=xhr.responseText,; 


localStorage.1lastSaved=now; 


status("Newest version downloaded."); 


else 


status("Ignoring newer version of the note."); 


localStorage.1lastModified=now; 


else 


status("You are editing the current version of the note."); 


if(localStorage.lastModified>1localStorage.lastSaved)t{ 


Save( ) ， 


editor,disabled=false;// 再 次 启用 编辑 器 


editor .focus();// 将 光标 定位 到 编辑 器 中 


else{// 离 线 状态 下 ， 不 能 同步 
status("Can't Sync while offline"); 
editor.disabled=false; 


editor.focus(); 


[1]. 类 似 DOM 事 件 机 制 。 


[21. 完 全 兼容 。 


[3]_ 第 三 方 cookie 指 的 是 来 目 于 当前 访问 站 点 以 为 的 站 点 设置 的 


cookie ° 
[4]. 类 似 于 HTTP 头 
5]. 过 小 画面 类 似 loading 图 。 
该 示例 受到 Halfnote 和 Aaron Boodman 的 启发 。Halfnote 


[6] 宽泛 地 讲 ， 
是 其 中 一 个 离线 Web 应 用 。 


第 21 章 ”多 退 体 和 网 形 编程 


本 章 将 介绍 如 何 使 用 JavaScript 来 操作 图 片 、 控 制 音频 和 视频 流 以 及 画 
图 。21.1 广 会 介绍 如 何 用 传统 的 JavaScript 技 术 实现 诸如 图 片 翻转 ( 周 
标 指针 移动 到 一 张 静 态 图 片上 切换 成 另外 一 张 图 片 ) 这 样 的 视觉 效 
果 。 紧 接着 ，21.2 节 会 介绍 HIML5 的 <audio> 和 <video> 元 素 以 及 它 
们 的 JavaScript API。 


在 前 两 也 对 图 片 、 音 频 和 视频 的 介绍 之 后 ， 接 下 来 会 介绍 两 项 非常 强 
大 的 用 于 客户 剖 绘 图 的 技术 。 能 够 在 济 哎 紫 中 动态 生成 复杂 图 形 是 非 
常 重要 的 ， 因 为 : 


:用 于 在 客户 端 生成 图 形 的 代码 大 小 要 比 图 片 本 里 小 很 多 ， 这 样 可 以 减 


少 部 分 市 宽 。 


通过 一 些 实时 数据 来 动态 生成 图 形 ， 需 要 消耗 大 量 的 CPU 周期 。 而 如 
琳 把 这 个 任务 放 到 客户 端 做 ， 束 可 以 有 效 地 减轻 服务 紫 的 负担 ， 某 种 
程度 上 也 是 节约 了 硬件 开销 。 


-在 客户 端 生成 图 形 也 是 符合 现代 Web 应 用 的 架构 : 服务 器 提供 数据 ， 
然后 客户 端 负 责 展现 这 些 数 据 。 


21.3 “ 节 会 介绍 可 伸缩 的 矢量 图 形 (Scalable Vector Graphics，SVG) 。 
SVG 是 一 种 基于 XML 的 并 且 用 于 描述 图 形 的 语言 ，SVG 图 形 可 以 通过 
JavaScript 和 DOM 来 创建 和 操控 。 最 后 ，21.4 节 会 介绍 HTML5 的 < 
canvas > 元素 及 其 用 于 客户 端 画 图 的 、 功 能 齐全 的 JavaScript API。< 
canvas 元素 是 一 项 革命 性 的 技术 ， 本 章 会 对 它 做 详细 的 介绍 。 


21.1 脚本 化 图 片 


Web 页面 使 用 HTML 的 <img > 元 素来 嵌入 图 片 。 和 所 有 HTML 元素 一 
样 ，<img> 元 素 也 是 可 以 通过 脚本 来 操控 的 : 设置 元 素 的 s rc 属性 ， 
将 其 指 疝 一 个 新 的 URL 会 导致 浏览 器 载 入 (如 果 需 要 的 话 ) 并 展示 一 
张 新 的 图 片 。 (还 可 以 通过 脚本 来 控制 图 片 的 宽度 和 高 度 ， 这 会 使 得 
浏览 器 缩小 和 放大 图 片 ， 但 是 这 种 技术 这 里 不 会 做 介绍 。) 


在 HTML 文 档 中 动态 礁 换 图 片 ， 这 样 一 种 能 力 ， 使 得 许多 特效 成 为 可 
能 。 其 中 最 常用 的 特效 就 是 图 片 翻转 ， 图 片 会 随 着 鼠标 指针 划 过 进行 
蕉 换 。 如 果 图 片 本 映 包 含 超 链 授 ， 并 且 可 单 击 ， 那 么 图 片 翻 加 这 种 特 
效 是 一 种 引导 用 户 单 击 图 片 非常 有 效 的 方式 。 (实现 同样 的 效果 也 可 
以 不 使 用 脚本 ， 而 是 使 用 CSS 中 的 :hover 伪 类 ， 赫 换 元 素 的 背景 图 片 来 
实现 。) 如 下 的 HTML 代 码 段 是 一 个 非常 简单 的 例子 : 它 创建 一 张 图 
片 ， 并 在 鼠标 指针 经 过 的 时 候 改 变 该 图 乒 : 


<img src="images/help.gif" 


onmouseover="this.src='images/help_rollover .gif'" 


onmouseout="this.src='images/help.gif'"> 


当 鼠 标 指针 经 过 或 者 离开 <img> 元 素 时 候 ， 事 件 处 理 程序 会 重新 设置 
其 src 必 性。 图 片 翻转 和 鼠标 单 击 紧 密 联 系 在 一 起 ， 因 此 <img> 元 素 应 
当 包 含 在 一 个 <a> 元 素 中 或 者 指定 一 个 onclick 事 件 处 理 程序 。 


为 了 有 用 起 见 ， 像 图 片 翻转 这 样 的 效果 需要 较 高 啊 应 度 。 这 也 意味 着 
需要 想 办 法 来 确保 一 些 必要 的 图 片 要 预 提取 ， 让 浏览 器 缓存 起 来 。 客 
户 端 JavaScript 定 义 了 一 个 专用 的 API 来 达到 这 一 目的 : 为 了 强制 让 图 片 
缓存 起 来 ， 首 先 利 用 Image0 构 造 函 数 来 创建 一 个 屏幕 外 图 片 对 象 ， 之 
后 ， 将 该 对 象 的 src 属 性 设置 成 期 望 的 URL。 由 于 图 片 元 素 并 没有 添加 
到 文档 中 ， 因 此 ， 它 是 不 可 见 的 ， 但 是 浏览 器 还 是 会 加 载 图 片 并 将 其 
缓存 起 来 。 这 样 一 来 ， 之 后 当 设 置 成 同样 的 URL 来 显示 该 屏幕 内 图 片 
0 
载 。 


前 面 展 示 的 图 片 翻转 的 代码 片段 并 没有 预 提取 它 使 用 的 翻转 图 片 ， 这 


样 ， 当 用 户 第 一 次 将 鼠标 指针 移 到 图 片上 的 时 候 会 明显 感到 翻转 效 采 
有 延 时 。 要 解决 这 个 问题 ， 将 代码 修改 成 如 下 形式 .: 


<script>(new Image()).src="images/help_rollover.gif";</script> 


<img src="images/help.gif" 


onmouseover="this.src='images/help_rollover .gif'" 


onmouseout="this.src='images/help.gif'"> 


优雅 的 图 片 翻转 实现 方式 


刚刚 展示 的 代码 需要 一 个 <script> 元 素 和 两 个 JavaScript 事 件 处 理 程序 
的 属性 来 实现 一 个 人 简单 的 图 厂 翻 转 效 果 。 这 个 例子 的 代码 非常 不 优 
雅 : 大 量 的 JavaScript 和 HTML 人 代码 混在 一 起 。 例 21-1 展 示 了 一 种 更 为 优 
雅 的 实现 方式 ， 这 种 方式 允许 在 任意 的 <imng> 元 素 上 ， 只 要 人 简单 地 指 
定 了 data-rollover 属 性 《参见 15.4.3 节 ) ， 就 会 创建 一 个 图 片 翻转 效果 。 
要 注意 的 是 ， 该 例 使 用 了 例 13-5 中 介绍 的 onLoad0 函 数 。 同 时 它 还 用 到 
了 document.images[] 数 组 (参见 15.2.3 方 ) 从 文档 中 查找 所 有 的 <img > 
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例 21-1: 优雅 的 图 片 翻转 实现 方式 


/** 


*rollover .js :优雅 的 图 片 翻转 实现 方式 


| 
0 


* 要 创建 图 片 翻转 效果 ， 将 此 模块 引入 到 HTML 文 件 


* 然 后 在 任意 <img> 元 素 上 使 用 data-rollover 属 性 来 指定 翻转 图 片 的 URL 即 可 


* 如 下 所 示 : 


*<img src="normal image.png"data-rollover="rollover_image.png"> 


* 要 注意 的 是 ， 此 模块 依赖 于 onLoad .js 


$7 


onLoad(function( ){// 所 有 处 


E 罗 辑 都 在 一 个 匿名 函数 中 :不 定义 任何 符号 
// 遍 历 所 有 的 图 片 ， 查 找 data-rollover 属 性 
for(var i=0;i<document.images.length;i++){ 
var img=document.images[i]; 
Var rollover=img.getAttribute("data-rollover"); 
if(!rollover )continue;// 跳 过 没有 data-rollover 属 性 的 图 片 
// 确 保 将 翻转 的 图 片 缓存 起 来 
(new Image()).src=rollover;// 定 义 一 个 属性 来 标识 默认 的 图 片 URL 
img.setAttribute("data-rollout", img.src);// 注 册 事 件 处 理 画 数 来 创建 翻转 效果 
img.onmouseover=function( ){ 


this.src=this.getAttribute("data-rollover"); 
}; 


img.onmouseout=function( ){ 


this.src=this.getAttribute("data-rollout"); 
}; 


}); 


21.2 脚本 化 首 频 和 视频 


从 理论 上 说 ，HTML53| 入 的 <audio> 和 <video> 元素 ， 使 用 起 来 和 < 
img > 元 素 一 样 简 单 。 对 于 支持 HTML5 的 浏览 器 ， 不 再 需要 使 用 插件 
( 像 Flash) 来 在 HTML 文档 中 藤 入 音频 和 视频 : 


<audio src="background_music.mp3"/> 


<video src="news.mov"width=320 height=240/> 


实际 上 ， 使 用 这 些 元 素 的 时 候 要 更 加 巧妙 。 由 于 各 家 济 贤 右 制 造 丙 末 
能 在 对 标准 首 频 和 视频 编 解码 如 支持 上 达成 一 八 ， 因 此 ， 通 党 都 需 
使 用 <source>> 元 系 来 为 指定 不 同 格式 的 巡 体 源 : 


<audio id="music"> 
<source src="music.mp3"type="audio/mpeg"> 
<source src="music.ogg"type='audio/ogg;codec="vorbis"'> 


</audio> 


要 注意 的 是 ，<source > 元 素 没有 任何 内 容 : 没有 闭合 的 </source> 标 
签 ， 也 不 需要 使 用 y > ”来 结束 它们 。 

文 持 <audio> 和 <video> 元 素 的 浏 砚 右 不 会 泻 染 这 些 元 素 的 内 容 。 而 
不 支持 它们 的 浏览 絮 则 会 将 它们 的 内 容 都 泻 染 出 来 ， 因 此 ， 可 以 在 这 
= 中 放置 后 备 内 容 〈 比 如， 一 个 用 于 调用 Flash 揪 件 的 <object> 元 


<video id="news"width=640 height=480 controls preload> 
<!--Firefox 和 Chrome 支 持 的 WebM 格 式 - - > 


<source src="news.webm"type='video/webm;codecs="vp8,vorbis"'> 


<1--IE 和 Safari 支 持 的 H.264 格 式 - -> 


<source src="news.mp4"type='video/mp4;codecs="avc1.42E01E,mp4a.40.2"'> 


< 1--Flash 插 件 作 为 后 备 方案 - - > 


<object width=640 height=480 type="application/x-shockwave-flash" 


data="flash_movie_player.swf"> 


<!-- 这 里 的 参数 元 素 用 于 配置 Flash 视 频 播 放 器 - - > 


<1!- -文本 是 最 终 的 后 备 内 容 - - > 


< div>video element not supported and Flash plugin not installed.</div> 
</object> 


</video> 


<audio> 和 <<video > 元素 支持 一 个 controls 属 性 。 如 果 设 置 了 该 属性 
(或 者 对 应 的 JavaScript 属 性 设置 为 true) ， 它 们 将 会 显示 一 系列 播放 控 
件 ， 包 括 播 放 、 和 暂停 按钮 、 音 量 控制 等 。 除 此 之 外 ，<audio> 和 < 
video > 元素 还 提供 了 API 能 让 脚本 控制 媒体 ， 使 用 该 API 可 以 实现 在 
Web 应 用 中 添加 简单 的 声音 效果 或 者 创建 自 定义 音频 和 视频 控制 面板 。 
尽管 ， 音 频 和 视频 控制 面板 在 外 观 上 有 很 大 差别 ， 但 是 两 个 元 素 基 本 
共享 相同 的 API 〈 唯 一 不 同 的 是 ，<video > 元 素 还 有 width 和 height 属 
性 ) ， 本 节 后 面 要 介绍 的 很 多 内 容 对 两 个 元 素 几乎 都 有 效 。 


Audio0 构 造 范 数 


在 不 设置 controls 属 性 的 情况 下 ，<audio > 元 素 没有 任何 视觉 外 观 。 正 
如 可 以 使 用 Image0 构 造 函 数 来 创建 一 张 屏 幕 外 图 片 那 样 ，HTML5 中 的 
巡 体 API 同 样 也 允许 使 用 Audio0 构 造 画 数 ， 并 将 媒体 源 URL 作 态 参 数 ， 
来 创建 一 个 屏幕 外 首 频 元 素 : 


new Audio("chime.wav").play();// 载 入 并 播放 声音 效果 


Audio() 构 造 画 数 的 返回 值 和 通过 从 文档 中 查询 <audio> 元素 或 者 使 用 
document.createElement("audio") 来 创建 一 个 新 的 元 素 获 得 的 都 是 同一 类 
对 象 。 这 里 要 注意 的 是 ，Audio() 是 首 频 元 素 特有 的 API， 换 句 话说 ， 视 
频 元 素 是 没有 类 似 Video0 这 样 的 构造 函数 的 。 


尽管 对 于 多 种 不 同 格式 的 文件 要 分 别 定 义 媒 体 比较 索 琐 ， 但 是 ， 能 够 
不 借助 插件 在 浏览 吉 中 原生 播放 音频 和 视频 是 HTML5 中 非 稼 强大 的 新 
特性 。 要 注意 的 是 ， 对 于 媒体 编 解码 器 的 问题 以 及 浏 唤 器 对 其 兼容 性 
的 问题 并 不 在 本 书 讨论 的 范畴 。 接 下 来 会 集中 讨论 如 何 利 用 JavaScript 
API 来 操控 音频 和 视频 流 。 


21.2.1 类 型 选择 和 加 载 


想 要 测试 一 个 媒体 元 素 能 否 播放 指定 类 型 的 媒体 文件 ， 可 以 调用 
canPlayType() 方 法 并 将 媒体 的 MIME 类 型 (有 时 需要 包含 codec 参 数 ) 传 
递 进 去 。 如 果 它 不 能 播放 该 类 型 的 媒体 文件 ， 该 方法 会 返回 一 个 空 的 
字符 串 〈 一 个 假 值 ) ; 反之 ， 它 会 返回 一 个 字符 串 : "maybe" 或 

者 "probably"。 之 所 以 返回 "probably" 这 样 不 确定 的 结果 ， 是 因为 音频 和 
视频 编 解 码 器 本 号 承 非 常 复 杂 ， 在 没有 真正 下 载 并 演 试 播放 指定 类 型 
的 媒体 前 很 难 确 定 是 否 真 的 可 以 文 持 播 放 此 类 型 文件 : 


var a=new Audio(); 

if(a.canplayType( "audio/wav") ){ 

a.src="soundeffect .wav"; 

a.play(); 

} 

当 设置 媒体 元 素 的 src 属 性 的 时 候 ， 加 载 媒 体 的 过 程 束 开始 了 (除非 将 
preload 设 置 成 rauto"， 否 则 ， 只 会 加 载 少量 内 容 ， 因 此 该 过 程 不 会 持续 


很 长 时 间 ) 。 当 设置 src 属 性 的 时 候 ， 如 果 有 其 他 的 媒体 文件 正在 加 载 
或 者 播放 ， 则 会 中 止 它们 的 加 载 或 者 播放 过 程 。 如 条 通过 在 媒体 元 素 


中 添加 < source > 元 素 而 不 是 设置 src 属 性 的 方式 指定 媒体 源 ， 媒 体 元 素 
无 法 知道 是 否 已 经 将 一 系列 <source > 元素 都 添加 完毕 了 ， 因 此 它 也 不 
人 <source > 元 和 际 指 定 的 媒体 源 文件 ， 除 非 显 式 地 调用 
load(0) 方 法 。 


21.2.2 ”控制 媒体 播放 


<audio> 和 <video> 元素 最 重要 的 方法 是 play() 和 pause() 方 法 ， 它 们 用 
来 控制 媒体 开始 和 和 暂停 媒体 的 播放 : 


// 文 档 载 入 完成 后 ， 开 始 播放 背景 音乐 


window.addEventListener("load",function(){document.getElementById("music").play(); 


},false); 


除了 开始 和 暂停 播放 首 频 和 视频 ， 还 可 以 通过 设置 currentTime 属 性 来 
进行 定点 播放 。 该 属性 指定 了 播放 器 应 该 跳 过 播放 的 时 间 (单位 为 
秒 ) ， 可 以 在 媒体 播放 或 者 暂停 的 时 候 设 置 该 属性 。 (initialTime 和 和 
0 | 定 了 currentTime 的 有 效 取 值 范 围 ; 后 面 会 对 这 些 属性 做 
详细 介绍 。 


volume 属 性 表示 播放 音量 ， 让 于 (静音 ) ~1 (最 大 音量 ) 之 间 。 将 
muted 属 性 设置 为 rue 则 会 进入 静音 模式 ， 设置 为 false 则 会 恢复 之 前 指 
定 的 音量 继续 播放 。 


playbackRate 属 性 用 于 指定 媒体 播放 的 速度 。 该 属性 值 为 1.0 表 示 正 常 速 
度 ， 大 于 1 则 表示 “ 快 进 >，0~1 之 间 的 值 则 表示 “ 慢 放 ”。 负 值 则 表示 回 
放 ， 但 是 直到 撰写 本 书 时 ， 浏 蜗 器 还 未 文 持 该 特性 。<audio> 和 < 
video 元素 还 有 一 个 defaultPlaybackRate 属 性 。 不 管 是 否 调 用 play0) 方 法 
来 播放 媒体 ，playbackRate 属 性 默认 值 都 会 被 设置 成 defaultPlaybackRate 
的 值 。 


要 注意 的 是 ，currentTime、volume、muted 以 及 playbackRate 属 性 并 不 只 
是 用 于 控制 媒体 播放 。 如 有 果 一 个 <audio> 或 者 <video> 元 素 有 controls 
属性 ， 它 就 会 在 播放 器 上 显示 控件 ， 让 用 户 控制 媒体 的 播放 。 不 仅 如 


此 ， 脚 本 也 可 以 通过 查询 诸如 muted 和 currentTime 这 样 的 属性 来 得 知 当 
前 媒体 的 播放 情况 。 


controls、loop、preload 以 及 autoplay 这 样 的 HTML 属 性 不 仪 影响 音频 和 
视频 的 播放 ， 而 且 还 可 以 作为 JavaScript 属 性 来 设置 和 查询 。controls 属 
性 指定 是 否 在 浏览 絮 中 显示 播放 控件 。 设 置 该 属性 值 为 true 表 示 显 示 控 
件 ， 反 之 表示 隐藏 控件 。loop 属 性 是 布尔 类 型 ， 它 指定 媒体 是 否 需 要 循 
环 播放 ，true 表 示 需 要 循环 播放 ，false 则 表示 播放 到 最 后 就 停止 。 
preload 属 性 指定 在 用 户 开始 播放 媒体 前 ， 是 否 或 者 多 少 媒体 内 容 需 要 
预 加 载 。 该 属性 值 为 "none" 则 表示 不 需要 预 加 载 数 据 。 为 "metadata" 则 
表示 诸如 时 长 、 比 特 率 、 帧 大 小 这 样 的 元 数据 而 不 是 媒体 内 容 需 要 加 
载 。 其 实 ， 在 不 设置 preload 属 性 的 情况 下 ， 浏 览 硕 默认 也 会 加 载 这 些 
元 数据 的 。preload 属 性 值 如 果 为 "auto" 则 表示 浏览 器 应 当 预 加 载 它 认为 
适量 的 媒体 内 容 。 最 后 ，autoplay 属 性 指定 当 已 经 缓存 足够 多 的 媒体 内 
容 时 是 否 需 要 自动 开始 播放 。 将 该 属性 设置 为 "true" 就 等 于 是 告诉 浏 贤 
器 需要 预 加 载 媒体 内 容 。 


21.2.3 查询 媒体 状态 


<audio> 和 <video> 元 素 有 一 些 只 读 属性 ， 摘 述 媒体 以 及 播放 需 当 前 
的 状态 : 如 果 播 放 器 暂停 ， 那 么 paused 属 性 的 值 就 为 "true"。 如 果 播 放 

器 正在 跳 到 一 个 新 的 播放 点 ， 那 么 seeking 属 性 的 值 就 为 "true"。 如 果 播 
放 器 播放 完 媒体 并 且 停 下 来 ， 那 么 ended 属 性 的 值 就 为 "true" 〈 如 果 设 置 
loop 属 性 值 为 tue， 那 么 anded 属 性 值 永远 不 为 "true"。 ) 


duration 属 性 指定 了 炬 体 的 时 长 ， 单 位 是 秒 。 如 琳 在 媒体 元 数据 还 未 载 
入 前 查询 该 属性 ， 它 会 返回 NaN。 对 于 像 Internet 广 播 这 样 有 无 限时 长 
的 流 媒体 而 言 ， 该 属性 会 返回 Infinity 。 


initialTime 属 性 指定 了 媒体 的 开始 时 间 ， 单 位 也 是 秒 。 对 于 固定 时 长 的 
媒体 剪辑 而 言 ， 该 属性 值 通 销 是 0。 而 对 于 流 媒 体 而 言 ， 该 属性 表示 已 
经 缓存 的 数据 的 最 早 时 间 以 及 能 够 回 退 到 的 最 早 时 间 。 当 设置 
currentTime 属 性 时 ， 其 值 不 能 小 于 initialTime 的 值 。 


其 他 三 个 属性 分 别 指定 包 含 媒体 时 间 轴 、 播 放 和 缓冲 状态 的 较 细 粒度 
视图 。played 属 性 返回 已 经 播放 的 时 间 段 。buffered 属 性 返回 当前 已 经 
缓冲 的 时 间 段 ，seekable 属 性 则 返回 当前 播放 器 需要 跳 到 的 时 间 段 。 


(可 以 使 用 这 些 属 性 来 实现 一 个 进度 条 ， 显 示 currentTime、duration 以 
及 媒体 的 播放 量 和 缓冲 量 。) 


played、buffered 和 seekable 都 是 TimeRanges 对 象 。 每 个 对 象 都 有 一 个 
length 属 性 以 及 start() 和 end() 方 法 ， 前 者 表示 当前 的 一 个 时 间 段 ， 后 者 
分 别 返 回 当前 时 间 段 的 起 始 时 间 点 和 结束 时 间 点 (单位 都 是 秒 ) 。 对 
于 一 段 常 见 的 连续 时 间 段 来 说 ， 一 般 使 用 start(0) 和 end(0)。 人 例如， 假设 
媒体 文件 从 开始 缓存 起 中 间 没 有 定点 播放 发 生 〈 跳 过 一 段 播放 ) ， 可 
以 使 用 如 下 代码 来 确定 当前 缓存 内 容 的 百分比 : 


var percent_ loaded=Math.floor(song.buffered.end(0)/song.duration*100); 


最 后 ， 还 有 另外 三 个 属性 : readyState、networkState 和 error， 它 们 包含 
<audio> 和 <video>> 元 素 更 加 瓜 层 的 一 些 状态 细 订 。 每 个 属性 都 十 净 
字 类 型 的 ， 而 且 为 每 个 有 效 值 都 定义 了 对 应 的 常量 。 不 过 要 注意 的 
是 ， 这 些 常 量 是 定义 在 媒体 对 象 (或 者 错误 对 象 ， 上 的 。 可 以 按照 如 
下 方式 来 使 用 一 个 属性 : 


if(song.readyState===song.HAVE_ ENOUGH_DATA)song.play(); 


readyState 属 性 指定 当前 已 经 加 载 7 多 少 媒 体内 容 ， 因 此 同时 也 暗示 着 
己 经 准备 好 可 以 播放 了 。 如 下 表格 展示 了 该 属性 的 取 值 以 及 对 应 


前 量 什 
HAVE_NOTHING 0 
HAVE METADATA 


HAVE CURRENT DATA = 2 


前 量 值 
HAVE FUTURE DATA -3 


HAVE ENOUGH DATA 4 


NetworkState 属 性 指 
用 网 络 : 


描述 

没有 加 载 任 何 媒体 内 容 或 者 元 数据 

媒体 元 数据 已 经 加 载 完毕 ， 但 是 媒体 内 容 还 没有 加 载 。 也 
就 是 说 ， 这 个 时 候 可 以 获取 媒体 的 时 长 或 者 视频 文件 的 维 
度 ， 以 及 可 以 通过 设置 currentTime 来 定点 播放 ， 不 过 ， 
由 于 没有 加 载 任何 媒体 内 容 ， 因 此 浏览 器 还 是 无 法 从 设置 
的 currentTime 开 始 播放 
CUTTentTime 的 媒体 内 容 已 经 加 载 完成 ， 但 是 还 没有 加 载 
完 足够 的 内 容 播放 媒体 。 对 于 视频 文件 而 言 ， 表 示 当 前 帧 
的 数据 已 经 加 载 完成 ， 但 是 下 一 帧 的 数据 还 未 加 载 。 这 种 
状态 通常 发 生 在 到 达 一 个 音频 或 者 视频 文件 的 最 后 的 时 候 


描述 
ee 放浪 ni 


所 有 媒体 内 容 都 已 经 加 载 完毕 ， 可 以 流畅 地 播放 (中间 没 
有 任何 暂停 ) 


定 媒体 元 了 素 是 否 使 用 网 络 或 者 为 什么 媒体 文件 不 使 


党 量 人 
NETWORK_ EMPTY 0 


NETWORK_IDLE ] 


NETWORK LOADIN 2 
NETWORK NO SOURCE 3 


描述 
媒体 元 素 还 没有 开始 使 用 网 络 。 比 如 ， 在 还 未 设置 媒体 元 
素 的 src 属 性 之 间 ， 就 是 这 种 状态 

媒体 元 素 当 前 没有 通过 网 络 来 加 载 内 容 。 这 种 情况 有 可 能 
证 内容 已 经 加 完毕 或 者 站 所 省 的 内 容 部 从 级 在 中 直接 
取 了 ， 叉 或 者 是 prel0ad 属 性 设置 成 了 “none”， 还 没有 
要 求 加载 或 者 播放 媒体 


媒体 元 素 当前 通过 网 络 来 加 载 媒体 内 容 
媒体 元 素 无 法 获取 霸 休 尖 


当 在 加 载 媒 体 或 者 播放 媒体 过 程 中 发 生 错 误 时 ， 浏 贤 器 就 会 设置 < 
audio 或 者 <video>> 元素 的 error 属 性 。 在 没有 错 误 发 生 的 情况 下 ， 


error 必 性 值 为 null。 反 之 ， 


error 的 属性 值 是 一 个 对 象 ， 包 含 了 描述 错误 


的 数值 code 属 性 。 同 时 ，error 对 象 也 定义 了 一 些 摘 述 可 能 的 错误 代码 的 
常量 : 


常量 
MEDIA ERR ABORTED 
MEDIA ERR NETWORK 


MEDIA ERR DECODE 


MEDIA ERR SRC NOT SUPPORTED 


值 ”描述 

| 用户 要 求 浏览 器 停止 加 载 媒 体内 容 

2 媒体 类 型 正确 ， 但 是 发 生 了 网 络 错误 导致 天 
法 加 载 

3 媒体 类 型 正确 ， 但 是 由 于 编码 错误 导致 无 法 
正常 解码 和 播放 


4 ”通过 src 属 性 指定 的 媒体 文件 浏览 器 不 支持 ， 
无 法 播放 


可 以 以 如 下 方式 使 用 error 属 性 : 


if(song.error.code==song.error .MEDIA ERR_ DECODE) 


alert("Can't play song:corrupt audio data."); 


21.2.4 媒体 相关 事件 


<audio> 和 <video> 都 是 相对 比较 复 洒 的 元 于 它们 必须 不 仅 要 对 
用 户 与 播放 控件 的 交互 作出 啊 应 ， 还 要 对 了 网络 活动 做 出 啊 应 ， 甚 至 在 
播放 的 时 候 ， 对 播放 时 间 做 出 啊 应 。 与 此 同时 ， 正 如 之 前 介绍 过 的 ， 
它们 还 有 一 些 属性 来 表示 它们 当前 的 状态 。 和 大 多 数 HTML 元 素 一 样 ， 
<audio> 和 <video> 元素 在 它们 状态 发 生 改变 的 上 时候， 都 会 触发 一 些 
相应 的 事件 。 由 于 它们 的 状态 比较 复杂 ， 因 此 触发 的 事件 种 类 也 比较 


2 


下 表 根 据 它们 触发 的 先后 顺序 ， 总 结 了 22 个 媒体 相关 事件 。 这 些 事 件 
不 能 通过 属性 来 注册 事件 ， 只 能 通过 <audio> 和 <video > 元 素 的 
addEventListener() 方 法 来 注册 处 理 程序 函数 。 


事件 类 型 
loadstart 


progress 


loadedmetadata 


loadeddata 


canplay 


canplaythrough 


suspend 


stalled 


play 


waiting 


playing 
timeupdate 


描述 

当 媒 体 元 素 开 始 请 求 媒 体 数据 内 容 的 时 候 触发 。 相 应 的 networkState 属 
性 值 为 NETWORK_LOADING 

正在 通过 网 络 加载 媒 体内 容 ， 对 应 的 networkState 属 性 值 为 NETWORK_ 
LOADING。 此 事件 一 般 每 秒 触发 2~8 次 

媒体 元 数据 已 经 加 载 完成 ， 对 应 的 媒体 时 长 和 维度 数据 也 已 经 获取 。 
此 时 ，readyState 属 性 值 第 一 次 变 为 HAVE_METADATA 

当前 播放 位 置 的 媒体 内 容 首次 加 载 完毕 ， 同 时 readyState 属 性 值 变 为 
HAVE CURRENT_DATA 

已 经 加 载 一 些 媒 体内 容 ， 可 以 开始 播放 ， 但 是 还 需要 继续 缓冲 更 多 数 
据 。 此 时 readyState 属 性 值 为 HAVE_FUTURE_DATA 

所 有 媒体 内 容 加 载 完毕 ， 可 以 流畅 播放 ， 无 须 暂 停 也 无 须 再 缓冲 更 多 
数据 。 此 时 readyState 属 性 值 为 HAVE_ENOUGH_DATA 

已 经 缓冲 大 量 数据 ， 暂 时 停止 下 载 。 此 时 networkState 属 性 值 变 为 
NETWORK_IDLE 

尝试 加 载 数 据 ， 但 是 无 法 获取 到 数据 。 此 时 ne tworkState 始 终 为 
NETWORK_LOADING 

调用 play() 方 法 或 者 设置 相应 的 autoplay 属 性 。 如 果 已 经 加 载 足 够 多 的 
数据 ， 紧 接着 还 会 触发 playing 事 件 ， 人 否则 ， 紧 接着 触发 waiting 事 件 
由 于 未 缓冲 足够 数据 导致 播放 未 能 开始 或 者 播放 停止 。 当 缓冲 足够 多 
数据 后 ， 接 着 会 触发 playing 事 件 

已 经 开始 播放 媒体 文件 

currentTime 属 性 发 生 改 变 了 。 在 一 般 播 放 过 程 中 ， 此 事件 每 秒 会 触发 
4~60 次 ， 具 体 次 数 可 能 取决 于 系统 加 载 速度 以 及 事件 处 理 程序 处 理 完 
成 时 间 


事件 类 型 
pause 


seeking 


seeked 

ended 
durationchange 
volumechange 
ratechange 


abort 


error 


emptied 


描述 

调用 了 pause() 方 法 ， 暂 停 了 播放 

通过 脚本 或 者 用 户 通 过 播放 控件 将 当前 播放 时 间 调 至 一 个 还 未 缓冲 的 
时 间 点 ， 导 致 在 内 容 没有 加 载 完 时 ， 停 止 播放 ， 此 时 ，seeking 属 性 值 
为 true 


seeking 属 性 值 又 变 回 false 

媒体 播放 完毕 ， 播 放 停止 

duration 属 性 值 发 生 改 变 

volume 或 者 muted 属 性 值 发 生 改 变 
playbackRate 或 者 defaultPlaybackRate 发 生 改 变 

通常 是 用 户 要 求 停止 加 载 媒体 内 容 。 对 应 的 error ,Code 值 为 MEDIA_ERR_ 
ABORTED 

由 于 发 生 网 络 错误 或 者 其 他 错误 阻止 媒体 内 容 的 加 载 。 此 时 ，error， 
code 值 不 会 是 MEDIA ERR_ABORTED 


发 生 了 错误 或 者 中 止 ， 导 致 networkState 属 性 值 又 变 回 NETWORK_EMPTY 


21.3 SVG: 可 伸缩 的 矢量 图 形 


SVG 是 一 种 用 于 描述 图 形 的 XML 语法。 顾名思义 ， 其 中 "vector" 一 词 表 


示 它 完全 不 同 于 光栅 图 像 格 式 ， 诸 如 GIF、JPEG 和 PNG (用 像素 值 来 


描绘 的 矩阵 ) 


° 一 个 "SVG" 图 形 是 对 画 该 图 形 时 的 必要 路 径 的 一 种 精 


准 、 分 辨 率 无 关 (因此 是 可 伸缩 的 ， 的 描述 。 一 个 简单 的 SVG 文 件 如 


不 玉林 


<1--SVG 图 形 台 声 明 命 名 空间 - - > 


<svg xmlns="http://www.w3.org/2000/svg" 


viewBox="0 0 1000 1000"> <1-- 图 形 的 坐标 系 --> 


<defs> <1!-- 设 置 后 面 要 用 到 的 一 些 定义 - - > 


<linearGradient id="fade"><1-- 将 一 种 渐变 色 命 名 为 "fade" - - > 


<stop offset="Q%"stop-color="#008"/>><1-- 深 蓝 --> 


<stop offset="100%"stop-color="#ccf"/> <1!-- 渐 变 到 浅 蓝 - - > 


</linearGradient> 


</defs> 


<!-- 画 一 个 具有 宽 的 黑色 边框 并 且 渐 变色 为 填充 色 的 矩形- - > 


<rect x="100"y="200"width="800"height="600" 
stroke="black"stroke-width="25"fill="url(#fade)"/> 


</svg> 


图 21-1 展 示 了 上 述 代 码 以 图 形 方式 渔 染 时 SVG 文 件 的 样子 。 


SVG 这 种 语法 比较 庞大 并 且 有 一 定 的 复杂 度 。 它 不 仅 可 以 用 于 简单 的 
基本 图 形 的 绘制 以 外 ， 还 支持 任意 曲线 、 文 本 以 及 动画 的 绘制 。SVG 
图 形 甚至 还 能 整合 JavaScript 脚 本 和 CSS 样 式 表 来 添加 行为 和 展示 信 

上 乱 。 本 和 将 介绍 客户 端 JavaScript 代 码 (内 骸 在 HTML 中 ， 而 不 是 SVG 
中 ) 如 何 利 用 SVG 动态 绘制 图 形 。 会 有 一 些 SVG 例子 展示 ， 但 是 只 会 
牵涉 SVG 的 基本 知识 。 要 了 解 关于 SVG 的 详细 内 容 ， 可 以 参阅 SVG 的 
标准 文档 ， 该 文档 比较 全 面 地 介绍 了 SVG。 这 份 文 档 由 W3C 负 责 维 
护 ， 地 址 在 : http:Wwww.w3.org/TR/SVG/。 要 注意 的 是 ， 文 档 包 含 了 完 
整 的 用 于 SVG 文档 的 文档 对 象 模型 。 但 是 本 万 使 用 标准 的 XML DOM 而 
非 SVG DOM 绘 制 SVG 图 形 。 


截至 搜 写 本 书 时 ， 除 了 IE 以 外 的 所 有 主流 浏览 器 都 文 持 SVG (IE9 也 将 
支持 ) 。 在 最 新 的 浏览 器 中 ， 可 以 使 用 普通 的 <img> 元 素来 展示 SVG 
图 片 。 而 相对 早期 的 浏览 器 (比如: Firefox3.6) 还 不 支持 SVG， 需 要 
使 用 <object> 元 素 : 


<object data="sample.svg"type="image/svg+xml"width="100"height="100"/> 


| Mal er 
Firelowy | 1) the:j/homesda. Jes/sample sv | 
和 vserpt are empiessample se 区 的 省 固 * vv Feedbacky 


图 21-1 一 个 简单 的 SVG 图 形 


当 使 用 <img 或 者 <object> 元素 展示 SVG 图 形 的 上 时候，SVG 就 变 成 
了 另外 一 种 图 片 格式 了 ， 这 种 方式 对 于 JavaScript 程 序 员 来 说 是 不 友好 
的 。 更 好 的 方式 是 直接 将 SVG 图 片 娩 入 到 HTML 文 档 中 ， 这 样 这 些 图 片 


束 可 以 通过 脚本 的 方式 来 控制 。 由 于 SVG 了 束 是 一 种 XML 语法 ， 因 此 可 
以 将 它 以 如 下 的 方式 供 入 到 XHTML 文档 中 : 
<?xml] version="1.0"?> 

<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:svg="http://www.w3.org/2000/svg"> 

< 1-- 声 明 HTML 作 为 默认 的 命名 空间 ， 以 "svg:" 前 级 的 为 SV6 的 命名 空间 - - > 
<body> 

This is a red square:<svg:svg width="10"height="10"> 
<svg:rect x="QO"y="0O"width="10"height="10"fill="red"/> 
</svg:svg> 

This is a blue circle:<svg:svg width="10"height="10"> 
<svg:circle cx="5"cy="5"r="5"fill="blue"/> 

</svg:svg> 

</body> 

</html> 


这 种 展示 SVG 图 形 的 技术 除了 下 以 外 的 当前 浏览 器 都 支持 。 图 21-2 展 示 
了 上 述 XHTML 文 档 经 过 Firefox 泻 染 之 后 的 图 形 。 


Ma Firerox OBE 问 
Firefoxv file://homeyd...eddedsvg.xhtml | 册 | 


所 | embeddedsvgxhtml vv Google 


Thisis a red square: This ls a blue circle:® 


图 21-2 内 散在 XHTML 文 档 中 的 SVG 图 形 
HTML5 将 XML 和 HTML 的 区 别 进一步 缩小 ， 允 许 SVG (和 MathML) 
标记 直接 在 HTML 文 件 中 使 用 ， 不 需要 命名 空间 的 声明 或 者 标签 前 级 : 
<IDOCTYPE html> 
<html> 
<body> 
This is a red square:<svg width="10"height="10"> 
<rect x="O"y="QO"width="10"height="10"fill="red"/> 
</svg> 
This is a blue circle:<svg width="10"height="10"> 
<circle cx="5"cy="5"r="5"fill="blue"/> 
</svg> 


</body> 


</html> 


截至 撰写 本 书 时 ， 只 有 最 新 的 浏览 器 才 支 持 像 如 上 代码 那样 在 HTML 中 
直接 内 髓 SVG 。 
SVG 就 是 一 种 XML 语法 ， 因 此 画 SVG 图 形 其实 就 相当 于 是 在 使 用 DOM 


创建 相应 的 XML 元 素 。 例 21-2 是 一 个 pieChart0) 函 数 ， 该 函数 用 来 创建 
SVG 元 素 ， 最 终 演 染 成 图 21-3 所 示 的 饼 状 图 。 


Fiefoxy | 门 htpylocalhos .ChartTesthtml 


UDPieChartTest html ve| | vcGoooe 曲 vcooe 曲 重 国 。 关 vFeedbackv 


图 21-3 用 JavaScript 绘 制 而 成 的 VG 饼 状 图 
例 21-2: 使 用 JavaScript 和 SVG 来 绘制 饼 状 图 


Wa 


六 | 


* 创 建 一 个 < svg > 元 素 ， 并 在 其 中 绘制 一 个 饼 状 


TT 


* 参 数 ， 


会 制 的 数字 类 型 的 数组 ， 数 组 每 一 项 都 表示 饼 状 图 的 一 个 枢 


d's 


ANS 


二 


*data: 


*width,height :SV6 图 形 的 大 小 ， 单 位 为 像素 


*CX, cyrr: 饼 状 图 的 圆心 以 及 半径 


个 模 的 颜 


[ER 


*colors :一 个 包含 HTML 颜 色 信 息 的 数组 ， 每 种 颜色 代表 饼 状 图 


D 


出 


*1abel1s :一 个 标签 数组 ， 该 信息 说 明 饼 状 图 中 每 个 枫 代 表 的 含义 


器 


的 左上 角 


*]x, 1y: 饼 状 


* 返 回 : 


* 一 个 保存 饼 状 图 的 < svg > 元 素 


* 调 用 者 必须 将 返回 的 元 素 插入 到 文档 中 


4 


function piechart(data,width,height, cx,cy,r,colors,labels,1x,l1y){// 这 个 是 表示 svg 元 素 的 
XML 命 名 空间 


Var svgns="http://www.w3.org/2000/svg"; 


// 创 建 一 个 <svg> 元 素 ， 同 时 指定 像素 大 小 和 用 户 坐 标 


| 之 


var chart=document.createElementNS(svgns,"svg:svg"); 


chart.setAttribute("width",width); 


chart.setAttribute("height",height); 


chart.setAttribute("viewBox", "9 0"+width+""+height);// 累 加 data 的 值 ， 以 便于 知道 饼 状 图 的 大 小 


Var total=0 


for(var i=0;i<data.length;i+t+)total+=data[i];// 现 在 计算 出 饼 状 图 每 个 分 片 的 大 小 ， 


度 制 计算 


var angles=[] 


度 以 弧 


for(var i=0;i<data.length;i++)angles[i]=data[i]/total*Math.PI*2;// 闹 历 饼 


器 


Startangle=0 


for(var i=0;i<data.length;it+){// 这 里 表示 横 的 结束 位 置 


var endangle=startangle+angles[i];// 计 算出 枫 和 圆 相交 的 两 个 点 


// 这 些 计算 公式 都 是 以 12 点 钟 方向 为 0 0 


// 顺 时 针 方 向 角度 递增 


Var X1=Cx+r*Math.Sin(startangle)， 


Var ylil=cy-r*Math.cos(startangle); 


Var x2=cx+r*Math.sin(endangle); 


了 
KK 
河 


var y2=cy-rx*Math.cos(endangle) ;// 这 个 标记 表示 角度 大 了 


// 此 标记 在 绘制 SV6 弧 形 组 件 的 时 候 需 要 


Var big=0; 


if(endangle-startangle>Math.PI)big=1;// 使 


< svg :path>> 元 素来 描述 横 


// 要 注意 的 是 ， 使 用 createElementNS( ) 来 创建 该 元 素 


[es 


信息 


var path=document.createElementNS(svgns, "path");// 下 面 的 字符 串 包含 路 径 的 详 引 


始 


加 
CE 


Var d="M"+Ccx+", "+Cy+// 从 


"L"+X1+" "+y1+// 画 一 条 到 (x1, y1) 的 线段 


的 每 


"A"+r+", n+r+// 了 再 


条 半径 为 r 的 弧 


"QO"+big+"1"+//3 【的 详 绰 信息 


X2+", "+y2+// 弧 到 (x2, y2 ) 结 下 


Del 


"2";// 当 前 路 径 到 (cx, cy ) 结 


7 二 


// 设 


<svg:path> 元 素 的 属 


语 
EE 


a 
SE 


path.setAttribute("d",d);// 设 


path.setAttribute("fill",colors[i]);// 设 


枢 的 颜色 


path.setAttribute("stroke", "black");// 棉 的 外 边框 为 9 


[三 
[RE 


path.setAttribute("stroke-width", "2");// 两 个 


位 宽 
chart.appendchild(path);// 将 棉 加 入 到 饼 状 图 中 
// 当 前 枢 的 结束 就 是 下 一 个 攀 的 开始 
startangle=endangle;// 现 在 绘制 一 些 相 应 的 小 方块 来 表示 图 例 


var icon=document.createElementNS(svgns, "rect"); 


icon.setAttribute("x",1x);// 定 位 小 方 革 


icon.setAttribute("y",1ly+30*1i),; 


icon.setAttribute("width",20);// 设 置 小 方块 的 大 小 


icon.setAttribute("height",20); 


icon.setAttribute("fill",colors[i]);// 填 充 小 方块 的 颜 


色 和 对 应 的 栅 的 颜 


色相 同 


icon.setAttribute("stroke", "black");// 子 外 边框 类 


色 也 相同 
icon.setAttribute("stroke-width", "2"); 


chart.appendchild(icon);// 添 加 到 饼 状 图 中 


// 在 小 方块 的 右边 添加 标签 


Var label=document.createElementNS(svgns, "text"); 


label.setAttribute("x",1x+30);// 定 位 标签 文本 


label.setAttribute("y",ly+30*i+18);// 文 本 样式 属性 还 可 以 通过 CSS 来 设置 


Es 


label.setAttribute("font-family","sans-serif"); 


label.setAttribute("font-size", "16");// 在 <svg:text>> 元 素 中 添加 一 个 DOM 文 本 节点 


label.appendchild(document.createTextNode(labels[i])); 


chart.appendchild(1label);// 将 文本 添加 到 饼 状 图 中 


} 


return chart ， 


} 


例 21-2 中 的 代码 相对 比较 易 习 。 其 中 有 个 小 的 数学 变换 将 数据 转换 成 可 
绘制 的 饼 横 角 。 但 是 ， 这 些 例子 都 是 使 用 DOM 代 码 来 创建 SVG 元 素 并 
设置 元 素 属 性 。 为 了 在 不 完全 支持 HTML5 的 浏览 器 下 也 能 正常 工作 ， 
该 例子 使 用 XML 语 法 来 处 理 SVG， 使 用 SVG 命 名 空间 以 及 
createElementNSO 这 样 的 DOM 方 法 而 不 是 createElementO 。 


上 述 例 子 中 最 难 懂 的 部 分 就 是 精确 绘制 饼 枫 的 部 分 。 每 一 个 饼 枫 都 使 
用 < svg:path> 元 素来 表示 。 该 SVG 元 妹 可 以 描述 由 直线 和 曲线 组 成 的 
任意 形状 。 有 具体 形状 的 描述 是 通过 设置 <svg:path> 元素 的 d 必 性 来 实 
现 的 。 该 属性 值 使 用 简洁 的 语法 : 通过 字母 和 数字 来 指定 坐标 、 角 度 
和 其 他 的 值 。 比 如 : 字母 M 表 示 "move to"， 同 时 指定 要 移动 到 的 坐标 
(X、Y) 。 字 母 L 则 表示 "line to"， 并 绘制 一 条 从 当前 位 置 到 其 后 指定 
坐标 的 直线 。 上 述 例 子 还 使 用 了 字母 A 来 绘制 弧 形 。 该 字母 之 后 需要 指 


定 7 个 数字 值 来 描述 要 绘制 的 弧 形 。 与 之 相关 的 详细 信息 在 这 里 不 重 
要 ， 想 要 了 解 可 以 去 参阅 它 的 标准 文档 ，http://www.w3.org/TR/SVG/。 


要 注意 的 是 ，pieChart0 返 回 一 个 包含 饼 状 图 描述 信息 的 <svg > 元素， 
但 是 ， 它 并 没有 将 该 元 素 插 入 到 文档 中 。 因 此 ， 调 用 者 需要 手动 将 其 
插入 到 文档 中 。 使 用 如 下 代码 可 以 创建 出 如 图 21-3 所 示 的 饼 状 图 : 


<html> 

<head> 

<script src="PieChart.js"></script> 

</head> 

<body onload="document body,appendChild( 

piechart([12,23,34,45],640,400,200,200,150, 

['red', 'blue', 'yellow', 'green'], 

['North','South', 'East', 'West'],400,100)); 

Lp 

</body> 

</html> 

例 21-3 是 为 外 一 个 用 脚本 绘制 SVG 图 形 的 例子 ， 它 使 用 SVG 来 绘制 一 个 
模拟 时 钟 (参见 图 21-4) 。 该 例 以 一 张 内 嵌 在 HTML 页 面 中 的 静态 SVG 
时 种 图片 开始 ， 而 不 是 从 零 开始 动 态 构造 一 哥 SVG 元 素 树 来 实现 一 个 
动态 的 时 钟 。 那 张 静 态 的 时 钟 图 片 包 含 两 个 SVG <line > 元 素来 分 别 表 
示 时 针 和 分 针 。 两 条 线 都 竖 直 显示 ， 表 示 时 间 12:00。 随 后 ， 通 过 


JavaScript 设 置 每 个 <line> 元 素 的 transform 属 性 ， 让 它们 旋转 一 定 的 角 
度 以 显示 正确 的 时 间 ， 以 此 来 实现 一 个 动态 时 钟 。 


图 21-4 一 个 SVG 时 钟 


要 注意 的 是 ， 例 21-3 直 接 将 SVG 标记 内 磐 到 HTML5 文 件 中 ， 而 没有 在 
XHTML 文件 中 使 用 XML 命名 空间 。 这 就 意味 着 ， 它 只 有 在 支持 直接 内 
巾 SVG 的 浏览 器 中 才能 正常 工作 。 然 而 ， 通 过 将 HTML 文 件 转换 成 
XHTML ， 同 样 的 技术 也 能 够 在 早期 支持 SVG 的 浏览 器 中 生效 。 


例 21-3: 通过 控制 SVG 图 片 来 显示 时 间 


<!DOCTYPE HTML> 


<html> 


<head> 


<title>Analog Clock</title> 


<script> 


function updateTime( ){// 更 新 SVG 时 钟 来 显示 当前 时 间 


心 | 


var now=new Date();// 当 前 时 间 


var min=now.getMinutes();// 分 钟 


var hour=(now.getHours()%12)+min/60;// 转 换 成 可 以 在 时 钟 上 表示 的 时 间 


var minangle=min*6;// 每 6 0 表示 一 分 钟 


var hourangle=hour*30;// 每 30 © 表示 一 个 小 时 


// 获 取 表 示 时 钟 时 针 和 分 针 的 SVG 元 素 


var minhand=document .getElementById("minutehand"); 


var hourhand=document ,getELementById("hourhand" ) ;// 设 置 这 些 元 素 的 SVG 属性 ， 将 它们 移动 到 钟 面 上 


此 


minhand.setAttribute("transform","rotate("+minangle+",50,50)"); 


hourhand.setAttribute("transform", "rotate("+hourangle+",50,50)");// 每 一 分 钟 更 新 下 时 钟 显 示 
时 间 


setTimeout(updateTime, 60000 ) ; 


</script> 


<style>/* 下 面 定义 的 所 有 CSS 样 式 都 会 作用 在 SVG 元 素 上 */ 


#clock{/* 用 于 时 钟 的 全 局 样式 */ 


stroke:black;/* 黑 线 */ 


滞 


stroke-linecap:round;/*| 男 角 */ 


fil1l1:#eef;/* 以 浅 蓝 灰色 为 背景 */ 


#face{stroke-width:3px;}/* 时 钟 的 外 边框 */ 


区 


#ticks{stroke-width:2;}/* 标 记 每 个 小 时 的 线段 */ 


\ 


#hourhand{stroke-width:5px;}/* 相 对 较 粗 的 时 针 */ 


#minutehand{stroke-width:3px;}/* 相 对 较 细 的 分 针 */ 


#numbers{/* 如 何 绘制 数字 */ 


font-family:sans-serif;font-size:7pt;font-weight:bold; 


text-anchor:middle;stroke:none;fill:black; 


</style> 


</head> 


<body onload="updateTime()"> 


<1--viewBox 是 坐标 系 ，width 和 height 是 指 屏幕 大 小 - - > 


<svg 1d="clock"viewBox='"0 © 100 100"width="500"height="500"> 


<defs><!-- 定 义 下 拉 阴 影 的 滤 镜 - - > 


<filter id="shadow"x="-50%"y="-50%"width="200%"height="200%"> 


<feGaussianBlur in="SourceAlpha"stdDeviation="1"result="blur"/> 


<feoffset in="blur"dx="1"dy="1"result="shadow"/> 


<feMerge> 


<feMergeNode in="SourceGraphic"/><feMergeNode in="shadow"/> 


</feMerge> 


</filter> 


</defs> 


<circle id="face"cx="50"cy="50"r="45"/><1-- 钟 面 --> 


<g id="ticks"> <1--12 小 时 的 刻度 - - > 


<line x1="'50'y1='5.000'x2='50.00'y2='10.00'/> 


<line x1="'72.50'y1="'11.03'x2="'70.00'y2='15.36'/> 


<line x1="'88.97'y1='27.50'x2='84.64'y2='30.00'/> 


<line x1="'95.00'y1='50.00'x2='90.00'y2='50.00'/> 


<line x1="'88.97'y1="'72.50'x2='84.64'y2='70.00'/> 


<line x1="'72.50'y1='88.97'x2='70.00'y2='84.64'/> 


<line x1="'50.00'y1="'95.00'x2='50.00'y2='90.00'/> 


<line x1="'27.50'y1='88.97'x2='30.00'y2='84.64'/> 


<line x1="'11.03'y1="'72.50'x2='15.36'y2='70.00'/> 


<line x1="'5.000'y1='50.00'x2='10.00'y2='50.00'/> 


<line x1="'11.03'y1="'27.50'x2='15.36'y2='30.00'/> 


<line x1="'27.50'y1="'11.03'x2='30.00'y2='15.36'/> 


</g> 


<g id="numbers"> <1-- 标 记 重要 的 几 个 刻度 值 - - > 


<text x="50"y="18">12</text><text x="85"y="53">3</text> 


<text x="50"y="88">6</text><text x="15"y="53">9</text> 


</g> 


<1- -初始 绘制 成 坚 直 的 指针 ， 之 后 通过 JavaScript 代 码 来 做 旋转 - - > 


<g id="hands"filter="url(#shadow)"> <1!-- 给 指针 添加 阴影 --> 
<line id="hourhand"x1="50"y1="50"x2="50"y2="24"/> 
<line id="minutehand"x1="50"y1="50"x2="50"y2="20"/> 
</g> 

</svg> 

</body> 


</html> 


21.4 ”<canvas> 中 的 图 形 


<canvas> 元素 自身 是 没有 任何 外 观 的 ， 但 是 它 在 文档 中 创建 了 一 个 画 
板 ， 同 时 还 提供 了 很 多 强大 的 绘制 客户 端 JavaScript 的 API。 尺 管 canvas 
元 素 在 HTML5 中 才 标 准 化 ， 但 实际 上 它 很 早 束 存在 了 。<canvas> 元 
素 最 早 是 Apple 在 Safari 1.3 中 引入 的 ，Firefox 1.5 之 后 以 及 Opera 9 之 后 
的 浏览 器 都 已 经 文 持 它 了 。Chrome 的 所 有 版 本 也 都 支持 它 。 不 过 IE9 之 
前 的 浏览 絮 不 文 持 <canvas> 元 素 ， 但 是 可 以 使 用 开源 的 

ExplorerCanvas 项 目 (http://code.google.com/p/explorercanvas/) 在 IE6~ 
8 中 模拟 < canvas 之 元 素 。 


<canvas> 元 素 和 SVG 之 间 一 个 重要 的 区 别 是 : 使 用 canvas 来 绘制 图 形 
是 通过 调用 它 提供 的 方法 而 使 用 SVG 绘制 图 形 是 通过 构建 一 棵 XML 元 
素 树 来 实现 的 。 这 两 种 方式 都 很 强大 :两 者 之 间 都 可 以 互相 模拟 。 但 
是 ， 从 表面 上 看 ， 这 两 者 还 是 不 同 的 ， 并 且 各 有 优 和 劣 。 比 如 : 使 用 
SVG 来 绘制 图 形 ， 可 以 很 倍 单 地 通过 移 除 相应 的 元 素来 编辑 图 片 。 而 
使 用 < canvas > 来 绘制 ， 要 移 除 图 乒 中 的 元 素 束 不 得 不 把 当前 的 探 除 再 
绘制 一 裔 。Canvas 的 绘制 API 是 基于 JavaScript 的 ， 并 有 旦 相对 比较 简 
吉 (不 像 SVG 语 法 那么 复杂 ) ， 因 此 本 书 对 这 些 API 都 会 做 说 明 。 参 见 
0 中 天 于 Canvas 、 CanvasRenderingContext2D 和 其 他 相关 项 的 章 章 


大 部 分 的 画布 绘制 API 都 不 是 在 < canvas> 元 素 自 号 上 定义 的 ， 而 是 定 
义 在 一 个 “绘制 上 上下文? 对象 上 ， 获 取 该 对 象 可 以 通过 调用 画布 的 
getContext() 方 法 。 调 用 getContext(0) 方 法 时 ， 传 递 一 个 "2d" 参 数 ， 会 获 
得 一 个 CanvasRenderingContext2D 对 象 ， 使 用 该 对 象 可 以 在 画布 上 绘制 
二 维 图 形 。 这 里 很 重要 的 一 点 是 要 搞 消 楚 ， 男 布 元 泰和 它 的 上 下 文 对 
象 是 两 个 完全 不 同 的 对 象 。 由 于 CanvasRenderingContext2D 名 字 太 长 
了 ， 因 此 这 里 做 个 约定 ， 统 一 简称 为 < 上下文 对 象 *。 同样 地 ,， “画布 
API” 指 的 也 就 是 CanvasRenderingContext2D 对 象 的 方法 。 


画布 中 的 3D 图 形 


在 撰写 本 书 时 ， 浏 览 器 提供 商 正 在 开始 实现 < canvas > 元 素 用 于 绘制 
3D 图 形 的 API。 这 些 API 称 为 : "WebGL"， 它 是 绑 定 到 OpenGL 标 准 API 
的 一 个 JavaScript。 将 "webgl" 字 符 串 作为 参数 传递 给 画布 的 getContext(0) 
方法 可 以 获得 用 于 绘制 3D 图 形 的 上 下 文 对 象 。 由 于 WebGL 很 庞大 ， 而 
且 也 非常 复杂 ， 本 书 将 不 会 介绍 它 的 一 些 底层 API: 其 实 Web 开 发 者 也 
更 倾向 于 使 用 封装 了 WebGL 底 层 API 的 工具 类 库 而 不 喜欢 直接 使 用 
WebGL API 。 


如 下 代码 是 一 个 使 用 画布 API 的 简单 例子 ， 它 在 <canvas> 元 素 中 绘制 
0 产生 的 输出 和 图 21-2 所 示 的 SVG 图 
类 似 : 


<body> 


This is a red square:<canvas id="square"width=10 height=10></canvas>. 


This is a blue circle:<canvas id="circle"width=10 height=10></canvas>. 


<script> 


var canvas=document .getElementById("square");// 获 取 第 一 个 画布 元 素 


var context=canvas .getContext("2d") ;// 获 取 2D 绘 制 上 下 文 


context .fillStyle="#f00";// 设 置 填充 色 为 红色 


context .fillRect(0,09,10,10);// 填 充 一 个 正方 形 


canvas=document .getElementById("circle");// 第 二 个 画布 元 素 


context=canvas.getcontext("2d");// 获 取 它 的 绘制 上 下 文 


context .beginpPath( );// 开 始 一 条 新 的 路 径 


context.arc(5,5,5,0,2*Math.PI,true);// 将 圆 形 添加 到 该 路 径 中 


context .fillStyle="#00f";// 设 置 填充 色 为 监 色 


context .fill( ) ;// 填 充 路 径 

</script> 

</body> 

之 前 我 们 看 到 SVG 使 用 可 以 绘制 或 填充 的 线段 和 曲线 这 种 路 径 来 描述 

复杂 的 图 形 。 画 布 API 也 采用 路径” 的 思想 。 然 而 不 同 的 是 ， 相 比 SVG 
使 用 一 个 包含 了 字母 和 数字 的 字符 串 来 描述 路 径 ， 画 布 API 是 通过 一 系 
列 方法 调用 来 定义 路 径 的 ， 如 上 述 代 码 中 的 beginPathO0 和 arc() 方 法 调 

用 。 一 旦 定义 了 路 径 ， 其 他 的 诸如 fil0 这 样 的 方法 就 可 以 在 该 路 径 上 操 
作 了 。 而 像 flStyle 这 样 的 上 下 文 对 象 的 属性 则 是 指定 了 如 何 进 行 这 些 
操作 。 接 下 来 的 内 容 将 解释 : 


0 如 何 绘制 或 者 说 勾勒 路 径 的 外 边框 以 及 如 何 填 充 路 径 


:如何 设置 和 获取 画布 上 下 文 对 象 的 属性 以 及 如 何 保存 和 恢复 这 些 属性 
的 当前 状态 。 


:画布 的 大 小 、 移 认 画 布 坐标 系 以 及 如 何 进 行 坐标 变换 。 

-画布 API 定 义 的 大 量 的 绘制 曲线 的 方法 。 

-一些 用 于 绘制 长 方形 的 专用 工具 方法 。 

如何 指定 颜色 、 使 用 透明 度 以 及 如 何 绘制 渐变 色 和 重复 的 图 案 。 


-控制 线条 宽度 以 及 顶点 和 端点 外 观 的 属性 。 
-如 何在 < canvas> 元 素 中 绘制 文本 。 
如何“ 裁 台 ”图 形 以 保证 图 形 不 超过 指定 区 域 。 
-如何 给 图 形 添加 下 拉 阴 影 效 果 。 


-如 何在 画布 中 绘制 (和 选择 性 地 伸缩 ) 图 形 以 及 如 何 作为 图 片 从 画布 
中 提取 内 容 。 


如何 控制 画布 中 新 画 〈 半 透明 ) 像素 和 原 有 像素 的 融合 过 程 。 
中 ， 如 何 设置 和 查询 像素 的 红 、 绿 、 蓝 色 值 以 及 alpha 值 (透明 


当 在 画布 中 绘制 图 形 的 时 候 ， 如 何 判定 是 否 触 发 了 鼠标 事件 。 


本 太 最 后 会 展示 一 个 实际 示例 ， 其 使 用 < canvas > 元 素 绘制 一 个 小 的 内 
联 图 表 ， 一 般 称 为 “迷你 图 ”(sparkline) 。 


下 面 大 部 分 的 < canvas> 例 子 都 使 用 到 了 变量 c。 该 变量 保存 画布 的 
CanvasRenderingContext2D 对 象 ， 但 是 例子 中 并 没有 显示 c 是 如 何 初 始 
化 的 。 要 让 这 些 例 子 能 够 正常 运行 ， 需 要 在 HTML 中 定义 个 适当 大 小 的 
画布 ， 然 后 添加 下 面 这 段 用 于 初始 化 变量 c 的 代码 : 


var canvas=document .getEJLementById("my_canvas_id") ， 

Var c=canvas ,getContext('2d ' ) ， 

下 面 所 有 的 图 都 是 通过 J avaScript 代 码 在 <canvas> 元 素 上 绘制 的 一 一 
一 般 是 在 一 个 大 的 屏幕 外 画布 中 绘制 高 分 辨 率 (达到 印刷 质量 ) 的 图 


[一 


21.4.1 ”绘制 线段 和 填充 多 边 形 


要 在 画布 上 绘制 线段 以 及 填充 这 些 线段 闭合 的 区 域 ， 从 定义 一 条 路 径 
开始 。 路 径 有 许多 子路 径 组 成 ， 子 路 径 义 是 由 两 个 或 多 个 点 之 间 连 接 
而 成 的 线段 组 成 〈 或 者 后 面 将 介绍 的 曲线 段 ) 。 调 用 beginPath() 方 法 开 
定义 一 条 新 的 路 径 ， 而 调用 moveTo0) 方 法 则 开始 定义 一 条 新 的 子路 
径 。 一 旦 使 用 moveTo0 方 法 确定 了 子路 径 的 起 点 ， 接 下 来 吕 可 以 调用 
lineTo() 方 法 来 将 该 点 与 新 的 一 个 总 通过 直线 连接 起 来 。 如 下 代码 定义 
一 条 包含 了 两 条 线段 的 路 径 : 


c .beginpath();// 开 始 一 条 新 路 径 


c.moveTo(100,100);// 从 (1009,1009) 开 始 定义 一 条 新 的 子路 径 


c.lineTo(200,200);// 从 (100,100) 到 (200,200) 绘 制 一 条 线段 


c.lineTo(100,200);// 从 (200, 200) 到 (100, 200) 绘 制 一 条 线段 


上 述 代 码 只 是 简单 地 定义 一 条 路 径 ， 并 没有 在 画布 上 绘制 任何 图 形 。 
要 在 路 径 中 绘制 (或 者 勾勒 两 条 线段 ， 可 以 通过 调用 stroke() 方 法 ， 
要 填充 这 些 线段 闭合 的 区 域 可 以 通过 调用 fill0) 方 法 : 


c.fill( );// 填 充 一 个 三 角形 区 域 


c.stroke();// 绘 制 三 角形 的 两 条 边 


上 述 代 码 〈 再 加 上 一 些 设置 线段 宽度 和 填充 颜色 的 代码 ) 会 泻 染 出 图 
21-5 所 示 图 形 : 


图 21-5 一 条 绘制 并 填充 的 简单 路 径 


要 注意 的 是 上 述 定 义 的 子路 径 是 "未 闭合 "的 。 它 只 包含 两 条 线段 ， 线 
段 的 终点 并 没有 和 起 点 汇合 。 也 就 是 ， 它 并 没有 闭合 一 个 区 域 。 对 于 
这 样 “ 未 闭合 ”的 子路 径 ， 调 用 身 10 方 法 填充 的 时 候 ， 会 假设 子路 径 的 终 
上 态 和 子路 径 的 起 点 古 连 接 起 来 。 这 束 古 为 什么 ， 上 述 代 码 填 充 成 了 一 
个 三 角形 ， 但 是 只 勾勒 了 三 角形 的 两 条 边 。 


想 要 勾勒 出 上 述 三 角形 的 三 条 边 ， 可 以 调用 closePath() 方 法 将 子路 径 的 
起 点 和 终点 真正 连接 起 来 ; 还 可 以 调用 lineTo(100,100)， 但 是 ， 这 样 的 
话 ， 最 终 表 现 出 来 的 只 是 三 条 线段 共用 了 一 个 起 点 和 一 个 终点 ， 但 并 
未 真正 闭合 。 因此， 当 绘 制 比较 粗 的 线段 时 ， 如 果 使 用 closePath() 方 
法 ， 视 觉 效 果 会 更 好 。 


天 于 stoke0) 方 法 和 和 10 方 法 还 有 男 外 非常 重要 的 两 点 。 第 一 点 古 ， 这 两 
J 在 当前 路 径 上 的 所 有 子路 径 。 假 设 在 上 述 代码 中 再 加 
0 下 代码 : 


c.moveTo(300,100);// 在 (309,100) 上 开始 一 条 新 的 子路 径 


c.lineTo(300,200);// 以 (300, 200 ) 结 束 绘制 一 条 竖 直 线段 


如 膝 再 调用 stroke() 方 法 ， 束 会 绘制 出 三 角形 的 两 条 相连 的 边 ， 以 及 一 
条 断 开 的 鹤 直 线段 。 


第 二 点 是 : stroke(0) 方 法 和 fl0 方 法 都 不 更 改 当 前 路 径 。 可 以 调用 fil0 方 
法 ， 但 是 之 后 调用 stroke(0) 方 法 时 候 当 前 路 径 不 变 。 完 成 一 条 路 径 后 要 
再 重新 开始 男 一 条 路 径 ， 必 须要 记得 调用 beginPath() 方 法 。 如 果 没 有 调 
用 beginPath() 方 法 ， 那 么 之 后 添加 的 所 有 子路 径 都 是 添加 在 已 有 路 径 

上 ， 并 且 有 可 能 重复 绘制 这 些 子路 径 。 


例 21-4 定 义 了 一 个 函 效 ， 用 于 绘制 规则 的 多 边 形 ， 同 时 展示 了 如 何 使 用 


moveTo()、lineTo() 和 closePath() 方 法 来 定义 子路 径 以 及 如 何 使 用 fill0) 方 
法 和 stoke() 方 法 来 绘制 这 些 路 径 。 最 终 绘 制 出 来 的 图 形 如 图 21-6 所 示 。 


四 | 人 


图 21-6 规则 多 边 形 


例 21-4: 使 用 moveTo()、lineTo() 和 closePath() 方 法 绘制 规则 多 边 形 


// 定 义 一 个 以 (Xx,y) 为 中 心 ， 半 径 为 r 的 规则 n 边 形 


// 每 个 顶点 都 是 均匀 分 布 在 圆周 上 


// 将 第 一 个 顶点 放置 在 最 上 面 ， 或 者 指定 一 定 角度 


// 除 非 最 后 一 个 参数 是 true， 否 则 顺 时 针 旋转 


function polygon(c,n,x,y,r,angle,counterclockwise)f{ 


angle=angle||9; 


counterclockwise=counterclockwise||false,; 


c.moveTo(x+r*Math.sin(angle),// 从 第 一 个 顶点 开始 一 条 新 的 子路 径 


y-r*Math.cos(angle));// 使 用 三 角 法 计算 位 


var delta=2*Math.PI/n;// 两 个 顶点 之 间 的 夹 


for(var i=1;i<n;i++){// 循 环 剩余 的 每 个 顶点 


angle+=counterclockwise?-delta:delta;// 调 整 角度 


c.lineTo(x+r*Math.sin(angle),// 以 下 个 顶点 为 端点 添加 线段 


y-r*Math.cos(angle)); 


c.closePath( );// 将 最 后 一 个 顶点 和 起 点 连接 起 来 


// 开 始 一 个 新 的 路 径 并 添加 一 条 多 边 形 子路 径 


c.beginpath(); 


NY 


polygon(c,3,50,70,50);// 二 角 


T 
过 
ROY 


polygon(c, 4,150,60,50,Math.PI/4);//L 上 


polygon(c,5,255,55,50);// 五 边 形 


ROY 


polygon(c,6,365,53,50,Math.PI/6);// 六 边 


中 的 小 正方 形 


NY 


polygon(c, 4,365,53,20,Math.PI/4,true);// 六 边 


mn 


性 来 控制 图 形 外 观 


// 设 置 属 


[Ey 


c ,fillStyle="#ccc";// 内 部 使 用 浅 灰 


c.strokeSstyle="#008";// 深 蓝 色 外 边框 


c .linewidth=5;//5 个 像素 宽 


// 调 用 如 下 画 数 绘制 所 有 这 些 多 边 形 (每 个 分 别 定义 在 自己 的 子路 径 中 ) 


c.fill( );// 填 充 图 形 


c.Stroke( );// 勾 勒 外 边框 


要 注意 的 是 上 述 例子 绘制 了 一 个 内 部 包含 正方 形 的 六 边 形 。 正 方形 和 
六 边 形 是 两 条 独立 的 子路 径 ， 但 它们 互相 重 到 。 当 出 现 该 情况 〈 或 当 
单条 子路 径 与 自身 相交 ) 时 ， 画 布 需要 能 够 确定 哪些 区 域 在 路 径 里 

面 ， 哪 些 在 外 面 。 画 布 会 采用 * 非 零 绕 数 原 则 ?测试 来 判断 它们 。 在 上 
述 例 子 中 ， 由 于 六 边 形 和 正方 形 绘制 的 方向 不 同 :， 六 边 形 的 顶点 是 沿 
看 顺 时 针 方 癌 来 连接 的 ， 而 正方 形 顶 点 则 是 沿 痢 寺 时 针 连 接 的 ， 因 此 
根据 “ 非 零 绕 数 原则 ， 对 内 部 的 正方 形 不 进行 填充 。 换 句 话 说 ， 如 果 
正方 形 也 沿 着 顺 时 针 方 向 连接 的 话 ， 调 用 和 10 方 法 的 时 候 就 会 对 正方 形 
也 进行 填充 了 。 


非 零 绕 数 原则 


要 检测 一 个 点 P 和 是 否 在 路 径 的 内 部 ， 使 用 非 零 绕 数 原 则 : 想象 一 条 从 点 
P 出 发 沿 着 任意 方向 无 限 延 伸 《或 者 一 直 延 伸 到 路 径 所 在 的 区 域外 某 

点 ) 的 射线 。 现 在 从 0 开始 初始 化 一 个 计数 右 ， 然 后 对 所 有 穿 过 这 条 射 
线 的 路 径 进 行 枚 举 。 每 当 一 条 路 径 顺 时 针 方向 穿 过 射线 的 时 候 ， 计 数 
器 就 加 1; 反之 ， 开 减 1。 最 后 ， 枚 举 完 所 有 的 路 径 之 后 ， 如 果 计 数 右 
的 值 不 是 0， 那 么 就 认为 P 是 在 路 径 内 。 反 之 ， 如 有 果 计 数 器 的 值 是 0(， 则 
认为 P 在 路 径 外 。 


21.4.2 图形 属 性 


例 21-4 设 置 了 画布 的 上 下 文 对 象 的 fillStyle、strokeStyle 以 及 lineWidth 属 
性 。 这 些 属 性 都 是 图 形 属性 ， 分 别 指定 了 调用 fil0 和 stroke0O 时 候 要 采 
用 的 颜色 以 及 调用 stroke(0) 方 法 绘制 线段 时 的 线段 宽度 。 要 注意 的 是 ， 
这 些 参数 不 是 传递 给 fil0 和 stroke0) 方 法 的 ， 而 是 作为 画布 的 通用 图 形 
状态 。 如 果 定 义 一 个 绘制 形状 的 方法 ， 但 是 该 方法 没有 设置 这 些 属 


性 ， 那 么 调用 者 可 以 在 调用 该 方法 前 ， 设 置 strokeStyle、fillStyle 属 性 。 
这 种 将 从 将 图 形状 态 和 绘制 指令 分 离 的 细 想 是 画布 API 中 很 重要 的 概 
念 ， 同 时 也 和 通过 在 HIML 文 档 中 应 用 CSS 样 式 来 实现 表现 和 内 容 分 离 
是 类 似 的 。 


画布 API 中 在 CanvasRenderingContext2D 对 象 上 定义 了 15 个 图 形 属 性 。 
表 21-1 中 列 出 了 这 些 属性 ， 并 对 它们 一 一 进行 了 说 明 。 


表 211， 男 布 AP| 中 定义 的 图 形 属性 


属性 含义 

fillstyle 填充 时 候 的 颜色 、 浙 变 或 图 案 等 样式 
font 绘制 文本 时 候 的 CSS 字 体 
globalAlpha 绘制 像素 时 候 要 添加 的 透明 度 
globalComposite0peration 如何 合 并 新 的 像素 点 和 下 面 的 像素 点 
lineCap 如 何 泻 染 线段 的 末端 

lineJoin 如 何 泻 染 顶点 


lineWidth 外 框 线 的 宽度 


属性 含义 


miterLimit 紧急 斜 接 顶点 的 最 大 长 度 

textAlign 文本 水 平 对 齐 方式 

textBaseline 文本 垂直 对 齐 方式 

shadowBlur 阴影 的 清晰 或 模糊 程度 

shadowColor 下 拉 阴 影 的 颜色 

shadowOffsetX 表 影 的 水 平 偏 移 量 

Shadow0ffsetY 阴影 的 垂直 偏 移 量 

strokeStyle 勾勒 线段 时 的 颜色 、 浙 变 或 图 案 等 样式 


因为 画布 API 在 上 下 文 对 象 上 定义 图 形 属性 ， 所 以 你 也 许 试图 多 次 调用 

getContext() 方 法 来 获取 多 个 上 下 文 对 象 。 如 果 可 以 这 样 ， 能 够 在 每 个 

2 在 每 个 上 下 文中 ， 台 好 像 拥有 了 不 同 的 画 
将 会 绘制 出 不 同 的 颜色 ， 或 者 不 同 宽 度 的 线段 。 遗 憾 的 是 ， 在 画 

布 中 不 能 这 样 使 用 。 每 个 <canvas> 元 素 只 有 一 个 上 下 文 对 象 ， 因 此 每 

次 调用 getContext() 方 法 都 会 返回 相同 的 CanvasRenderingContext2D 对 

象 o 


尽管 画布 API 只 允许 一 次 设置 单一 的 图 形 属 性 集合 ， 但 是 它 介 许 保存 当 
前 图 形状 态 ， 这 样 束 可 以 在 多 个 状态 之 间 切 换 ， 之 后 也 可 以 很 方便 地 
恢复 。 调 用 save() 方 法 会 将 当前 图 形状 态 压 入 用 于 已 保存 状态 的 栈 上 。 
调用 restore() 方 法 会 从 栈 中 器 出 并 恢复 最 近 一 次 你 存 的 状态 。 家 fh 
列 出 的 所 有 属性 都 是 已 保存 状态 的 一 部 分 ， 包 括 当前 的 转换 信息 以 及 
裁剪 区 域 等 信息 (两 者 都 会 在 后 面 做 介绍 ) 都 是 已 保存 状态 的 一 部 
分 。 但 是 ， 很 重要 的 一 点 是 : 当前 定义 的 路 径 以 及 不 属于 图 形状 态 的 
当前 点 都 不 能 保存 和 恢复 。 


0 可 以 像 例 21-5 那 样 
定义 一 个 工具 方法 


例 21-5: 图 形状 态 管 理工 具 


SS 


// 恢 复 最 后 一 次 保存 的 图 


多 状态 ， 但 是 让 该 状态 从 栈 中 弹 


J 
EF 


CanvasRenderingContext2D.prototype.revert=function(){ 


this.restore();// 恢 


最 后 一 次 保存 的 图 形状 态 
this.save( );// 再 次 保存 它 以 便 后 续 使 
return this;// 允 许 方法 链 
};// 通 过 0 对象 的 属性 来 设置 图 形 属性 
// 或 者 ， 如 果 没 有 提供 参数 ， 就 以 对 象 的 方式 返回 当前 属性 
// 要 注意 的 是 ， 它 不 处 理 变 换 和 裁剪 区 域 


CanvasRenderingContext2D.prototype.attrs=function(o){ 


if(o)t 


for(var a in 0)// 遍 


历 o 对 象 中 的 每 个 


this[a]=o[a];// 将 它 设置 成 图 


NY 
条 
a 


return this;// 启 


直 用 方法 链 


else returnf{ 


fillSstyle:this.fillStyle, font:this.font, 


globalAlpha:this.globalAlpha, 


globalCompositeOperation:this.globalCompositeOperation, 


lineCap:this.1lineCap,1lineJoin:this,.1lineJoin, 


linewidth:this.1linewidth,miterLimit:this.miterLimit, 
textAlign:this.textAlign, textBaseline:this,.textBaseline, 
shadowBlur :this.shadowBlur, shadowColor :this.shadowColor, 
shadowOffsetX:this,.shadowoffsetX, shadowoffsetY:this.shadowoffsetyY, 
strokestyle:this.strokestyle 

}; 


}; 


21.4.3 画布 的 尺寸 和 坐标 


<canvas> 元 素 的 width 以 及 height 属 性 和 对 应 的 画布 对 象 的 宽度 以 及 高 
度 属 性 决定 了 画布 的 尺寸 。 画 布 的 默认 坐标 系 是 以 画布 最 左上 角 为 坐 
标 原 点 (0,0)。 越 往 石 X 轴 的 数值 越 大 ， 越 往 下 Y 轴 的 数值 越 大 。 画 布 上 
的 点 可 以 使 用 浮 点 数 来 指定 坐标 ， 但 是 它们 不 会 目 动 转换 成 整 型 值 
一 一 画布 采用 反 锯 次 的 方式 来 模拟 部 分 填充 的 像素 。 


画布 的 太 寸 是 不 能 随意 更 改 的， 除非 完全 重 置 画布 。 重 置 画布 的 width 
属性 或 者 height 属 性 《哪怕 重 置 的 时 候 属性 值 不 变 ) ， 都 会 清空 整个 画 
布 ， 擦 除 当 前 的 路 径 并 且 会 重 置 所 有 的 图 形 属性 (包括 当前 的 变换 和 
裁剪 区 域 ) 为 初始 状态 。 


尽管 画布 尺寸 是 很 重要 的 概念 ， 但 是 设置 了 画布 尺寸 的 大 小 ， 未 必 能 
够 保证 画布 在 屏幕 上 展现 的 大 小 或 者 组 成 画布 绘图 图 面 的 所 有 像素 点 
的 个 数 一 致 。 画 布 尺寸 (以 及 默认 的 坐标 系统 ) 都 是 以 CSS 像 素 为 单位 
的 。CSS 像 素 和 御 规 的 像素 是 一 样 的 。 然 而 ， 在 高 分 辨 挛 显 示 环 境 下 ， 
要 求 将 多 设备 像素 映射 到 单个 CSS 像 系 上 “。 这 也 融 意 味 看 ， 画 布 上 一 个 
长 方形 的 像素 在 高 分 辨 率 显 示 环 境 下 可 能 要 比 它 实际 的 大 小 要 大 。 当 
使 用 画布 的 像素 操作 特性 的 时 候 (参见 21.4.14 季 ) ， 尤 其 要 深 知 这 一 
点 。 但 是 ， 虚 拟 CSS 像 素 和 实际 的 硬件 像素 之 间 的 区 别 对 书写 的 画布 代 
码 没 有 任何 影响 。 


默认 情况 下 ，< canvas > 会 按照 它 设 置 的 HTML width 和 height 属 性 值 来 
显示 画布 大 小 (以 CSS 像 素 为 单位 ) 。 但 是 ， 和 其 他 HTML 元素 一 样 ， 
<<canvas> 元素 还 可 以 通过 CSS 的 width 和 height 样 式 属性 来 设置 它 的 屏 
幕 显 示 大 小 。 如 采 指 定 画布 的 屏幕 显示 大 小 和 它 的 实际 尺寸 不 同 ， 那 
么 画布 上 所 有 的 像素 都 会 自动 缩放 以 适合 通过 CSS 属 性 指定 的 屏幕 显示 
尺寸 。 画 布 的 屏幕 显示 大 小 不 会 影响 画布 位 图 的 CSS 像 素 或 者 便 件 像素 
的 个 数 ， 它 的 缩放 是 采用 图 片 缩放 方式 处 理 的 。 如 有 果 屏 幕 显 示 尺 寸 要 
远 远大 于 画布 的 实际 尺寸 ， 那 么 会 导致 像素 化 图 形 。 这 个 问题 需要 图 
形 设 计 师 去 考虑 ， 和 画布 编程 无 关 。 


21.4.4 ”坐标 系 变 换 


此 前 提 a 到 过 ， 上 默认 侍 标 系 是 以 画布 最 左上 角 为 坐标 原 扣 (0,0)。 越 往 右 X 
轴 的 数值 越 大 ， 越 往 下 Y 轴 的 数值 越 大 。 在 默认 坐标 系 中 ， 每 一 个 点 的 
坐标 都 是 直接 映射 到 一 个 CSS 像 素 上 〈CSS 像 素 之 后 再 映射 到 一 个 或 者 
多 个 设备 像素 ) 。 画布 中 一 些 特定 的 操作 和 属性 的 设置 《诸如 抽取 原 
人 像素 值 以 及 设置 阴影 偏 移 量 ) 都 使 用 默认 坐标 系 。 然 而 ， 除 了 默认 
的 坐标 系 之 外 ， 每 个 画布 还 有 一 个 “当前 变换 矩阵 ”>， 作 为 图 形状 态 的 
一 部 分 。 该 矩 陡 定义 了 画布 的 当前 坐标 系 。 当 指定 了 一 个 点 的 坐标 
后 ， 画 布 的 大 部 分 操作 都 会 将 该 点 映射 到 当前 的 坐标 系 中 ， 而 不 是 丈 
认 的 坐标 系 。 当 前 变换 和 矩阵 是 用 来 将 指定 的 坐标 转换 成 为 默认 坐标 系 
中 的 等 价 坐标 。 


尺 通 过 调用 setTransform() 方 法 能 够 直接 设置 画布 的 变换 和 矩阵， 但 是 
通过 转换 、 旋 转 和 缩放 操作 更 容易 实现 坐标 系 变换 。 图 21-7 展 示 了 这 些 
操作 以 及 操作 之 后 画布 坐标 系 的 样子 。 实 现 该 图 的 程序 其 实 只 是 将 同 
一 组 坐标 轴 在 一 行 中 绘制 了 7 这。 这 7 次 绘制 中 唯一 不 同 的 只 古 坐 标 系 
us 。 这 里 要 注意 的 是 ， 坐 标的 变换 还 影响 了 文本 和 线段 的 绘 

上 o 


调用 translate() 方 法 只 是 简单 地 将 坐标 原点 进行 上 、 下 、 左 、 右 移动 。 
调用 rotate() 方 法 会 将 坐标 轴 根 据 指定 角度 〈 画 布 API 总 是 以 弧度 制 来 表 
示 角 度 。 要 将 角度 制 转换 成 弧度 制 ， 可 以 通过 Math.PI 来 对 180 进 行 乘除 
来 实现 ) 进行 顺 时 针 旋 转 。 调 用 scale(0) 方 法 实现 对 X 轴 或 者 Y 轴 上 的 距 
离 进 行 延长 和 缩短 。 


调用 scale() 方 法 的 时 候 传递 负 值 会 实现 以 坐标 原点 做 参照 点 将 坐标 轴 进 
行 翻转 ， 束 好 像 是 镜子 中 的 镜像 。 图 21-7 中 最 左下 角 的 图 谍 是 这 样 实现 


的 : translate() 方 法 用 来 将 坐标 原点 移动 到 画布 最 雹 下角 ， 、 
法 用 于 实现 将 Y 轴 进行 翻转 ， 这 样 就 变 成 了 越 往 上 Y 轴 的 值 越 大 。 

翻 力 过 的 坐标 系 和 代数 读 上 经 冰 使 用 的 坐标 系 类 似 ， 它 有 助 于 在 图 表 
上 面 绘制 数据 点 。 但 是 要 注意 的 是 ， 它 同时 也 让 文本 变 的 难以 阅读 。 


1. 从 数学 角度 来 理解 坐标 系 变换 


我 发 现 从 几何 学 的 角度 很 容易 理解 坐标 变 换 ， 把 translate() 方 法 、 
rotate( 方 法 以 及 scale0 方 法 想象 成 如 图 21-7 所 示 的 对 坐标 轴 的 变换 ， 就 
很 容易 理解 了 。 。 从 代数 角度 也 很 容易 理解 坐标 变 换 ， 就 是 把 变换 想象 
成 一 个 在 变换 后 坐标 系 中 的 点 (x,y)， 到 了 原来 的 坐标 系统 就 变 成 了 
(Xx,y')° 


调用 c.translate(dx,dy) 方 法 束 等 效 于 如 下 表达 式 : 


x'=x+dx;// 新 系统 中 X 轴 的 0， 在 原 系 统 中 就 是 dx 


y'=y+tdy; 


ctranslatel(5,5) 


Ctranslate (29,120) 
a 
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图 21-7 坐标 系 变换 
缩放 操作 也 可 以 类 似 地 作 等 效 。 调 用 c.scale(sx,sy) 束 等 效 于 如 下 表达 


Te 


X'=SXx*xXx; 


y'=sy*y; 


旋转 操作 则 相对 比较 复 沫 。 调 用 c.rotate(a) 可 以 通过 三 角 法 则 等 效 于 如 
下 表达 式 : 


x'=x*cos(a)-y*sin(a); 


y'=y*cos(a)+x*sin(a); 


要 注意 的 是 ， 坐 标 系 变 换 是 与 顺序 相关 的 。 假 设 从 画布 默认 的 坐标 系 
开始 ， 然 后 进行 变换 ， 再 进行 伸缩 。 如 此 操作 之 后 ， 要 想 将 现 有 坐标 
系 中 的 点 (X,y) 映 射 成 默认 坐标 系 中 的 点 (x",y")， 必 须 御 先 应 用 等 效 的 缩 
放 等 式 把 该 点 映射 到 未 缩放 坐标 系 中 的 一 个 中 间 点 (xy])， 然 后 再 使 用 
等 效 的 要 换 来 将 中 间 点 再 映射 到 原来 坐标 系 中 的 点 Gy )。 结 采 如 下 所 
]: 


x''=Sx*x+dx; 


y''=sy*y+dy; 


如 果 先 调用 scal() 方 法 再 调用 translate() 的 话 ， 那 等 效 的 结果 就 不 同 了 : 


Xx''=Sx* (x+dx); 


y''=sy* (y+dy); 


这 里 要 记 住 的 最 重要 的 一 点 是 : 从 代数 的 角度 去 思考 坐标 变换 的 时 
候 ， 必 须 是 进行 反 向 还 原 变换 的 〈 以 相反 的 顺序 来 进行 等 效 的 变 
换 ) 。 而 从 几何 角度 去 思考 坐标 变换 的 时 候 ， 是 顺序 去 做 变换 的 。 


画布 支持 的 这 种 变换 称 做 “ 仿 射 变换 ” (affine transform) 。 仿 射 变换 可 
能 会 修改 点 之 间 的 距离 和 线段 间 的 夹 角 ， 但 是 对 于 平行 线 而 言 ， 经 过 
仿 射 变换 后 也 始终 保持 平行 一 一 比如， 不 可 能 通过 仿 射 变换 来 实现 鱼 
了 。 任意 的 仿 射 变换 可 以 利用 a~f 6 个 参数 等 效 描述 成 如 下 形 
工 N 


x'=ax+cy+e 
y'=bx+dy+f 
通过 同 transform() 方 法 传递 上 述 6 个 参数 就 可 以 应 用 任意 仿 射 变换 到 当 


前 的 坐标 系 。 图 21-7 展 示 的 钙 两 类 变换 一 一 对 指定 点 的 扭曲 和 旋转 一 一 
还 可 以 像 如 下 代码 那样 ， 使 用 transform() 来 实现 相同 的 变换 : 


// 扭 曲 变 换 : 


//X'=x+kx*y; 


//Yy'=y+tky*x; 


function shear(c, kx,Kky){c.transform(1,ky,kx,1,0,0);}// 沿 着 点 (x,y) 顺 时 针 旋 转 theta 角 度 (弧度 
制 ) 


// 这 也 可 以 通过 变换 、 旋 转 、 变 换 序列 操作 来 完成 


function rotateAbout(c, theta, x,y)t{ 


Var ct=Math.cos(theta),st=Math.sin(theta); 


c.transform(ct, -st,st,ct,-x*ct-y*st+x,x*st-y*ct+y); 


setTransform() 方 法 和 transform() 方 法 接受 同样 的 参数 ， 但 不 同 的 是 ， 前 
者 不 是 对 当前 坐标 系 进行 变换 ， 而 是 对 默认 坐标 系 进行 变换 ， 并 将 

果 有 映射 到 新 的 坐标 系 中 。setTransform0O 对 临时 将 画布 重 置 为 默认 坐标 
系 是 很 有 用 的 : 


Cc.Save( );// 保 存 当 前 坐标 系 


c.setTransform(1,0,0,1,0,09);// 恢 复 到 默认 坐标 系 


// 使 用 默认 的 CSS 像 素 坐 标 进行 操作 


c,restore();// 恢 复 保存 的 坐标 系 


2. 坐 标 系 变换 例子 


例 21- 6 证 明了 举 标 变换 的 威力 : 通过 递归 调用 translate() 方 法 、rotate() 方 
去 以 及 scale() 方 法 来 实现 绘制 科 赫 雪花 分 形 。 例 21-6 的 结果 如 图 21-8 所 
示 ， 展 示 了 0~4 不 同 分 形 级 别 的 科 赫 雪花 。 


图 21-8 科 替 雪花 


实现 这 些 雪 人 花 的 代码 羡 非 闻 简 活 优雅 的 ， 但 是 由 于 使 用 了 递归 坐标 变 
换 ， 因 此 代码 会 比较 难 履 。 即 便 没 有 注意 到 所 有 这 些 细微 区 别 ， 这 里 
要 注意 的 是 ， 代 码 仅 包 含 了 对 lineTo0 方 法 单 次 调用 。 图 21-8 中 的 每 一 
条 线段 部 是 通过 如 下 方式 来 绘制 的 : 


c.lineTo(len,o); 


len 变 量 的 值 在 代码 执行 的 过 程 中 是 不 会 改变 的 ， 因 此 ， 线 段 的 位 置 、 
方向 和 长 度 完全 通过 变换 、 旋 转 以 及 缩放 等 操作 来 指定 。 


例 21-6: 通过 坐标 系 变 换 实 现 绘制 科 赫 雪人 花 


制 到 弧度 制 的 转换 


Var deg=Math.PI/180;// 


河 


// 在 画布 的 上 下 文 c 中 ， 以 左下 角 的 点 (x,y ) 和 边 长 len， 绘 制 一 个 n 级 别 的 科 赫 雪花 分 形 


function snowflake(c,n,x,y,1len)t{ 


Cc .save( );// 保 存 当 前 变换 


c.translate(x,y);// 变 换 原点 为 起 始点 


c.moveTo(0,0);// 从 新 的 原点 开始 一 条 新 的 子路 径 


leg(n);// 绘 制 雪 花 的 第 一 条 边 


c,rotate(-120*deg) ;// 现 在 沿 着 逆 时 针 方向 旋转 120 0 


leg(n);// 绘 制 第 二 条 边 


c.rotate(-120*deg);// 再 次 旋转 


leg(n);// 画 最 后 一 条 边 


c.closePath( );// 闭 合子 路 径 


c.restore();// 恢 复 初始 的 变换 


// 绘 制 n 级 别 的 科 赫 雪花 的 一 条 边 


// 此 画 数 在 画 完 一 条 边 的 时 候 就 离开 当前 点 ， 


// 然 后 通过 坐标 系 变换 将 当前 点 又 转换 成 (9, 0, ) 


// 这 意味 着 画 完 一 条 边 之 后 可 以 很 简单 地 调用 rotate( ) 进 行 旋转 


function leg(n)t{ 


Cc.Save( );// 保 存 当 前 坐标 系 变换 


if(n==0){// 不 需要 递归 的 情况 下 : 


c.1lineTo(len, 09);// 就 绘制 一 条 水 平 线段 


else{// 弟 归 情 况 下 : 绘制 4 条 子 边 ， 类 似 这 个 样子 ， “ \/ ， 


c.scale(1/3,1/3) ;// 子 边 长 度 为 原 边 长 的 1/3 


leg(n-1) ;// 递 归 第 一 条 子 边 


c.rotate(60*deg);// 顺 时 针 旋 转 60 0 


leg(n-1);// 第 二 条 子 边 


c.rotate(-120*deg);// 逆 时 针 旋 转 120 0 


leg(n-1);// 第 三 条 子 边 


c.rotate(60*deg);// 通 过 旋转 回 到 初始 状态 


leg(n-1);// 最 后 一 条 边 


c.restore();// 恢 复 坐标 系 变换 


c.translate(len,0);// 但 是 通过 转换 使 得 边 的 结束 点 为 (0, 0) 


} 


} 


snowflake(c, 90,5,115,125);//0 级 别 的 雪花 就 是 一 个 三 角 


NS 


snowflake(c,1,145,115,125);//i1 级 别 的 雪花 就 是 一 个 六 角 星 


snowflake(c,2,285,115,125);// 依 次 类 推 


snowflake(c,3,425,115,125); 


snowflake(c,4,565,115,125);//4 级 别 的 雪花 看 起 来 真 的 像 一 朱 雪 花 了 


Cc.Stroke();// 义 勒 当前 复杂 的 路 径 


21.4.5 ”绘制 和 填充 曲线 


路 径 由 子路 径 组 成 ， 子 路 径 又 由 连接 的 点 组 成 。 在 2 1.4.1 广 中 定义 的 路 
径 中 ， 那 些 点 是 通过 直线 段 来 连接 的 ， 但 点 与 点 之 间 并 不 总 是 通过 直 
线段 连接 的 。CanvasRenderingContext2D 对 象 定 义 了 一 些 方法 ， 这 些 方 
， 于 在 子路 人 径 中 添加 新 的 点 ， 并 用 曲线 将 当前 点 和 新 增 的 点 连接 起 


arc() 


此 方法 实现 在 当前 子路 径 中 添加 一 条 弧 。 它 首先 将 当前 点 和 弧 形 的 起 

点 用 一 条 直线 连接 ， 然 后 用 圆 的 一 部 分 来 连接 弧 形 的 起 点 和 终点 ， 并 

把 弧 形 终点 作为 新 的 当前 点 。 要 绘制 一 个 弧 形 需要 指定 6 个 参数 ， 圆心 

的 X、Y 坐 标 、 圆 的 半径 、 弧 形 的 起 始 和 结束 的 角度 以 及 弧 形 的 方向 
( 顺 时 针 还 是 逆 时 针 ) 。 


arcTo() 


此 方法 绘制 一 条 直线 和 一 段 圆 弧 (和 arc() 方 法 一 样 ) ， 但 是 ， 不 同 的 

是 ， 绘 制 圆 弧 的 时 候 指 定 的 参数 不 同 。arc(0) 方 法 参数 需要 指定 点 P1 和 

P2 以 及 半径 。 绘 制 的 圆 弧 有 指定 的 半径 并 且 和 当前 点 到 P1 的 直线 以 及 
经 过 P1 和 P2 的 直线 都 相 切 。 此 种 绘制 圆 弧 的 方法 看 似 有 点 儿 奇 怪 ， 但 
是 对 于 绘制 带 有 圆 角 的 形状 是 非常 有 用 的 。 当 指定 的 半径 为 0 时 ， 此 方 
法 只 会 绘制 一 条 从 当前 点 到 P1 的 直线 。 而 当 半 径 值 非 零 时 ， 此 方法 会 
绘制 一 条 从 当前 点 到 P1 的 直线 ， 然 后 将 这 条 直线 按照 圆 形 形 状 变 成 曲 

线 ， 一 直到 它 指 向 P2 方 向 。 


bezierCurveTo() 


此 方法 实现 在 当前 子路 径 中 添加 一 个 新 的 点 ， 并 利用 三 次 贝 赛 尔 曲线 
将 它 和 当前 点 相连 。 曲 线 的 形状 由 两 个 “控制 点 "C1 和 C2 确 定 。 曲线 从 
当前 点 开始 ， 沿 着 C1 态 的 方向 延伸 ， 表 沿 着 C2 的 方向 延伸 一 直到 点 

P。 曲 线 在 这 些 点 之 间 的 过 渡 痢 是 很 平 渭 的 。 最 后 感 P 会 成 为 当前 点 。 


quadraticCurveTo() 


此 方法 和 bezierCurveTo() 方 法 类 似 ， 不 同 的 是 它 使 用 的 是 二 次 贝 塞 尔 曲 
线 而 不 是 二 次 贝 塞 尔 曲 线 并 且 只 有 一 个 控制 点 。 


可 以 使 用 这 些 方法 来 绘制 出 如 图 21-9 所 示 的 图 形 : 


图 21-9 画布 中 的 曲线 路 径 


例 21-7 展 示 了 用 于 绘制 图 21-9 所 示 图 形 的 代码 。 代 码 中 展示 的 一 些 方法 
古 画 布 API 中 比较 复杂 的 方法 的 一 部 分 。 想 要 了 解 这 些 复杂 方法 的 细 市 
以 及 它们 的 参数 可 以 参见 第 四 部 分 。 


例 21-7: 在 路 径 中 添加 曲线 


// 一 个 工具 函数 ， 用 于 将 角度 从 角度 制 转 化 成 弧度 制 


进行 相应 的 缩放 和 旋转 


i 


function rads(x){freturn Math.PI*x/180;}// 绘 制 一 个 圆 形 ， 如 果 需 要 椭圆 的 话 见 


即 可 


// 由 于 没有 当前 点 ， 因 此 绘制 的 圆 形 不 需要 当前 点 到 圆 形 起 点 之 间 的 直线 


c,beginPath() 


c.arc(75,100,50,// 圆 心 位 于 (75,1090)， 半 径 为 50 


0,rads(360),false);// 从 0 © 到 369 9 顺 时 针 旋 转 


// 绘 制 一 个 棉 ， 角 度 从 x 轴 正 向 顺 时 针 度 二 


员 | 


// 要 注意 的 是 arc( ) 方 法 会 将 当前 点 和 弧 形 起 点 用 直线 相 六 


c.moveTo(200,100);// 从 圆心 开始 


c.arc(200,100,50,// 圆 心 和 半径 


rads(-60),rads(0),// 从 -69 9 开始 一 直到 9 0 


false) ;//false 表 示 顺 时 针 


c.closePath() ;// 将 半径 添加 到 圆心 


/7 同样 的 模 ， 但 是 方向 不 同 


c.moveTo(325,100); 


c.arc(325,100,50,rads(-60),rads(0),true);// 逆 时 针 


ATS 


二 


2 


c.closePath() ;// 使 用 arcTo( ) 方 法 来 绘制 圆 角 ， 


方形 


会 制 一 个 以 点 (499, 59 ) 为 左上 角 同 时 还 带 有 不 同 半径 角 的 正 


人 


a 
油 


.moveTo(450, 50);// 从 上 边 的 中 点 开始 


O 


.arcTo(500,50,500,150, 30);// 添 加 部 分 上 边 和 右上 角 


OO 


9 


.arcTo(500,150,400,1590, 20);// 添 加 右上 角 和 右 下 和 角 


(2) 


.arcTo(400,150, 400, 50, 10);// 添 加 底 边 和 左下 角 


.arcTo(400,50,500, 50,0)// 添 加 左边 和 左上 角 


O 


.ClosePath( );// 闭 合 路 径 来 添加 其 余 的 上 边 


9 


// 二 次 贝 塞 尔 曲线 : 一 个 控制 点 


c.moveTo(75,250);// 从 点 (75,250) 开 始 


c.quadraticCcurveTo(100,200,175, 250) ;// 画 一 条 以 一 直到 点 (175, 250 ) 结 束 的 曲线 


c.fillRect(100-3,200-3,6,6);// 标 记 控 制 点 (100, 200) 


// 三 次 贝 塞 尔 曲线 


i 


,moveTo(200, 250);// 从 点 (2009,250) 


[@) 


.bezierCurveTo(220, 220, 280, 280, 300, 250);// 画 一 条 以 一 直到 点 (3009, 250 ) 结 束 的 曲线 


O 


.fillRect (220-3,220-3, 6,6);// 标 记 控 制 点 


[@) 


[@) 


.fillRect(280-3,280-3,6,6);// 定 义 一 些 图 形 属性 并 绘制 曲线 


.fillStyle="#aaa";// 填 充 灰 色 


[@) 


.1inewidth=5;//5 个 像素 宽 的 黑色 (默认 颜色 ) 线段 


O 


9 


.fil11() ; // 填 充 该 曲线 


. Stroke( );// 斥 勒 外 边框 


9 


21.4.6 ”和 窍 形 


CanvasRenderingContext2D 对 象 定 义 了 4 个 用 于 绘制 窍 形 的 方法 。 例 21-7 
使 用 了 其 中 一 个 方法 : filRect()， 来 标记 贝 窄 尔 曲线 的 控制 点 。 这 4 个 
绘制 矩形 的 方法 都 接受 两 个 参数 ， 其 中 一 个 指定 矩形 的 一 个 顶点 ， 田 
一 个 参数 指定 矩形 的 宽 和 高 。 一 般 都 是 指定 矩形 的 左上 角 顶 点 ， 然 后 
再 传递 表示 一 个 宽度 和 高 度 的 正 值 ， 当 然 也 可 以 指定 其 他 的 顶点 然后 
传递 表示 宽度 和 高 度 的 负 值 。 


fillRect(O) 方 法 使 用 当前 的 flStyle 来 填充 指定 的 矩形 。strokeRectO 方 法 使 
用 当前 的 strokeStyle 和 其 他 线段 的 属性 来 勾勒 指定 矩形 的 外 边框 。 
clearRect() 方 法 和 fillRect() 方 法 类 似 ， 但 是 不 同 的 是 ， 它 会 名 上 略 当 前 填 


充 样 式 ， 采 用 透明 的 黑色 像素 (所 以 空白 画布 的 默认 颜色 ) 来 填充 矩 
4 这 里 重要 的 ”局 全 这 三 个 方法 都 不 影响 当前 路 径 以 及 路 径 中 的 
、 和 有 点 6 


最 后 一 个 用 于 绘制 矩形 的 方法 是 rect()， 此 方法 会 对 当前 路 径 产 生 影 

响 :， 它 会 在 将 指定 的 矩形 添加 到 当前 路 径 的 子路 径 中 。 和 其 他 用 于 定 
0 它 本 和 喘 不 会 目 动 做 任何 和 填充 以 及 勾勒 相关 的 事 
情 。 


21.4.7 ”颜色 、 透 明度、 渐变 以 及 图 案 


stokeStyle 和 fillStyle 属 性 指定 了 线条 勾勒 的 样式 和 区 域 填 充 的 样式 。 大 
部 分 依次 下 ， 这 些 属 性 用 于 指定 不 透明 或 者 半 透 明 情 况 下 的 颜色 ， 但 
是 ， 也 可 以 将 它们 设置 成 CanvasPattern 或 者 CanvasGradient 对 象 ， 以 实 
现 采 用 重复 的 育 景 图 片 或 线性 或 辐射 型 的 渐变 色 来 进行 勾勒 或 者 填 
充 。 除 此 之 外 ， 还 可 以 通过 设置 globalAlpha 属 性 使 得 所 有 绘制 的 东西 
都 变 成 半 透 明 。 


要 指定 一 种 纯色 ， 可 以 使 用 HTML4 标 准 山 定义 的 颜色 名 字 或 者 使 用 
CSS 闫 色 品 : 


context.strokeStyle="blue";// 用 蓝 色 勾 勒 线段 


context .fillStyle="#aaa";// 用 浅 灰 色 填 充 区 域 


strokeStyle 和 fillStyle 属 性 的 默认 值 都 是 "#000000": 不 透明 黑色 


目前 ， 支 持 CSS3 颜 色 的 浏览 器 除了 人 允许 标准 的 16 进 制 RGB 颜 色 之 外 ， 
还 允许 使 用 RGB、RGBA、HSL 和 HSLA 颜 色 空间 。 如 下 是 一 些 例子 : 


Var colors=[ 


"#f44",// 十 六 进 制 RGB 色 值 ， 红 色 


"#44ff44",// 十 六 进 制 RRGGBB 色 值 ， 绿 色 


"rgb(69,690,255)",// 用 69~255 之 间 的 整数 来 表示 的 RGB 色 值 : 1 


县 | 
让 


"rgb(100%, 25%, 199%)", // 用 百分比 来 表示 的 RGB 色 值 : 紫色 


"rgba(100%, 25%, 100%, 90.5)",//RGB 加 上 90~1 的 alpha 值 ， 半 透明 紫色 


"rgba(9,0,0,0)",// 全 透明 黑色 


"transparent",// 和 上 述 类 似 


"hsli(60,100%, 50%)",// 全 饱和 黄色 


"hs1(69,75%, 50%)",// 低 饱和 黄色 


"hsl(690,100%, 75%)",// 全 饱和 上 暗 黄 


[Ey 


"hsl(69,100%, 25%)",// 全 饱和 亮 黄 


[ey 


"hsla(60,100%, 50%, 0.5)",// 全 饱和 黄色 ，50% 不 透明 度 


HSL 颜 色 空 间 采 用 三 个 数字 来 指定 颜色 ， 这 个 三 个 数字 分 别 代表 色 

调 、 饱 和 度 和 亮度 。 其 中 色调 是 颜色 轮 周 围 的 度数 。 
色 ，60° 表 示 黄 色 ， 120° 表 示 绿 色 ， 180 表 示 药 色 ，240? 表 示 蓝 
300。 表 示 品 红色 ，360。 再 次 转 回 红色 。 饱 和 度 描述 的 是 颜色 的 强度 ， 
是 以 百分比 来 表示 的 。 饱 和 度 为 0 的 颜色 就 是 暗 灰色 。 亮 度 人 
种 颜色 多 么 的 明亮 或 者 多 么 的 上 暗淡 ， 它 也 是 以 百分比 来 表示 的 。 任 何 
HSL 颜 色 ， 凡 是 亮度 为 100% 的 都 是 纯 白 色 ， 同 样 ， 任 何 亮度 为 0 的 颜色 
都 是 纯 黑 色 。HSLA 颜 色 空 间 和 HSL 类 似 ， 只 是 前 者 增加 了 一 个 alpha 
值 ， 它 的 取 值 范围 从 0.0 (透明 ) 一 1.0 (不 透明 ) 。 


0 秀明 的 颜色 ， 又 不 想 显 式 地 给 每 种 颜色 都 设置 一 个 透明 

通道 的 话 ， 又 或 者 想 要 给 透明 的 图 片 或 者 图 案 添 加 半 透 明 效 果 (比方 
说 ) 的 话 ， 可 以 通过 设置 globalAlpha 属 性 。 这 样 ， 每 一 个 绘制 的 像素 
都 会 将 其 alpha 值 乘 以 设置 的 globaAlpha 值 。 zlobalAlpha 属 性 默认 值 是 
1， 表 示 不 透明 。 如 果 将 其 值 设 置 为 0 的 话 ， 那 么 所 有 绘制 的 图 形 都 会 
变 成 全 透明 ， 这 样 一 来 ， 看 上 去 画布 上 就 什么 也 没有 。 而 如 果 设 置 为 


0.5 的 话 ， 那 么 所 有 绘制 的 原本 不 透明 的 像素 都 会 变 成 50% 的 不 透明 
度 。 而 如 果 原 本 像素 是 50% 不 透明 度 的 话 就 变 成 25% 的 不 透明 度 。 如 果 
设置 了 globalAlpha， :成 半 透 明 ， 这 个 时 候 不 2 Ea 
考虑 ， 像 素 的 重 释 问题 
型 相关 的 细节 。 


如 果 不 想 绘制 纯色 (也 许 是 半 透 明 的 ) ， 可 以 使 用 渐变 和 重复 图 片 来 
填充 和 勾勒 路 径 。 图 21-10 所 示 的 矩形 ， 用 宽 线 条 来 勾勒 ， 上 面 采用 线 
性 渐变 填充 ， 下 面 则 使 用 半 透 明 的 辐射 状 渐变 填充 。 下 面 的 代码 片段 
展示 了 这 些 图 案 和 渐变 是 如 何 创建 出 来 的 。 


要 使 用 背景 图 片 的 图 案 而 不 是 颜色 来 填充 或 者 勺 勒 ， 可 以 将 fllStyle 或 
者 strokeStyle 属 性 设置 成 CanvasPattern 对 象 ， 该 对 象 可 以 通过 调用 上 下 
文 对 象 的 createPattern() 方 法 返回 。 


var image=document ,getEJementById("myimage" ) ， 


c,fillStyle=c,createPattern(image "repeat") ， 


createPattern(0 方 法 的 第 一 个 参数 指定 了 用 做 图 案 的 图 片 。 它 必须 是 文档 
中 的 一 个 <img > 元 闵 、< canvas> 元 素 或 者 <video > 元 系 (或 者 是 通 
过 Image0 构 造 函 数 创 建 出 来 的 图 片 对 象 ) 。 第 二 个 参数 通常 

是 "repeat"， 表 示 采 用 重复 的 图 片 填 充 ， 这 和 图 片 大 小 是 无 天 的 。 除 此 
之 外 ， 还 可 以 使 用 "repeat-x"、"repeat-y" 或 者 "no-repeat"。 


要 注意 的 是 还 可 以 采用 一 个 <canvas> 元 素 (其 至 是 一 个 从 未 添加 到 文 
科 中 并 且 个 可 见 见 的 <canvas>> 元 素 ) 作为 另外 一 个 <canvas > 元 素 的 图 


var offscreen=document .createELlement("canvas" ) ;// 创 建 一 个 屏幕 外 画布 


offscreen.width=offscreen.height=10;// 设 置 它 的 大 小 


offscreen.getContext("2d") ,strokeRect(0,9,6,6);// 获 取 它 的 上 下 文 并 进行 绘制 


var pattern=c.createPattern(offscreen,"repeat");// 将 它 用 做 图 案 


90000000000 加 55500005059 


图 21-10 ”以 图 案 和 渐变 进行 填充 


要 使 用 渐变 色 来 进行 填充 或 勾勒 ， 可 以 将 身 lStyle 属 性 (或 者 strokeStyle 
属性 ) 设置 为 一 个 CanvasGradient 对 象 ， 该 对 象 可 以 通过 调用 上 下 文 对 
象 上 的 createLinearGradient0O) 或 createRadialGradientO) 方 法 来 返回 。 创 建 
和 ， 同 时 使 用 渐变 色 也 要 比 使 用 图 案 更 加 巧 
VS O 


第 一 步 是 要 创建 一 个 CanvasGradient 对 象 。createLinearGradient() 方 法 需 
要 的 参数 是 定义 一 条 线段 〈 不 一 定 要 水 平 或 者 垂直 ) 两 个 点 的 坐标 ， 
这 条 线段 上 每 个 点 的 颜色 都 不 同 。createRadialGradient() 方 法 需要 的 参 
数 是 两 个 圆 《这 两 个 圆 不 一 定 要 同心 圆 ， 但 是 一 般 第 二 个 圆 完 全 包含 
第 一 个 圆 ) 的 圆心 和 半径 。 小 圆 内 的 区 域 和 大 圆 外 的 区 域 都 会 用 纯色 
来 填充 ;而 两 圆 之 间 的 区 域 会 用 渐变 色 来 填充 。 


在 创建 了 CanvasGradient 对 象 以 及 定义 了 画布 中 要 填充 的 区 域 之 后 ， 必 
须 通 过 调用 CanvasGradient 对 象 的 addColorStop(0) 方 法 来 定义 渐变 色 。 该 
方法 的 第 一 个 参数 是 0.0~1.0 之 间 的 一 个 数字 ， 第 二 个 参数 是 一 个 CSS 
闫 色 值 。 必 须 至 少 调用 该 方法 两 次 来 定义 一 个 人 简单 的 闫 色 渐变 ， 但 是 
可 以 调用 它 多 次 。 在 0.0 位 置 的 闫 色 会 出 现在 渐变 的 起 始 ， 在 1.0 位 置 的 
颜色 会 出 现在 渐变 色 最 后 。 如 有 果 还 指定 其 他 的 颜色 ， 那 么 它们 会 出 现 
。 其 他 地 方 的 颜色 会 进行 平 请 的 过 渡 。 下 面 是 
一 此 三 子 。 


// 一 个 线性 渐变 ， 沿 着 画布 的 对 角 线 (假设 没有 进行 坐标 系 变 换 ) 


var bgfade=c.createLinearGradient(0,0,canvas.width,canvas.height); 


bgfade.addCcolorStop(0.0, "#88f");// 以 左上 角 为 亮 监 色 开 始 


生 下 角 以 白色 结束 


bgfade.addColorSstop(1.0, "#fff");// 


// 两 个 同心 圆 之 间 的 一 种 渐变 ， 中 间 为 透明 色 ， 然 后 慢 慢 变 为 灰色 半 透 明 ， 最 后 再 回 到 透明 色 


Var peekhole=c.createRadialGradient(300,300,100,300,300,300); 


peekhole.addColorstop(0.0,"transparent");// 透 明 


peekhole.addcolorStop(0.7,"rgba(100,100,100, .9)");// 灰 色 半 透明 


peekhole.addColorstop(1.0,"rgba(0, 090,09,0)");// 再 次 透明 


关于 渐变 要 明白 的 很 重要 的 一 点 是 : 它们 并 不 是 与 位 置 相关 的 。 当 创 
建 一 种 渐变 的 时 候 ， 需 要 指定 渐变 的 范围 。 如 果 试 图 填充 渐变 指定 范 
围 外 的 区 域 ， 会 以 渐变 最 后 结束 的 纯色 或 者 另 一 个 渐变 色 来 填充 。 比 
如 ， 定 义 了 一 种 沿 着 点 (0,0) 到 (100,100) 的 渐变 ， 那 么 该 渐变 只 能 用 于 填 
充 在 矩形 (0,0,100,100) 范 围 内 的 对 象 。 


图 21-10 所 示 的 图 形 是 使 用 如 下 代码 创建 的 ， 该 代码 采用 了 pattern 模 
式 ， 同 时 使 用 到 了 之 前 定义 过 的 bgfade 和 peekhole 渐 变 : 


c.fillStyle=bgfade;// 以 线性 渐变 开始 


c.fillRect(0, 9,600,600);// 填 充 整 个 画布 


c.strokestyle=pattern;// 使 用 图 案 来 勾勒 线段 


c.linewidth=160;// 使 用 非常 宽 的 线段 


c.strokeRect(100,100,409,400);// 绘 制 一 个 大 的 正方 形 


c.fillStyle=peekhole;// 切 换 到 辐射 状 渐变 


c.fillRect(0,9,609,600);// 使 用 半 透 明 填 充 来 庶 曙 画布 


21.4.8 线段 绘制 相关 的 属性 


前 面 已 经 介绍 过 了 lineWidth 属 性 ， 它 用 于 指定 通过 stroke() 方 法 和 
strokeRect() 方 法 绘制 时 线段 的 宽度 。 除 了 lineWidth (当然 还 有 
strokeStyle) 属性 之 外 ， 还 有 其 他 三 个 图 形 属 性 影响 绘制 线段 。 


lineWidth 属 性 的 默认 值 是 1， 可 以 将 该 属性 设置 成 任意 正 数 ， 甚 至 是 小 
于 1 的 小 数 。 (小 于 1 个 像素 宽 的 线段 会 绘制 成 半 透 明 色 的 ， 这 样 它 们 
就 看 起 来 比 一 个 像素 宽 的 线段 更 暗 ) 。 要 想 完全 搞 清 楚 ]ineWidth 属 


性 ， 将 路 径 视 为 是 很 多 无 限 细 的 1 维 线条 是 很 重要 的 。 而 通过 调用 
stoke() 方 法 绘制 的 线段 或 者 曲线 是 处 于 路 径 的 中 间 ， 两 边 都 是 lineWidth 
宽度 的 一 半 。 如 果 人 勾勒 一 条 闭合 的 路 径 并 只 希望 线段 出 现在 路 径 之 
外 ， 那 么 首先 勾勒 该 路 径 ， 然 后 用 不 透明 的 颜色 填充 闭合 区 域 来 将 出 
现在 路 径 内 的 勾勒 部 分 隐藏 。 又 或 者 如 果 只 硕 望 线段 出 现在 闭合 路 径 
内 ， 那 么 首先 调用 save() 方 法 和 clip0 (参见 21.4.10 节 ) 方法 ， 然 后 调用 
stroke() 方 法 和 restore() 方 法 。 


线段 宽度 是 受 当 前 坐标 系 变换 影响 的 ， 正 如 图 21-7 所 示 ， 可 以 通过 坐标 
系 变 换 来 对 坐标 轴 进 行 缩放 。 如 采 调 用 了 scale(2,1) 方 法 融会 对 X 轴 进行 
缩放 ， 但 是 对 Y 轴 不 产生 影响 ， 这 样 一 来 ， 垂 直 的 线段 要 比 原 先 和 它 一 
样 宽 的 水 平 线段 宽 一 倍 。 这 里 很 重要 的 是 要 摘 清 区 : 当 调用 stroke() 方 
法 时 候 ， 线 段 宽 度 是 由 lineWidth 属 性 以 及 当前 的 坐标 系 变 换 决 定 的 ， 
而 与 ineTo0 方 法 或 者 其 他 用 于 创建 路 径 的 方法 无 关 。 


另外 三 个 与 线段 绘制 相关 的 属性 影响 路 径 中 未 连接 的 端点 的 外 观 以 及 
两 条 路 径 相 区 顶点 的 外 观 。 它 们 对 于 很 罕 的 线段 的 影响 很 小 ， 相 比 而 
言 ， 对 于 相对 较 寓 的 线段 的 影响 很 大 。 如 图 21-11 所 示 ， 它 展示 了 一 条 
ee 围 用 灰色 区 域 进行 勾勒 。 该 图 展示 了 其 中 两 个 属 


二 < butt miter round bevel 
半 3sdquare 
局 <round 


图 。21-11 ”lineCap 属 性 和 lineJoin 属 性 


lineCap 属 性 指定 了 一 个 未 封闭 的 子路 径 段 的 端点 如 何 “ 封 顶 *”。 该 属性 
的 默认 值 "butt" 表 示 线 段 端点 直接 结束 。"square" 值 则 表示 在 端点 的 基础 


上 ， 再 继续 延长 线段 宽度 一 半 的 长 度 。"round" 值 则 表示 在 端点 的 基础 
上 延长 一 个 半圆 ( 圆 的 半径 是 线段 贺 度 的 一 半 ) 。 


lineJoin 属 性 指定 了 子路 径 顶 点 之 间 如 何 连接 。 其 默认 值 是 "miter"， 表 
示 一 直 延 伸 两 条 路 径 段 的 外 侧 边 绿 直 到 在 某 一 点 汇合 。"round" 值 则 表 
"bevel" 值 则 表示 用 一 条 直线 将 汇合 的 顶点 
切除 。 


最 后 一 个 与 线段 绘制 相关 的 属性 是 miterLimit， 它 只 有 当 lineJoin 属 性 值 
是 "miter" 才 会 起 作用 。 当 两 条 线段 相交 的 夹 角 是 锐角 的 时 候 ， 两 条 线 

段 的 斜 接 部 分 可 以 变 得 很 长 处 ， 并 且 这 些 锯齿 状 的 斜 接 部 分 在 视觉 上 
是 分 离 的 。miterLimit 属 性 指定 斜 接 部 分 长 度 的 上 限 。 如 果 指 定点 上 的 
斜 接 长 度 比 线段 宽度 乘 以 指定 的 miterLimit 值 的 一 半 还 要 长 的 话 ， 最 终 
绘制 出 来 的 顶点 就 会 是 斜 切 的 而 不 是 斜 接 的 。 


21.4.9 ”文本 


要 在 画布 上 绘制 文本 ， 通 常 使 用 flText(0 方 法 来 使 用 filstyle 属 性 指定 的 
颜色 (渐变 或 者 图 案 ) 绘制 文本 。 要 想 在 大 字号 文本 上 加 特效 ， 可 以 
使 用 strokeText(0 方 法 ， 该 方法 会 在 每 个 字形 外 边 绘制 轮廓 〈 图 21-13 就 
是 一 个 带 轮 廓 的 文本 的 例子 ) 。filText0 方 法 和 strokeText(0) 方 法 都 接受 
要 绘制 的 文本 内 容 作为 第 一 个 参数 ， 以 及 文本 绘制 位 置 的 X 轴 坐标 和 Y 
轴 坐 标 作为 第 二 个 和 第 三 个 参数 。 但 是 这 两 个 方法 都 不 会 对 当前 路 径 
人 。 如 图 21-7 所 示 ， 文 本 是 会 受 当 前 坐标 系 变换 所 影响 


font 属 性 指定 了 绘制 文本 时 候 采 用 的 字体 。 该 属性 值 是 一 个 字符 串 ， 语 
法 和 和 CSS 的 font 属 性 一 至。 下 面 是 一 些 例子 : 


"48pt sans-serif" 


"bold 18px Times Roman" 


"italic 12pt monospaced" 


"bolder smaller serif"// 比 <canvas> 的 字体 更 加 粗 或 者 更 加 4 


textAlign 属 性 指定 了 文本 应 当 参 照 X 轴 坐标 〈 调 用 fillText0 或 者 
strokeText() 方 法 时 候 传 入 的 参数 ) 如 何 进 行 水 平 对 齐 。textBaseline 属 性 
则 指定 了 文本 应 当 参 照 Y 轴 坐标 如 何 进行 垂直 对 齐 。 图 21-12 展 示 了 这 
两 个 属性 的 可 能 值 ， 每 个 文本 字符 串 下 面 的 细 线 瓯 是 基线 

(baseline) ， 那 个 小 方 框 标记 了 传递 给 fillText(0 方 法 的 点 (xy)。 


left center right 


top Abcefs Abcefe Abcefu Abcefe Abcefo 


hanging Abcefs Abcefo Abcefe Abcefs Abcefo 
middle thcefe heefe Abeefe Abcefe Abcefe 


alphabetic Abcefs Abcefe Abcefe Ahcefs Abcefs, 
ideographic Abcefg Abcefg Abcefg Abcefs Abcefs 
bottom Abcefg Abcefe Abcefg Abcefy Abcefo 


图 21-12 textAlign 属 性 和 textBaseline 属 性 


textAlign 属 性 的 默认 值 是 "start"。 要 注意 的 是 ， 对 于 从 左 到 右 的 文本 而 
言 ，"start" 方 式 的 对 齐 和 "left" 方 式 的 对 齐 是 一 样 的 ，"end" 方 式 的 对 齐 
和 "right" 方 式 的 对 齐 是 一 样 的 。 但 是 ， 如 果 设 置 <canvas> 元 素 的 dir 属 
性 为 "rd" (right-to-left) ， 那 么 "start" 方 式 的 对 齐 和 "right" 方 式 的 对 齐 是 
一 样 的 ， 同 样 "end" 方 式 的 对 齐 和 "left" 方 式 的 对 齐 是 一 样 的 。 


textBaseline 属 性 的 默认 值 是 "alphabetic"， 它 适合 用 于 拉丁 语系 和 其 他 类 
似 语系 的 字母 。"ideographic" 值 用 于 诸如 中 文 和 日 文 之 类 的 表意 文 
字 。"hanging" 值 则 是 用 于 焚 文 和 类 似 的 文字 (大 多 用 于 印度 


语 ) 。"top"、"middle" 以 及 "bottom" 这 样 的 基线 都 是 纯 几 何 基 线 ， 它 们 
都 是 基于 设置 的 字体 的 "emsquare"。 


fillText() 方 法 和 strokeText() 方 法 同时 还 接受 第 4 个 可 选 的 参数 。 该 参数 
指定 文本 展现 的 最 大 宽度 。 当 使 用 font 属 性 绘制 文本 的 时 候 ， 如 果 文 本 
宽度 比 指定 宽度 大 ， 那 么 画布 会 通过 缩放 或 者 采用 更 罕 或 更 小 的 字 


如 有 果 想 要 在 绘制 文本 前 自己 移 度 量 文本 的 宽度 ， 那 么 可 以 使 用 

measureText() 方 法 。 该 方法 返回 一 个 TextMetrics 对 象 ， 它 指定 在 使 用 当 
前 字体 绘制 文本 时 的 尺寸 。 截 止 撰写 本 书 时 ，TextMetrics 对 象 中 包含 的 
唯一 "metric" 的 是 width。 可 以 通过 如 下 方式 来 获取 一 个 字符 串 的 屏幕 显 


一 
示 宽 度 : 


Var width=c.measureText(text).width; 


21.4.10 “裁剪 


在 定义 一 条 路 径 之 后 ， 通 常会 调用 stroke() 方 法 或 者 fl0 方 法 (或 者 两 
者 都 调用 ) 。 除 此 之 外 ， 还 可 以 调用 clip0) 方 法 来 定义 一 个 裁剪 区 域 。 
一 旦 定义 了 一 个 裁 檀 区 域 ， 在 该 区 域外 将 不 会 绘制 任何 内 容 。 图 21-3 展 
示 了 一 个 使 用 了 裁 筋 区 域 来 绘制 的 网 形 ， 在 该 图 形 中 ， 勾 勒 中 间 的 坚 
直 条 市 以 及 下 面 的 文字 时 都 没有 使 用 裁剪 区 域 ， 而 在 填充 三 角形 之 
前 ， 害 义 了 二 角形 裁剪 区 域 。 


图 21-13 是 使 用 了 例 21-4 中 的 polygon0) 方 法 来 生成 的 ， 代 码 如 下 所 示 : 


// 定 义 一 些 绘制 属性 


c.font="bold 60pt sans-serif";// 大 号 字体 


c .1inewidth=2;// 窜 线段 


c.strokestyle="#000";// 黑 色 线 段 


// 人 勾勒 矩形 轮廓 和 文本 轮廓 


c.strokeRect(175,25,50,325);// 中 间 竖 直 的 条 带 


c.strokeText("<canvas>",15,330);// 注 意 使 用 的 是 strokeText( ) 方 法 而 不 是 fijllText( ) 方 法 


// 在 外 部 定义 一 条 包含 内 部 的 复杂 路 径 


™ 


polygon(c,3,200,225,200);// 大 三 角 


polygon(c,3,200,225,100, 0,true);// 在 内 部 再 绘制 一 个 小 三 角形 


// 将 该 路 径 定义 成 裁剪 区 域 


鲁 
进 
性 
Xl 
车 
ey 


c.clip();// 用 5 个 像素 宽 的 线段 来 勾勒 路 径 ， 完 4 


c.1Linewidth=10,;// 另 外 5 个 像素 的 线段 被 裁剪 了 


癌 


c,stroke() ;// 填 充 在 裁剪 区 域内 的 矩形 部 分 和 文本 部 分 


[ER 


c.fillsStyle="#aaa"// 上 暗 灰 


c.fillRect(175, 25,50,325);// 填 充 坚 直 的 条 带 


[ER 


c.fillStyle="#888"// 深 灰 


c.fillText("<canvas>>",15,330);// 填 充 文本 


图 21-13 未 裁剪 的 勾勒 和 裁剪 的 填充 


要 注意 很 重要 的 一 点 是 ， 当 调用 clip() 方 法 时 ， 当 前 路 径 目 身 就 会 裁剪 

到 当前 裁剪 区 域 中 ， 之 后 ， 补 裁剪 的 路 径 整 变 成 了 新 的 裁 艾 区域 。 这 

意味 着 ，clip0 方 法 只 会 缩小 裁剪 区 域 ， 永 远 不 会 放大 裁剪 区 域 。 由 于 

没有 提供 重 置 裁剪 区 域 的 方法 ， 因 此 在 调用 clip0) 之 前 通常 要 调用 save0) 
方法 ， 以 便于 之 后 恢复 未 裁剪 区 域 。 


21.4.11 ”阴影 


CanvasRenderingContext2D 对 象 定 义 了 4 个 图 形 属性 用 于 控制 绘制 下 拉 

阴影 。 如 果 正 确 设置 这 些 属性 ， 绘 制 的 任何 线段 、 区 域 、 文 本 以 及 图 

厂 都 会 拥有 下 拉 阴 影 ， 这 样 外 观 上 看 起 来 束 像 它 浮 出 了 画布 表面 。 图 

Se ` 勾勒 的 矩形 下 的 阴影 以 及 填充 的 文 
» 永 乡 O 


shadowColor 属 性 指定 阴影 的 颜色 。 其 默认 值 生 完 全 透明 的 黑色 ， 因 此 
如 朱 没 有 将 该 属性 设置 为 半 透 明 色 或 者 不 透明 色 ， 阴 影 都 是 不 可 见 
的 。 该 属性 只 能 设置 为 一 个 表示 颜色 的 字符 串 : 图 案 和 渐变 部 是 不 允 
评 用 于 阴影 的 。 使 用 半 透 明 色 的 阴影 可 以 产生 很 逼真 的 阴影 效果 ， 
为 透 过 它 还 能 够 看 到 至 景 。 


shadowOffsetXx 属 性 和 shadowOffsetY 属 性 指定 阴影 的 X 轴 和 Y 轴 的 偏 移 
量 。 这 两 个 属性 的 默认 值 都 是 0， 表 示 直 接 将 阴影 绘制 在 图 形 正 下 方 ， 
在 这 种 位 置 阴影 是 不 可 见 的 。 如 果 将 这 两 个 属性 都 设置 为 一 个 正 值 ， 
那么 阴影 会 出 现在 图 形 的 右 下 角 位 置 ， 就 好 像 有 一 个 左上 角 的 光源 从 
计算 机 屏幕 外 面 照射 到 画布 上 。 偏 移 量 越 大 ， 产 生 的 阴影 也 越 大 ， 同 
时 会 感觉 绘制 的 物体 在 画布 上 浮 得 也 越 高 。 


shadowBlur 属 性 指定 了 阴影 边缘 的 模糊 程度 。 其 默认 值 为 0， 表 示 产 生 
一 个 清晰 明亮 的 阴影 。 该 属性 值 越 大 表示 阴影 越 模糊 。 该 属性 是 高 斯 
模糊 函数 的 一 个 参数 ， 和 像素 的 大 小 以 及 长 度 无 关 。 


例 21-8 所 示 代 码 是 用 于 绘制 图 21-4 所 示 图 形 。 该 段 代码 展示 了 如 何 使 用 
这 4 个 用 于 绘制 阴影 的 属性 。 


图 21-14 上 自动 生成 的 阴影 
例 21-8: 设置 阴影 属性 


// 定 义 一 种 不 明显 的 阴影 


c.shadowColor="rgba(100,100,100, .4)";// 半 透明 灰 


c.shadowoffsetX=c.shadowOoffsetY=3;//1 


有 移 阴 影 到 在 


部 分 


C 


. ShadowBlur=5;// 柔 化 阴影 的 边缘 


// 使 用 阴影 在 一 个 蓝 色 的 方 框 中 绘制 一 些 文本 


C 


C 


// 定 义 一 个 模糊 点 的 阴影 。 较 大 的 1 


// 要 注意 透明 的 阴影 是 如 何 和 蓝 色 的 方 框 重 又 的 


C 


C 


CE 


,Inewidth=10 


,StrokeStyle="blue"， 


,StrokeRect(100,100,300,200) ;// 绘 制 一 个 矩形 


.font="Bold 36pt Helvetica"; 


.fillText ("Hello World",115,225);// 绘 制 一 些 文本 


移 量 使 绘制 的 物体 浮 得 越 高 


.ShadowoffsetX=c. shadowOoffsetY=20; 


. ShadowBlur=10; 


,fillStyle="red";// 绘 制 一 个 纯 幻 


[ 色 的 矩形 


.fil11Rect(590,25,200,65) ;// 该 红 


色 矩 形 浮 在 蓝 色 方 框 上 本 


shadowOffsetX 属 性 和 shadowOffsetY 属 性 总 是 在 默认 的 坐标 空间 中 度量 
的 ， 它 不 受 rotate() 方 法 和 scale0 方 法 的 影响 。 比 如， 假设 先 将 坐标 系 旋 
转 90? 之 后 绘制 了 一 些 竖 直 的 文本 ， 之 后 再 恢复 到 原先 的 坐标 系统 再 绘 
制 一 些 水 平 的 文本 。 这 样 ， 竖 直 的 文本 和 水 平 的 文本 的 阴影 都 是 朝 问 

一 个 方 同 的 ， 这 或 许 也 正 是 想 要 的 效果 。 同 样 地 ， 通 过 不 同 的 缩放 变 

换 绘制 的 图 形 拥 有 的 阴影 都 有 相同 的 “高 度 ” S31-。 


21.4.12 图片 
除了 矢量 图 形 (路 径 、 线 段 等 ) 之 外 ， 画 布 API 还 支持 位 图 图 片 。 


drawImage() 用 于 将 源 图 片 (或 者 源 图 片 中 的 矩形 区 域 中 ) 的 像素 内 容 
复制 到 画布 上 ， 有 需要 的 时 候 可 以 对 图 片 进行 缩放 和 旋转 。 


调用 drawImage() 方 法 的 时 候 可 以 传递 3 个 、5 个 或 者 9 个 参数 。 其 中 第 一 
个 参数 是 要 将 其 像素 复制 到 画布 上 的 源 图 片 。 这 个 图 片 参数 通常 是 一 
个 <img> 元 素 或 者 通过 Image0 构 造 画 数 创建 的 一 张 屏 幕 外 图 片 ， 但 是 
它 还 可 以 是 另 一 个 <canvas> 元 素 或 者 甚至 是 一 个 <video > 元素。 如 
果 指 定 的 <img > 或 者 <video > 元 素 正 在 加 载 数据 ， 那 么 调用 
drawImage() 方 法 什么 也 不 做 。 


如 朱 传 递 3 个 参数 给 drawImage() 方 法 ， 那 么 第 二 个 和 第 三 个 参数 指定 待 
绘制 图 片 的 左上 角 位 置 的 X 轴 和 Y 轴 上 坐标。 以 这 种 方式 调用 的 话 ， 源 图 
片 的 所 有 内 容 都 会 复制 到 画布 上 。 指 定 的 X 轴 和 Y 轴 坐标 会 相应 地 转换 
到 当前 的 坐标 系 中 ， 如 果 有 需要 的 话 可 以 对 图 片 进行 缩放 和 旋转 。 


如 果 传 递 5 个 参数 给 drawImage() 方 法 ， 那 么 另外 两 个 参数 分 别 是 宽度 和 
高 度 。X 轴 和 Y 轴 坐标 以 及 宽度 和 高 度 ， 这 4 个 参数 在 画布 上 定义 了 一 
个 目标 矩形 局 域 。 图 片 的 左上 角 定 位 在 点 (x,y)， 而 其 右 下 角 则 定位 在 
扩 (X+width,y+height)。 同样 ， 这 种 调用 方式 也 会 复制 整个 源 图 片 。 该 目 
标 和 矩形 区 域 会 在 当前 坐标 系 中 度量 ， 而 即使 不 指定 缩放 变换 源 图 片 也 
会 日 动 伸缩 适应 目标 矩形 区 域 。 


如 果 传 递 9 个 参数 给 drawImage() 方 法 ， 那 么 这 些 参数 还 同时 指定 了 一 个 
源 和 矩形 区 域 和 一 个 目标 答 形 区 域 ， 并且 只 会 复制 源 和 矩形 区 域内 的 像 
素 。 其 中 第 2~5 个 参数 指定 了 源 和 矩形 区 域 。 它 们 是 以 CSS 像 素来 度量 
的 。 如 琳 指 定 的 兰 图 片 是 男 一 个 画布 ， 那 么 源 答 形 区 域 会 使 用 该 画布 
的 默认 坐标 系 ， 并 会 忽略 指定 的 任何 变换 。 第 6~9 个 参数 指定 了 图 片 
要 绘制 在 的 目标 矩形 区 域 ,该 区 域 是 在 画布 当前 的 坐标 系 而 不 是 默认 
的 坐标 系 中 绘制 的 。 


例 21-9 坪 一 个 使 用 drawImage0 的 简单 例子 。 它 使 用 9 个 参数 来 调用 
drawImage() 方 法 ， 从 一 个 画布 部 分 区 域 中 复制 像素 并 将 它们 绘制 出 
来 ， 同 时 在 同 相同 画布 上 进行 放大 和 旋转 。 正 如 图 21-15 所 示 的 那样 ， 
为 了 明显 看 出 像素 化 ， 已 经 将 图 片 放 到 了 足够 大 ， 这 时 候 可 以 看 出 其 
中 使 用 了 半 透 明 像素 来 使 得 线条 边缘 变 得 更 加 平 请。 


图 21-15 使 用 drawImage() 将 像素 放大 


例 21-9: 使 用 drawImage() 方 法 


// 在 左上 角 绘制 一 条 线段 


c.moveTo(5,S5); 


c.lineTo(45, 45); 


c.linewidth=8,; 


c.lineCap="round"; 


c.stroke();// 定 义 一 个 变换 


c.translate(50,100); 


漠 


c.rotate(-45*Math.PI/180);// 让 线段 变 得 


c.scale(10,10);// 将 它 放 大 到 能 够 看 到 每 个 像素 


// 使 用 drawImage( ) 方 法 来 复制 该 线段 


c.drawImage(c.canvas, 


Sr 


9, 9, 59, 590, // 源 矩形 区 域 : 未 变换 


09,9,50,50) ;// 目 标 和 矩形 区 域 : 变换 过 


除了 能 将 一 张 图 片 绘制 到 一 张 画 布 中 之 外 ， 还 能 使 用 toDataURL() 方 法 
将 画布 中 内 容 抽 取 成 一 张 图 片 。 和 这 里 介绍 的 其 他 方法 不 同 ， 
toDataURL( 方 法 是 画布 元 素 目 身 的 方法 ， 而 不 是 
CanvasRenderingContext2D 对 和 象 的 方法 。 通 常 调用 toDataURL() 方 法 的 时 
候 不 传递 任何 参数 ， 它 会 将 画布 内 容 以 PNG 图 片 的 形式 返回 ， 同 时 编 
码 成 一 个 字符 串 数据 ， 用 URL 表 示 。 返 回 的 URL 可 以 在 <img> 元 素 中 
使 用 ， 同 时 也 可 以 使 用 如 下 代码 来 实现 画布 静态 截图 功能 : 


var img=document .createElement("img" );// 创 建 一 个 <img > 元 素 


img.src=canvas.toDataURL();// 设 置 其 src 属 性 


document .body .appendchild(img);// 把 它 追 加 到 文档 后 面 


所 有 浏览 器 都 要 求 支持 PNG 图 片 格式 。 其 中 有 些 浏览 器 可 能 还 支持 其 
他 的 图 片 格式 ， 可 以 通过 利用 toDataURL( 方 法 的 第 一 个 可 选 参数 来 指 
定 需要 图 片 格式 的 MIME 类 型 。 想 要 了 解 详细 内 容 ， 可 以 参见 第 四 部 

分 。 


当 使 用 toDataURL0O 方 法 的 时 候 ， 必 须要 知道 它 有 一 个 很 重要 的 安全 限 
制 。 为 了 避免 跨 域 的 信息 泄露 ，toDataURL0 方 法 无 法 在 非 "origin- 
clean" 的 < canvas 之 元 素 上 使 用 的 。 这 里 所 请 的 非 "orign-clean" 指 的 是 : 
一 张 画布 上 绘制 的 图 片 (直接 调用 drawImage() 方 法 绘制 或 者 间接 通过 
CanvasPattern 绘 制 ) 和 画布 所 在 的 文档 不 属于 同 源 。 


21.4.13 ”合成 
当 人 勾勒 线段 、 填 充 区 域 或 者 复制 图 片 的 时 候 ， 会 想 要 让 新 绘制 的 像素 


扩 能 够 在 画布 中 原 有 像 取 的 上 面 。 如 来 绘制 一 个 不 透明 的 像素 ， 它 们 
会 替换 同一 位 置 原 有 的 像素 。 如 果 绘 制 的 是 半 透 明 的 像素 ， 那 么 新 


(“ 源 ”) 像素 会 和 原 〈“ 目 标 ?) 像素 进行 合并 ， 原 像素 可 以 透 过 新 像素 
看 到 ， 而 请 晰 程度 取决 于 像素 的 透明 度 。 


合并 新 的 半 透 明 源 像素 和 已 有 目标 像素 的 过 程 称 为 “合成 "上面 摘 述 
的 合成 过 程 也 是 画布 API 定 义 的 默认 像素 合并 方式 。 但 是 ， 有 的 时 候 其 
实 是 不 希望 进行 合成 的 。 比 如 ， 已 经 使 用 半 透 明 像 素 在 画布 中 绘制 了 
一 些 内 容 ， 这 个 时 候 想 要 进行 临时 切换 ， 然 后 再 恢复 到 原先 的 状态 。 
这 个 时 候 最 简单 的 方法 就 是 ， 将 使 用 drawImage() 方 法 将 画布 内 容 (或 
者 画布 一 部 分 区 域内 容 ) 复制 到 一 张 屏幕 外 画布 中 。 然 后 ， 在 需要 恢 
复 画 布 的 时 候 ， 再 从 屏幕 外 画布 中 将 内 容 复制 回 到 屏幕 上 的 画布 中 。 
但 是 ， 要 记 住 的 是 ， 保 存 的 像素 都 是 半 透 明 。 如 果 这 个 时 候 合成 是 开 
局 的 ， 它 们 并 不 会 完全 抹 除 临时 绘制 的 内 容 。 因 此 ， 在 上 述 情 况 下 ， 
a 不 论 源 像素 是 否 透明 ， 都 绘制 源 像 素 并 
和 忽 昌 水 像 系 。 


要 指定 合成 的 方式 ， 可 以 设置 globalCompositeOperation 属 性 。 该 属性 的 
默认 值 是 "source-over"， 表 示 将 源 像 素 绘制 在 目标 像素 上 ， 对 于 半 透 明 
的 源 像素 就 直接 合并 。 如 果 将 该 属性 设置 为 "copy"， 则 表示 天 闭合 成 : 
源 像 系 将 原封 不 动 地 复制 到 画布 上 ， 直 接 名 略 目 标 像素 。 
globalCompositeOperation 属 性 还 有 男 一 个 有 时 相当 有 用 的 属性 值 
"destination-over"， 表 示 将 新 的 源 像 隶 绘制 在 已 有 目标 像 隶 的 下 
面 。 如 果 目 标 像 素 是 半 透 明 或 者 透明 的 话 ， 所 有 或 者 部 分 源 像素 的 颜 
色 在 最 终 颜 色 上 了 天 是 可 见 的 。 


"source-over"、"destination-over" 和 "copy" 是 三 种 最 常用 的 合成 类 型 ， 而 
事实 上 画布 API 支 持 globalCompositeOperation 属 性 的 11 个 值 。 直 接 看 这 
些 属性 值 的 名 字 就 大 概 知道 它们 是 怎样 的 合成 方式 了 ， 当 然 ， 也 可 以 
结合 一 些 实际 的 例子 来 理解 它们 的 工作 原理 ， 不 过 这 个 过 程 可 能 会 比 
较 漫长 。 图 21-16 展 示 了 这 11 种 合成 方式 各 目的 效果 ， 演 示 完 全 使 

用 “ 硬 ” 透 明度 : 所 有 这 些 绘制 的 像素 要 么 是 完全 透明 要 么 是 完全 不 透 
明 。 在 这 11 个 方 框 中 ， 都 是 和 绘制 正方 形 ， 将 其 作为 目标 。 然 后 再 设 
置 globalCompositeOperation 必 性， 最 后 绘制 圆 形 ， 将 其 作为 源 。 
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图 21-16 使 用 “ 硬 * 透 明度 实现 合成 操作 


图 21-17 是 一 个 相似 的 例子 ， 不 同 的 是 使 用 的 是 “ 软 ” 透 明度 。 在 该 例 
中 ， 作 为 原始 图 形 的 圆 形 和 作为 目的 图 形 的 正方 形 都 是 采用 渐变 色 来 
绘制 的 ， 以 便 每 个 像素 的 透明 度 都 会 不 同 。 


如 图 21-17 所 示 ， 使 用 半 透 明 像 素 绘制 时 ， 可 能 就 会 发 现 要 搞 明 白 合 成 
操作 不 是 那么 容易 的 。 如 果 想 要 更 深入 地 了 解 合 成 操作 ， 在 第 四 部 分 
有 专门 对 CanvasRenderingContext2D 对 象 的 合成 操作 做 详细 讲解 的 ， 它 
ee 目的 像素 
了 ,Io 
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图 21-17 使 用 “ 软 透 明度 "进行 合成 操作 
截至 撰写 本 书 时 ， 浏 览 需 提供 商 在 实现 11 种 合成 方式 中 的 5 种 上 和 意见 不 


统一 : "copy"、"source-in"、"source-out" 、"destination- 


atop" 和 "destination-in" 在 不 同 的 浏 贤 右 上 表现 不 同 ， 无 法 做 到 兼容 。 下 
面 会 具体 讲解 表现 如 何不 同 ， 但 是 ， 如 采 你 不 打算 使 用 这 些 合成 操作 
了 的话， 完全 可 以 跳 过 下 一 忆 的 内 容 。 


上 述 这 5 种 合成 模式 在 计算 合成 结 采 的 时 候 ， 要 么 是 在 计算 结 采 像 隶 值 
的 时 候 直 接 忽略 目标 像素 值 ， 要 么 是 将 任何 源 像素 中 透明 的 地 方 全 首 
变 透明 。 两 者 在 实现 上 的 区 别 束 在 于 源 像 素 的 定义 上 。 Safari 和 Chrome 
进行 合成 的 时 候 ， 是 “局 部 ”操作 的 : 只 有 真正 通过 fill(0 方 法 、stroke() 方 
法 或 者 其 他 绘制 操作 绘制 出 来 的 像素 才能 算是 源 像 素 。IE9 的 实现 方式 
似乎 也 是 类 似 的 。 而 Firefox 和 Opera 是 进行 “全 局 ”合并 的 : 对 于 每 次 绘 
制 操 作 ， 在 当前 裁 喜 区 域 中 的 所 有 像素 都 会 进行 合成 。 如 果 源 像素 没 
有 设置 该 像素 ， 默 认 会 按 透明 黑色 处 理 。 在 Firefox 和 Opera 中 ， 这 就 意 
味 着 ， 上 述 5 种 合成 模式 实际 上 都 会 将 在 源 像 素 外 又 在 裁剪 区 中 的 像素 
都 抹 除 。 图 21-16 和 图 21-17 就 是 在 Firefox 显 示 的 效果 。 这 也 就 是 为 什么 
及 用 "copy"、"source-in"、"source-out"、"destination-atop" 以 

及 "destination-in" 方 式 合成 的 方 框 周 围 部 要 比 其 他 的 方 框 要 细 : 每 个 例 
子 周围 的 矩形 指 的 是 裁 甬 区 域 ， 而 这 5 种 合并 操作 将 落 在 裁剪 区 域内 的 
线段 〈lineWidth 宽 度 的 一 半 ) 给 抹 除 了 。 为 了 作 比 较 ， 图 21-18 显 示 了 
和 图 21-17 同 样 的 图 形 ， 不 同 的 是 它 是 显示 在 Chrome 中 的 。 
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图 21-18 采用 “局 部 ”合成 的 方式 而 不 是 “全 局 ”合成 的 方式 


截至 撰写 本 书 时 ，HTML5 标 准 的 草案 中 定义 的 是 由 Firefox 和 Opera 实 现 
的 全 局 合成 。 浏 览 器 提供 厂商 也 意识 到 了 不 兼容 性 ， 同 时 对 当前 的 标 
准 也 表示 不 满 。 而 之 后 标准 很 有 可 能 采纳 局 部 合成 的 方式 ， 而 不 是 全 
局 合成 的 方式 。 


最 后 ， 要 注意 的 是 ， 在 像 Safari 和 Chrome 这 样 实现 本 地 合成 方式 的 浏览 
器 中 也 可 以 使 用 全 局 合成 方式 。 首 先 ， 创 建 一 个 和 屏幕 显示 的 画布 同 
样 尺寸 的 屏幕 外 画布 。 然 后 在 该 屏幕 外 画布 中 绘制 一 些 源 像素 ， 并 使 
用 drawImage() 方 法 将 这 些 屏幕 外 像素 复制 到 屏幕 显示 的 画布 中 ， 这 样 
残 能 在 裁剪 区 域 中 实现 全 局 合成 了 。 但 是 没有 一 个 通用 的 方法 在 像 
Firefox 这 样 实现 全 局 合成 的 浏 斋 器 中 执行 本 地 合成 模式 ， 但 是 通常 也 
能 够 通过 在 要 进行 的 本 地 合成 方式 的 绘制 操作 之 前 先 定 义 一 个 适当 的 
裁剪 区 域 来 近似 的 模拟 。 


21.4.14 ”像素 操作 


调用 getImageData() 方 法 会 返回 一 个 ImageData 对 象 ， 该 对 象 表 示 男 布 矩 
形 区 域 中 的 原始 (没有 预先 进行 像素 增加 处 理 的 ) 像素 信息 (由 R、 
G、B 和 A 分 量 组 成 ) 。 使 用 createImageData() 方 法 可 以 创建 一 个 空 的 
ImageData 对 象 。ImageData 对 象 中 的 像素 是 可 写 的 ， 因 此 可 以 对 它们 进 
是 欲 的 设置 ， 然 后 再 通过 putImageData(0) 方 法 将 这 些 像素 复制 回 
图 | O 


这 些 像素 操作 方法 提供 了 对 画布 的 底层 访问 。 传 递 给 getImageData() 方 
法 的 矩形 是 在 默认 的 坐标 系 中 的 : 它 的 尺寸 以 CSS 像 素 为 单位 来 度量 并 
且 不 受 当 前 坐标 系 变 换 的 影响 。 当 调用 putImageData(0) 方 法 时 ， 指 定 的 
位 置 也 是 按照 默认 的 坐标 系 来 处 理 的 。 而 且 ，putImageData() 方 法 会 忽 
格 所 有 的 图 形 属性 。 它 不 会 进行 任何 合成 操作 ， 也 不 会 用 globalAlpha 
乘 以 像素 来 显示 ， 更 不 会 绘制 阴影 。 


像素 操作 方法 对 于 实现 图 片 处 理 来 说 是 很 有 用 的 。 例 21-10 展 示 了 如 何 
在 一 张 画 布 中 的 图 形 上 创建 一 种 简单 的 动态 模糊 或 者 “涂抹 ”效果 。 该 
例 展示 了 如 何 使 用 getImageData() 方 法 和 putImageData(0 方 法 以 及 如 何在 
一 个 ImageData 对 象 中 迭代 和 修改 像素 色 值 ， 但 是 它 没 有 对 这 些 进行 详 
细 的 解释 。 想 要 了 解 getImageData() 方 法 和 putImageData() 方 法 的 全 部 细 
节 可 以 参考 第 四 部 分 中 对 CanvasRenderingContext2D 对 象 解释 的 内 容 ， 
也 可 以 参考 其 中 对 ImageData 对 象 的 详细 解释 。 


例 21-10: 使 用 ImageData 实 现 动态 模糊 


// 将 矩形 区 域 的 像素 向 右 进行 涂抹 ， 


// 来 产生 动态 模糊 效果 ， 就 好 像 物 体 正轨 


王 


//n 必 须要 大 于 或 等 于 2， 该 值 越 大 ， 涂 抹 区 域 束 越 大 


// 矩 形 是 在 默认 坐标 系 中 指定 的 


到 左 移动 


function smear(c,n,x,y,w,h){// 获 取 表 万 


Var pixels=c.getIimageData(x,y,w,h);/ 


// 一 些 图 片 处 理 算法 要 求 额 外 的 ImageData 对 象 来 存储 变 


NS 


` 矩 


ROY 


区 域内 像素 的 ImageData 对 象 来 实现 涂抹 效果 


/就 地 实现 涂抹 效 


奥 后 的 像素 


只 需要 ImageData 对 象 数据 


值 


// 如 果 需 要 输出 缓冲 区 ， 可 以 以 如 下 方式 创建 一 个 新 的 同样 尺寸 的 ImageData 对 象 


//var output_pixels=c.createImageData(pixels); 


// 这 些 尺 寸 可 能 和 w 和 h 之 类 的 参数 不 同 ， 有 可 能 是 每 


var width=pixels.width,height=pixels.height;//data 变 上 


到 下 


// 每 个 像素 按照 R、G、B、A 的 顺序 共 占 据 4 个 字 节 


var data=pixels.data;// 每 一 行 第 一 个 像素 


// 其 色素 值 的 1/n+ 原 色素 值 的 m/n 


var m=n-1; 


后 的 像素 都 通 


for(var row=0;row<height;row++){// 循 环 每 一 行 


var i=row*width*4+4;// 每 行 第 二 个 元 素 的 1 


for(var col=1;col<width;col++,i+=4){//1 


data[i]=(data[i]+data[i-4]*m)/n;// 像 素 中 红 


data[i+1]=(data[i+1]+data[i-3]*m)/n; 


data[i+2]=(data[i+2]+data[i-2]*m)/n; 


扁 移 量 


机 


盾 环 每 一 列 


// 绿 


// 蓝 


[Ey 


个 CSS 像 素 要 表示 多 个 设备 像素 


包含 所 有 原始 的 像素 信息 从 左 到 不 


三 


色 值 蔡 换 成 


， 从 上 


data[i+3]=(data[i+3]+data[i-1]*m)/n;//Alpha 分 量 


} 


} 


| 


// 现 在 将 涂抹 过 的 图 片 数据 复制 


画布 相同 的 位 置 


c.putImageData(pixels, x,y); 


} 


要 注意 的 是 ，getImageData() 方 法 和 toDataURLO 方 法 一 样 ， 同 样 收 同 源 
安全 案 略 的 限制 : 它 对 于 绘制 的 几 片 (通过 drawImage() 方 法 直接 绘制 
人 和 画布 所 在 文档 不 属于 同 源 的 画布 是 


21.4.15 ”命中 检测 


isPointInPath() 方 法 确定 一 个 指定 的 点 是 否 落 在 (或 者 在 边界 上 ) 当前 
路 径 中 ， 如 果 该 方法 返回 true 则 表示 落 在 当前 路 径 中 ， 反 之 则 返回 
false。 传递 给 该 方法 的 点 是 在 默认 坐标 系 中 的 而 不 是 在 变换 过 的 坐标 
系 中 。 这 对 于 该 方法 用 于 命中 检测 (hit detection) 是 很 有 帮助 的 : 检 
测 鼠 标 单 击 事件 是 否 发 生 在 特定 的 形状 上 。 


但 是 ， 不 能 将 MouseEvent 对 象 的 clientX 字 段 和 clientY 字 段 直 接 传递 给 
isPointInPath() 方 法 。 首 移 ， 必 须要 将 鼠标 事件 的 坐标 转换 成 相应 的 画 
布 元 素 ， 而 不 是 Window 对 象 。 其 次 ， 如 采 画 布 在 屏幕 上 显示 的 故 二 和 
实际 斥 才 不 同 ， 鼠 标 事件 坐标 必须 要 进行 适当 的 缩放 。 例 21-11 显 示 了 
一 个 工具 函数 ， 用 它 可 以 检测 一 个 给 定 的 MouseEvent 是 否 发 生 在 当前 
路 径 上 。 


例 21-11: 检测 一 个 鼠标 事件 是 否 发 生 在 当前 路 径 上 


// 如 果 鼠 标 事 件 发 生 指 定 的 CanvasRenderingCcontext2D 对 象 的 当前 路 径 上 则 返回 true 


function hitpath(context,event){f// 从 <canvas > 对 象 中 获取 <canvas > 元 素 


var canvas=context .canvas;// 获 取 画 布 尺 十 和 位 


var bb=canvas.getBoundingClientRect();// 将 鼠标 事件 坐标 通过 转换 和 缩放 变换 成 画布 坐标 


Var x=(event.clientX-bb.left)*(canvas.width/bb.width); 


var y=(event.clientY-bb.top)*(canvas.height/bb.height );// 用 这 些 变换 后 的 坐标 来 调 
isPointInPath( ) 方 法 


return context ,IsSPointInPath(x,y)， 


可 能 还 会 使 用 如 下 所 示 的 hitpath0 函 数 作为 事件 处 理 程序 : 


canvas.onclick=function(event){ 


if(hitpath(this.getContext("2d"),event){ 


alert ("Hit!");// 单 击 在 当前 路 径 上 


}; 


除了 进行 基于 路 径 的 命中 检测 之 外 ， 还 可 以 使 用 getImageData() 方 法 来 

难 测 鼠标 点 下 的 像素 是 否 已 经 绘制 过 了 “。 如 有 果 返 回 的 像素 (单个 或 多 
个 ) 是 完全 透明 的 ， 则 表示 该 像素 上 没有 绘制 任何 内 容 ， 并 且 鼠 标 事 
件 点 空 了 。 例 21-12 展 示 了 如 何 做 此 类 命中 检测 。 


例 21-12: 检测 鼠标 事件 触发 点 的 元 素 是 否 绘制 过 了 


// 如 果 指 定 的 鼠标 事件 点 下 的 像素 不 是 透明 的 则 返回 true 


function hitpaint(context,event ){// 通 过 转换 和 缩放 将 鼠标 事件 坐标 转换 成 画布 坐标 


var canvas=context.canvas,; 


var bb=canvas.getBoundingClientRect(); 


Var x=(event.clientX-bb.left)*(canvas.width/bb.width); 


var y=(event.clientY-bb.top)*(canvas.height/bb.height ) ;// 获 取 像素 (或 者 多 个 设备 像素 映射 到 一 
个 CSS 像 素 的 像素 ) 


var pixels=c.getImageData(x,y,1,1);// 如 果 任 何 像素 的 alpha 值 非 09， 则 返回 true (命中 ) 


for(var i=3;i<pixels.data.length;i+=4)f{ 


if(pixels.data[i]!==0)return true; 


} 


// 人 否则， 表示 不 命中 
return false; 


} 


21.4.16 画布 例子 : 迷你 图 


本 至 将 以 一 个 实际 的 绘制 迷 米 你 图 的 例子 结束 。 迷你 图 (sparkline) 是 指 
用 于 显示 少 > 量 数据 的 图 形 ，; 通常 会 和 符 入 在 文本 流 中 如 下 所 示 : 


SEEF ONS 站 “迷你 图 "这 个 词 是 由 作者 Edwand 
Tufte 杜 拟 的 ， 他 将 该 词 用 于 描述 “内 骸 在 文字 、 数 字 、 图 片 中 的 小 且 高 
分 辨 率 的 图 形 ”。 术 你 图 是 数据 密集 、 设 计 人 简单 、 单 词 大 小 的 图 形 。 

(要 了 解 更 多 关于 迷你 图 的 知识 可 以 阅读 Tufte 的 书 : Beautiful 
Evidence[Graphics Press]。 ) 


例 21-13 展 示 了 在 Web 页 面 中 用 于 实现 迷你 网 的 JavaScript 人 代码， 相对 而 
言 ， 该 JavaScript 是 一 个 比较 简单 的 常见 JavaScript 代 码 模块 。 代 人 码 中 的 
注释 解释 了 所 已 的 原理 。 要 注意 是 的 ， 它 使 用 了 例 13-5 中 的 onLoad0O) 函 


例 21-13: 使 用 < canvas > 元 素 绘 制 迷 你 图 


/* 


* 找 到 所 有 有 "sparkline"CSS 类 的 元 素 ， 将 它们 的 内 容 解析 成 一 系列 数字 


* 最 后 蔡 换 成 图 形 化 的 表示 方式 


* 将 使 用 标记 将 迷你 图 定义 成 如 下 


SS 


EE 


*<span class="sparkline">357669 11 15</span> 


x 使 用 CSSs 对 迷你 图 进行 样式 设置 ， 如 下 所 示 : 


*,sparkline{background-color:#ddd;color:red;} 


*- 术 你 图 的 颜色 是 根据 CSS 的 color 属 性 计算 出 来 的 


* -迷你 图 是 透明 的 , 因此 可 以 显示 正常 的 背景 


[ER 


* -如 果 设 置 了 data-height 属 性 ， 迷 你 图 的 高 度 则 由 该 属性 指定 ， 


en 


* 如 果 没 有 设置 ， 则 根据 font - size 属性 计算 得 出 


* -如 果 设 置 了 data-width 属 性 ， 迷 你 图 的 宽度 则 由 该 属性 指定 


* 如 果 没 有 设置 该 属性 ， 而 设置 了 data-dx 属 性 ， 则 迷 从 


图 的 宽度 等 于 数据 点 的 个 数 乘 以 


二 


*data-dx 的 值 ， 否 则 ， 


说 
测 
还 
吕 
) 电 
由 
浴 
Cr 


点 的 个 数 乘 以 图 表 的 高 度 再 除 以 6 


*- 如 果 设 置 了 data-ymin 属 性 和 data-ymax 属 性 ， 则 最 小 值 和 最 大 值 由 这 两 个 属性 值 指 定 


Kr 


* 否 则 ， 最 小 值 和 最 大 值 等 于 数据 的 最 小 值 和 最 大 值 


WW 


onLoad(function( ){// 当 文档 第 一 次 载 入 时 


// 找 到 所 有 有 "sparkline" 


天 的 元 素 
var elts=document .getElementsByClassName("sparkline"); 


main:for(var e=0;e<elts.length;e++){// 循 环 每 


var elt=elts[e];// 获 取 元 素 内 容 


个 元 素 
转换 成 一 个 包含 数字 的 数组 
// 如 果 转 换 失败 ， 则 跳 过 该 元 素 


var content=elt.textContent||elt.innerText;// 元 素 内 


var content=content.replace(/^\s+|\s+$/g,"");// 去 除 


空格 
var text=content .replLace(/#.*$/gm, "") ;VV/ 去 除 沪 


FE 释 
text=text.replace(/[\n\r\t\v\f]/g,"");// 将 \n 等 转换 成 空格 


var data=text.split(/\st|\s*,\s*/);//L 


空格 或 


逗号 进行 分 隔 


for(var i=0;1i<data,.length;i++){f// 循 环 每 个 数 和 


数据 块 


data[i]=Number (data[i] ) ;// 转 换 成 一 个 数字 


if(isNaN(data[i]))continue main;// 转 换 ? 


类 败 则 中 止 
} 
// 现 在 根据 数据 和 元 素 的 data- 属 性 以 及 元 素 的 计算 样式 ， 来 计算 
// 迷 你 图 的 颜色 、 宽 度 、 高 度 和 Y 轴 的 范 讲 


var style=getComputedStyle(elt, null); 


Var color=style.color,; 


var height=parseInt(elt.getAttribute("data-height"))|| 


parseInt(style.fontSize)||20; 


var width=parseInt(elt.getAttribute("data-width"))|| 


data.length*(parseInt(elt.getAttribute("data-dx"))||height/6); 


var ymin=parseInt(elt.getAttribute("data-ymin"))|| 


Math.min.apply(Math, data); 


Var ymax=parseInt(elt.getAttribute("data-ymax"))|| 


Math.max.apply(Math, data); 


if(ymin>>=ymax)ymax=ymin+1;// 创 建 一 个 画布 元 素 


var canvas=document.createElement("canvas"); 


canvas .width=width;// 设 置 画布 尺 二 


canvas.height=height,; 


canvas .title=content;// 将 元 素 内 容 作为 工具 提示 


elt .innerHTML="";// 将 现 有 的 元 素 内 容 抹 除 


elt.appendchild(canvas );// 将 该 元 素 插 入 到 画布 中 


// 现 在 绘制 点 (i, data[i]), 转 换 成 画布 坐标 


Var context=canvas.getContext('2d"'); 


for(var i=0;i<data.length;it+){// 循 环 每 个 数据 点 


var x=width*i/data.length;// 缩 放 i 倍 


var y=(ymax-data[i])*height/(ymax-ymin);// 缩 放 data[i] 


context .1ineTo(x,y);// 首 先 调用 lineTo( ) 方 法 而 不 是 noveTo( ) 方 法 


} 


context .strokeStyle=color;// 设 置 迷 你 图 的 颜色 


context .stroke( );// 并 将 它 绘制 出 来 


} 

}); 

[1] 浅 绿色 、 黑 色 、 蓝 色 、 迪 红 色 、 灰 色 、 绿 色 、 扫 灰 色 、 宰 红色 、 藏 
青色 、 橄 槛 色 、 紫 色 、 红 色 、 银 色 、 深 青色 、 和 白色 和 黄色 。 
[2]. 夹 角 越 小 ， 笠 接 部 分 越 长 。 


[3]. 在 撰写 本 书 时 ，Google 的 Chrome 浏 览 器 (版 本 5) 把 这 弄 错 了 并 变 
换 了 阴影 的 偏 移 量 。 


第 22 章 HTMLS5 API 


HTML5 不 仅仅 指 的 是 最 新 版 的 HTML 标 准 ， 它 还 指 代 目前 一 整套 的 
Web 应 用 技术 ， 其 中 包括 HTML 相 关 技 术 。 这 里 所 谓 的 Web 应 用 技术 更 
正规 的 术语 其 实 是 开放 的 Web 平 台 。 然 而 ， 在 实际 开发 过 程 

中 ，"HTML5" 更 像 一 个 方便 的 简写 ， 本 章 就 是 以 这 种 方式 使 用 它 的 。 
一 些 新 的 HTML5 API 在 本 书 的 如 下 其 他 章节 做 了 介绍 : 


-第 15 章 介绍 了 g etElementsByClassName() 方 法 和 querySelectorAll() 方 法 
以 及 文档 元 系 的 dataset 属 性 。 


.第 16 章 介绍 了 元 素 的 classList 属 性 。 


.第 18 章 介绍 了 XMLHttpRequest Level 2、 跨 域 HTTP 请 求 ,以 及 在 服务 端 
发 送 事件 标准 中 定义 的 EventSource API 。 


.第 20 章 介绍 了 Web 存 储 API 和 用 于 离线 web 应 用 的 应 用 缓存 。 
.第 21 章 介绍 了 < audio>、<video> 和 <<canvas> 元 素 以 及 SVG 图 形 。 
本 章 将 介绍 其 他 的 一 些 HTML5 API， 如 下 所 示 : 


:22.1 节 将 介绍 地 理 位 置 APL, 它 能 够 允许 浏览 器 (用 户 允 许 的 情况 ) 检测 
用 户 的 物理 位 置 。 


:22.2 记 将 介绍 历史 管理 API， 它 允许 Web 应 用 保存 和 更 新 它们 的 状态 ， 
en 无 须 刷 新 立即 做 
Holy ° 


.22.3 玫 将 介绍 在 非 同 源 文 档 间 传递 消 妃 的 一 个 商 单 的 API。 该 API 提 供 
了 同 源 安全 策略 下 〈 参 见 13.6.2 节 ) 解决 跨 域 问题 安全 性 的 方案 。 


22.4 广 将 介绍 HTML5 中 一 个 主要 的 新 特性 ， 能 在 一 个 独立 的 后 台 线 程 
中 运行 JavaScript 人 代码， 并 且 能 够 让 这 些 worker 线 程 出 之 间 能 够 进行 安 
全 的 通信 。 


:22.5 节 将 介绍 一 些 与 字 节 数组 和 数字 数组 相关 的 专用 高 效 内 存 类 型 。 


22.6 太 将 介绍 Blob: 不 透明 的 数据 块 ， 作 为 中 心 数据 交换 格式 ， 用 于 
一 些 新 的 二 进 制 数 据 API。 该 节 还 将 介绍 一 些 与 Blob 相 关 的 类 型 和 
API: File 和 FileReader 对 象 、BlobBuilder 类 型 以 及 Blob URL 。 


22.7 让 将 介绍 文件 系统 API， 它 允许 Web 应 用 对 一 个 私有 沙 箱 文 件 系 统 
中 的 文件 进行 读 / 写 操作 。 该 API 还 不 稳定 ， 因 此 在 第 四 部 分 中 也 没有 
对 其 做 介绍 。 


:22.8 六 将 介绍 IndexedDB API， 它 用 于 在 一 个 简单 的 数据 库 中 存储 和 获 
取 对 象 。 和 Filesytem API 一 样 ， 该 API 也 还 不 稳定 ， 因 此 在 第 四 部 分 中 
也 没有 对 其 做 介绍 。 


.最 后 22.9 节 将 介绍 Web 套 接 字 API: 它 允 许 Web 应 用 使 用 基于 流 的 双向 
通信 网 络 连 接 到 服务 器 ， 而 不 是 利用 XMLHttpRequest 支 持 的 无 状态 的 
请 求 / 啊 应 的 网 络 模型 。 


本 章 要 介绍 的 这 些 特性 要 么 是 不 适合 将 它们 放 在 前 面 章 市 中 介绍 ， 要 
么 殊 是 由 于 它们 还 不 够 稳定 和 成 熟 ， 无 法 将 它们 放 在 本 书 主要 的 章 市 
中 介绍 。 其 中 有 些 API 看 似 已 经 足够 稳定 可 以 在 第 四 部 分 中 介绍 ， 然 而 
它们 在 其 他 一 些 场景 下 ， 还 是 会 出 问题 ， 因 此 没有 在 本 书 第 四 部 分 中 
介绍 。 此 外 ， 这 里 要 说 明 的 是 ， 在 本 书 出 版 之 时 ， 本 章 中 除了 例 22-9 
外 ， 其 他 的 例子 部 至 少 可 以 在 一 个 剂 览 器 中 运行 。 因 为 这 里 介绍 到 的 
HTML5 标 准 一 直 都 在 不 断 完善 中 ， 也 就 是 说 ， 当 你 正在 阅读 本 章 的 时 
候 ， 其 中 有 些 例子 可 能 都 已 经 根本 无 法 运行 了 。 


22.1 地 理 位 置 


地 理 位 置 API (http://www.w3.org/TR/geolocation-API/) 允许 JavaScript 
程序 向 浏览 器 询问 用 户 真 实 的 地 理 位 置 。 识 别 地 理 位 置 的 一 些 应 用 天 
可 以 使 用 它 来 显示 地 图 、 导 航 和 其 他 一 些 和 用 户 当 前 位 置 相关 的 信 

上 县。 当然 ， 考 虑 到 这 些 信息 率 涉 用 户 的 隐私 ， 文 持 地 理 位 置 API 的 浏览 
右 在 JavaScript 程 序 获 取 用 户 物 理 位 置 前 总 是 会 询问 用 户 是 否 允 许 。 


支持 地 理 位 置 API 的 浏 宽 絮 会 定义 navigator.geolocation。 此 属性 指 代 一 
个 拥有 如 下 这 三 个 方法 的 对 象 : 


navigator.geolocation.getCurrentPosition() 


获取 用 户 当 前 位 置 。 
navigator.geolocation.watchPosition() 


获取 当前 位 置 ， 同 时 不 断 地 监视 当前 位 置 ， 一旦 用 户 位 置 发生 更 改 ， 
束 会 调用 指定 的 回调 函数 。 


navigator.geolocation.clearWatch() 


停止 监视 用 户 位 置 。 传 递 给 此 方法 的 参数 应 当 是 调用 watchPosition() 方 
法 获得 的 返回 值 。 


在 包含 GPS 硬件 的 设备 上 ， 通 过 GPS 单元 可 以 获取 精确 的 位 置信 息 。 不 
过 ， 绝 大 多 数 情 况 下 ， 位 置信 息 都 是 通过 Web 获 取 的 。 当 浏览 器 提交 
Internet IP 地 址 给 一 个 Web 服 务 的 时 候 ， 该 服务 通常 能 够 知道 (基于 ISP 
记录 ) 该 IP 属 于 哪个 城市 (通常 广告 商会 在 服务 器 端 这 么 做 ) 。 浏 览 
铬 个 可 以 通过 请 求 操 作 系 统 获取 附近 无 线 网 络 的 列表 和 它们 的 信号 强 
度 ， 来 得 到 更 加 精确 的 位 置信 息 。 当 将 这 些 信息 提交 给 高 级 的 Web 服 务 
的 时 候 ， 人 允许 非常 精确 地 计算 位 置 (通常 在 一 个 城市 范围 中 ) 。 


这 些 地 理 位 置 相 关 的 技术 都 包含 通过 网 络 的 数据 交换 或 者 和 多 个 卫星 
之 间 的 通信 ， 因 此 地 理 位 置 API 是 异步 的 : getCurrentPosition() 方 法 和 

watchPosition() 方 法 需要 接受 一 个 回调 函数 作为 参数 ， 在 判断 用 户 的 位 
置信 息 (或 者 当 位 置 改变 信息 ) 上 时， 浏览 器 会 调用 该 范 数 。 如 下 代码 
展示 了 一 个 获取 位 置 的 简单 例子 ; 


navigator ,geolocation,getCcurrentPosition(function(pos){ 


var latitude=pos.coords.1latitude,; 


var longitude=pos.coords.longitude; 


alert("Your position:"+latitude+","+longitude); 


}); 


除了 经 度 和 纬度 外 ， 凡 是 成 功 获取 到 的 地 理 位 置信 息 还 包括 一 个 精度 
值 〈 米 为 单位 ) ， 该 值 表示 获取 到 的 位 置信 息 精 度 是 多 少 。 如 例 22-1 所 
示 : 它 调用 getCurrentPosition() 方 法 来 获取 当前 位 置 ， 并 用 获取 到 的 位 
置信 息 ， 在 一 张 地 图 中 (来 自 Google 地 图 ) 中 显示 当前 位 置 ， 并 且 当 
前 位 置 是 根据 位 置 精 度 进行 过 适当 的 缩放 。 


例 22-1: 通过 获取 地 理 位 置信 息 在 地 图 上 显示 当前 位 置 


// 返 回 一 个 新 创建 的 < img > 元 素 ， 该 元 素 用 于 在 获取 到 地 理 位 置信 息 后 ， 显 示 一 张 Google 地 图 ， 


// 该 地 图 上 显示 了 当前 的 位 置 。 要 注意 的 是 ， 此 函数 的 调用 者 必须 要 将 返回 的 元 素 


// 插 入 到 文档 中 ， 以 使 它 可 见 


已 2 
E&F 


// 如 果 当 前 浏览 器 不 支持 地 API， 则 抛 出 一 个 错误 


function getmap( ){// 检 查 是 否 支 持 地 理 位 置 API 


> 


if(!navigator.geolocation)throw"Geolocation not supported";// 创 建 一 个 新 的 < img > 元素 ， 


始 请 求 地 理 位 置信 息 ， 


//img 元 素 显 示 包 含 当 前 位 置 的 地 图 ， 然 后 再 将 返回 该 图 


-JF 


var image=document.createElement("img"); 


navigator.geolocation.getCurrentPosition(setMapURL); 


return image;// 当 (如果) 成 功 获取 到 地 理 位 置信 息 后 ， 会 在 返回 jmage 对 象 后 调用 此 方法 


function setMapURL(pos ){// 从 参数 对 象 (pos) 中 获取 位 置信 息 


var latitude=pos.coords.1Latitude;// 经 度 


var longitude=pos.coords.longitude;// 纬 度 


var accuracy=pos.coords.accuracy;// 米 


// 构 造 一 个 URL ， 3 请 求 张 显 示 当 前 位 草 的 静态 G600gle 地 名 


var url="http://maps.google.com/maps/api/staticmap"+ 


"?center="+latitude+", "+longitude+" 尺 size=640x640&&sensor=true";// 设 置 一 个 大 致 的 缩放 级 别 


var zoomlevel=20;// 以 各 种 方式 开始 缩放 


if(accuracy>809)// 在 低 精 度 情况 下 进行 放大 


zoomlevel-=Math.round(Math.log(accuracy/50)/Math .LN2); 


ur1+="Sszoom="+zoomlevelL;// 将 缩放 级 别 添加 到 URL 中 


// 现 在 在 Image 对 象 中 显示 该 地 图 。 感 谢 Google 


image.src=url; 


} 


地 理 位 置 API 还 有 如 下 一 些 特性 ， 例 子 22-1 中 没有 体现 : 


.除了 第 一 个 回调 函数 的 下，getCurrentPosition() 方 法 和 
watchPosition() 方 法 还 接受 第 二 个 可 选 的 回调 函数 ， 当 获取 地 理 位 置信 
县 失败 的 时 候 ， 会 调用 该 回调 珊 数 : 


除了 成 功 和 失败 情况 下 的 回调 函数 这 两 个 参数 之 外 ， 这 两 个 方法 还 接 
受 一 个 配置 对 象 作 为 可 选 的 第 三 个 参数 。 该 对 象 的 属性 指定 了 是否 需 
要 高 精度 的 位 置信 息 ， 该 位 置信 息 的 过 期 时 间 ， 以 及 允许 系统 在 多 长 
时 间 内 获取 位 置信 息 。 


作为 参数 传递 给 成 功 和 请 况 a 芳 数 的 对 象 ， 还 包含 一 个 时 间 惟 ， 
也 有 可 能 (在 某 些 设备 上 ) 包含 诸如 海拔 、 速 度 和 和 访 向 之 类 的 额外 信 


O 
/Un 


例 22-2 展 示 了 如 何 使 用 这 些 额 外 的 特性 。 
例 22-2: 展示 如 何 使 用 所 有 地 理 位 置 特性 


// 异 步 的 获取 我 的 位 置 ， 并 在 指定 的 元 素 中 展示 出 来 


function whereami(elt){// 将 此 对 象 作为 第 三 个 参数 传递 给 getcurrentPosition( ) 方 法 


var options={// 设 置 为 true， 表 示 如 果 可 以 的 话 


// 获 取 高 精度 的 位 置信 息 〈 例 如 ， 通 过 GPS 获取 ) 


// 但 是 ， 要 注意 的 是 ， 这 会 影响 电池 寿命 


enableHighAccuracy:false, // 可 以 近似 ， 这 是 默认 值 


// 如 果 获 取 缓 存 过 的 位 置信 息 就 足够 的 话 ， 可 以 设置 此 属性 


// 默 认 值 为 9, 表示 强制 检查 新 的 位 置信 息 


maximumAge :300000, //5 分 钟 左 后 


~ 
SS 
鳃 

溃 


意 等 待 多 长 时 间 来 获取 位 置信 息 ? 


// 默 认 值 为 无 限 长 [2]-， getCurrentPosition() 方 法 永 不 超时 
timeout :15000// 不 要 超过 15 秒 


}; 


if(navigator .geolocation)// 如 果 支 持 的 话 ， 就 获取 位 


ee 


[EN 


navigator.geolocation.getCurrentPosition(success,error,options),; 


else 


丹 


失败 的 时 候 ， 


elt.innerHTM1L="Geolocation not supported in this browser";// 当 获取 位 置信 乱 


此 函数 


function error(e){//error 对 象 包 含 一 些 数字 编码 和 文本 消息 ， 如 下 所 示 : 


//1: 用 户 不 允许 分 享 他 /她 的 位 置信 息 


让 


/V/2 :浏览 器 无 法 确定 位 


//3 :发 生 超 时 


elt.innerHTML="Geolocation error"+e.code+":"+e.message; 


// 当 获取 位 置信 息 成 功 的 时 候 ， 会 调用 此 函数 


function success(pos){// 总 是 可 以 获取 如 下 这 些 字段 


UD 


// 但 是 要 注意 的 是 时 间 枚 信息 在 outer 对 象 中 ， 而 不 在 inner、coords 对 和 象 中 


var msg="At"+ 


new Date(pos.timestamp).toLocaleString()+"you were within"+ 


pos.coords.accuracy+t+"meters of latitude"+ 


pos.coords.latitude+"longitude"+ 


pos.coords.longitude+".";// 如 果 设 备 还 返回 了 海拔 信息 ， 则 将 其 添加 进去 


if(pos.coords.altitude)t{ 


msg+="You are"+pos.coords.altitude+"+"+ 


pos.coords.altitudeAccuracy+"meters above sea level."; 


// 如 果 设 备 还 返 


了 速度 和 航向 信息 ， 也 将 它们 添加 进去 


if(pos.coords.speed){ 


msg+="You are travelling at"+ 


pos.coords.speed+"m/s on heading"+ 


pos.coords ,heading+","， 


} 


elt .innerHTML=msg;// 显 示 所 有 的 位 置信 息 


} 


上 


22.2 历史 记录 管理 


Web 浏 多 器 会 记录 在 一 个 窗口 中 载 入 的 所 有 文档 ， 同 时 提供 了 “后 

退 ” 和 “前 进 ” 按 钮 ， 人 允许 用 户 在 这 些 文档 之 间 切 换 浏 咒 。 这 种 麟 览 占 历 
史记 录 模 型 最 早 在 “文档 部 是 被 动 的 ， 所 有 的 计算 者 在 服务 器 上 完 

成 ”那个 时 期 就 已 经 存在 了 。 如 今 ，Web 应 用 通常 都 是 动态 地 生成 或 载 
入 页 面 内 容 ， 并 在 无 须 刷 新 页 面 的 情况 下 就 显示 新 的 应 用 状态 。 如 采 
想 要 提供 用 户 能 够 通过 浏览 右 的 “后 退 " 和 “前 进 ” 按 钮 ， 直 观 地 切换 应 用 
状态 ， 像 这 类 应 用 吏 必 须 目 己 处 理应 用 的 历史 记录 管理 。HTML5 定 义 
了 两 种 用 于 历史 记录 管理 的 机 制 。 


其 中 比较 简单 的 历史 记录 管理 技术 或 是 利用 location.hash 和 hashchange 
事件 。 截 至 撰写 本 书 时 ， 这 种 技术 一 直 也 是 比较 广泛 实现 的 : 浏 唤 器 
甚至 在 HTML5 标 准 化 之 前 就 已 经 开始 实现 该 技术 了 。 在 绝 大 多 数 浏 宽 
器 中 (IE 早 期 版 本 除外 ) ， 设 置 location.hash 属 性 会 更 新 显示 在 地 址 栏 
中 的 URL， 同 时 会 在 浏览 絮 的 历史 记录 中 添加 一 条 记录 。hash 属 性 设置 
URL 的 片段 标识 符 ， 通 常 是 用 于 指定 要 深 动 到 的 文档 中 某 一 部 分 的 
ID。 但 是 location.hash 不 一 定 非 要 设置 为 一 个 元 素 的 ID: 它 可 以 设置 成 
任何 的 字符 串 。 如 果 能 够 将 应 用 状态 编码 成 一 个 字符 串 ， 束 可 以 使 用 
该 字符 串 作 为 片段 标识 符 。 


设置 了 location.hash 属 性 后 ， 接 下 来 要 实现 允许 用 户 通 过 “后 退 ” 和 “前 
进 ” 按 钮 来 切换 不 同 的 文档 状态 。 这 个 时 候 ， 应 用 必须 要 想 办 法 检测 状 
态 变化 ， 以 便 它 能 够 读 取出 存储 在 片段 标识 符 中 的 状态 并 相应 地 更 新 
目 己 的 状态 。 文 持 HTML5 的 浏 斋 器 一 旦 发 现 片 段 标识 符 发 生 了 改变 ， 
就 会 在 Window 对 和 象 上 触发 一 个 hashchange 事 件 。 这 样 ， 在 支持 
hashchange 事 件 的 浏览 右 中 ， 残 可 以 通过 设置 window.onhashchange 为 一 


个 处 理 程序 函数 ， 使 得 每 次 由 于 切换 历史 记录 导致 片段 标识 符 变 化 的 
时 候 ， 都 会 调用 该 处 理 程序 函数 。 当 调用 该 处 理 程序 函数 的 时 候 ， 就 
1 ， 然 后 使 用 该 值 包 含 的 状态 信息 来 重 
狐 显 示 应 用 。 


HTML5 还 定义 了 一 个 相对 更 加 复杂 和 强健 的 历史 记录 管理 方法 ， 该 方 
法 包含 history.pushState() 方 法 和 popstate 事 件 。 当 一 个 Web 应 用 进入 一 个 
新 的 状态 的 时 候 ， 它 会 调用 history.pushState() 方 法 将 该 状态 添加 到 浏览 
器 的 浏览 历史 记录 中 。 该 方法 的 第 一 个 参数 是 一 个 对 象 ， 该 对 象 包含 
用 于 恢复 当前 文档 状态 所 需 的 所 有 信息 。 该 对 象 可 以 是 任何 能 够 通过 
JSON.stringify0 方 法 转换 成 相应 字符 串 形 式 的 对 象 ， 也 可 以 是 其 他 类 似 
Date 和 RegExp 这 样 特定 的 本 地 类 型 (参见 下 面 的 补充 内 容 ) 。 该 方法 
的 第 二 个 可 选 参数 是 一 个 可 选 的 标题 (普通 的 文本 字符 串 ) ， 浏 览 吉 
可 以 使 用 它 〈 比 如 ， 在 一 个 <Back> 菜 单 中 ) 来 标识 浏览 历史 记录 中 
保存 的 状态 。 该 方法 的 第 三 个 参数 是 一 个 可 选 的 URL， 表 示 当 前 状态 
的 位 置 。 相 对 的 URL 都 是 以 文档 的 当前 位 置 为 参照 ， 通 党 该 URL 只 是 
简单 地 指定 URL (诸如 #state) 这 样 的 hash (或 者 “片段 标识 符 ”) 部 

分 。 将 一 个 URL 和 状态 关联 ， 可 以 允许 用 户 将 应 用 的 内 部 状态 作为 书 
签 添加 到 浏 斋 器 中 ， 并 当 在 URL 中 包含 足够 信息 的 时 候 ， 应 用 可 以 在 
从 书签 中 载 入 的 时 候 束 恢复 它 的 状态 。 


结构 性 复制 


正如 上 面 所 提 到 的 ，pushState0) 方 法 接受 一 个 状态 对 象 并 为 该 对 和 象 创建 
一 份 私有 副本 。 这 是 对 一 个 对 象 进行 深 堵 贝 或 者 深 复 制 : 它 会 递归 地 
复制 所 有 埠 套 对 象 或 者 数组 的 内 容 。HTML5 标 准将 这 类 复制 称 为 “结构 
性 复制 ” (structured clone) 。 创 建 一 个 结构 性 复制 的 过 程 就 好 比 是 将 一 
个 对 象 传递 给 JSON.stringify(0) 方 法 ， 然 后 再 将 结果 字符 串 传 递 给 
JSON.parse() 方 法 〈 参 见 6.9 节 ) 。 但 是 JSON 只 支持 JavaScript 的 基础 类 
型 和 对 象 以 及 数组 。 在 HTML5 标 准 中 提 到 ， 结 构 性 复制 算法 必须 还 能 
够 复制 Date 对 象 、RegExp 对 象 、ImageData 对 象 (来 自 <canvas> 元 
素 : 参见 21.4.14 节 ) 、FileList 对 象 、File 对 象 以 及 Blob 对 象 (在 22.6 节 
介绍 ) 。 但 是 在 结构 性 复制 算法 中 会 显 式 排除 JavaScript 中 的 函数 和 错 
误 以 及 绝 大 部 分 诸如 和 窗口、 文档 、 元 素 等 这 类 宿主 对 象 。 或 许 还 不 会 
存储 文件 或 者 图 片 数据 作为 历史 状态 的 一 部 分 ， 但 是 结构 性 复制 还 被 
其 他 一 些 HTML5 相 关 的 标准 用 到 ， 在 本 章 其 他 地 方 ， 还 会 对 其 做 相应 


有 个 绍 % 


除了 pushSstate(0) 方 法 之 外 ， History 对 象 还 定义 了 replaceState0 万 法 ， 该 
方法 和 pushState() 方 法 接受 同样 的 参数 ， 但 是 不 同 的 是 ， 它 不 是 将 新 的 
状态 添加 到 浏览 历史 记录 中 ， 而 是 用 新 的 状态 代 蔡 当前 的 历史 状态 。 


当 用 户 通 过 “后 退 ”" 和 “前 进 ” 按 钮 浏览 保存 的 历史 状态 时 ， 浏 哎 妖 会 在 
Window 对 象 上 触发 一 个 popstate 事 件 。 与 该 事件 相关 联 的 事件 对 象 有 一 
1 0 对 性 包含 传递 给 pushState() 方 法 的 状态 对 象 的 副本 ( 男 
= = 复 钉 o 


例 22-3 十 一 个 简单 的 Web 应 用 一 一 如 图 22-1 所 示 的 一 个 猜 数 字 的 游戏 
一 一 它 使 用 这 些 HTML5 技 术 来 保存 应 用 记录 ， 人 允许 用 户 通 过 “后 退 ” 来 
回顾 或 者 撤销 对 数字 的 猜测 。 
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图 22-1 一 个 猜 数 字 游 戏 


在 本 书 出 版 时 ，Firefox 4 对 历 史记 录 AP 做 了 两 点 修改 ， 其 他 的 浏 贤 履 
可 能 也 会 跟着 进行 这 两 点 修改 。 和 Firefox 4 使 得 History 对 象 目 身 可 
以 通过 state 属 性 获取 当前 状态 ， 这 就 意味 着 新 载 入 的 页 面 无 须 等 待 一 个 
popstate 事 件 。 第 二 ， 对 于 没有 任何 保存 状态 的 新 载 入 的 页 面 ， 


4 不 再 出 发 popstate 事 件 。 第 二 点 修改 意味 着 下 面 这 个 例子 在 Firefox 4 将 
无 法 工作 。 


例 22-3: 使 用 pushState() 方 法 进行 历史 记录 管理 


<!DOCTYPE html> 
<html><head> <title>I'm thinking of a number...</title> 


<script> 


window.onload=newgame;// 页 面 载 入 的 时 候 就 开始 一 个 新 的 游戏 


让 


window.onpopstate=popState;// 处 理 历史 记录 相关 事 


var state, ui;// 全 局 变量 ， 在 newgame( ) 方 法 中 会 对 其 初始 化 


function newgame(playagain){// 开 始 一 个 新 的 猜 数 字 游 戏 


// 初 始 化 一 个 包含 需要 的 文档 元 素 的 对 象 


Ui={ 


heading:null, // 文 档 最 上 面 的 <hi> 元 素 


prompt :null, // 要 求 用 户 输入 一 个 猜测 数字 


input:null, // 用 户 输入 猜测 数字 的 地 方 


low:null, // 可 视 化 的 三 个 表格 单元 格 


| 


mid:nul1, // 猜 测 的 数字 范 


high:null 


};// 查 询 这 些 元 素 中 每 个 元 素 的 id 


for(var id in ui)ui[id]=document.getElementById(id);// 给 input 字 段 定 义 一 个 事件 处 理 程序 范 数 


ui,input.onchange=handleGuess;// 生 成 一 个 随机 的 数字 并 初始 化 游戏 状态 


state=f{ 


n:Math.floor(99*Math.random())+1,// 整 数 : 9<n<100 


mn 
utr 


low:0,// 可 猜测 数字 范围 的 下 限 


high:109, // 可 猜测 数字 范围 的 上 限 


guessnum: 9, // 猜 测 的 次 数 


三 


guess:undefined// 最 后 一 次 猜 涡 


};// 修 改 文档 内 容 来 显示 该 初始 状态 


display(state);// 此 函数 会 作为 onload 事 件 处 理 程序 调用 ， 


// 同 时 当 单 击 显示 在 游戏 最 后 的 "再 玩 一 次 "按钮 时 候 ， 也 会 调用 


[ 宗 


// 在 第 二 种 调用 情况 下 ，playagain 参 数值 为 true 


// 如 果 playagain 为 true， 则 保存 新 的 游戏 状态 


// 但 是 如 果 是 作为 onload 事 件 处 理 程序 调用 的 情况 下 ， 则 不 保存 状态 


// 这 是 因为 ， 当 通过 浏览 器 历史 记录 从 其 他 文档 状态 回 退 到 当前 的 游戏 状态 时 ， 


// 也 会 触发 1oad 事 件 。 如 果 这 种 情况 下 ， 也 保存 状态 的 话 ， 


// 会 将 真正 的 游戏 历史 状态 记录 覆盖 掉 


// 在 支持 pushstate( ) 方 法 的 浏览 器 中 ，1load 事 件 之 后 总 是 有 一 个 popstate 事 人 


// 因 此 ， 这 里 的 处 理 方式 是 ， 等 待 popstate 事 件 而 不 是 直接 进行 状态 保存 


// 如 果 该 事件 提供 一 个 状态 对 象 ， 则 直接 使 用 该 对 象 即 可 


// 如 果 该 事件 没有 状态 对 象 ， 就 表示 这 实际 上 是 一 个 新 的 游戏 ， 


// 则 使 用 replaceState 来 保存 最 新 的 游戏 状态 


if(playagain===true)savel(state); 


// 如 果 支 持 的 话 ， 就 使 用 pushSstate( ) 方 法 将 游戏 状态 保存 到 浏览 器 历史 记录 中 


function Save(State){ 


if(!history.pushstate)return;// 如 果 pushstate( ) 方 法 没有 定义 的 话 ， 则 什么 也 不 做 


// 这 里 会 将 一 个 保存 的 状态 和 URL 关 联 起 来 


// 该 URL 显 示 猜 测 的 数字 ， 但 是 不 对 游戏 状态 进 


疝 人 3 ， 


一 
dl 
NSS 


// 因 此 ， 这 对 于 书签 是 没有 用 的 


六 


// 不 能 简单 地 将 游戏 状态 写 到 URL 中 ， 因 为 这 会 将 游戏 一 些 机 密 数 字 暴 露 在 地 址 栏 中 


var url="#guess"+state.guessnum;// 保 存 状态 对 象 和 URL 


history.pushSstate(state,// 要 保存 的 状态 对 象 


"",// 状 态 标 题 ， 当 前 浏览 器 会 忽略 它 


Url);// 状 态 URL: 对 书签 是 没有 用 的 


i 


处 理 程序 ， 用 于 恢复 历史 状态 


// 这 是 onpopstate 的 寻 


function popState(event){ 


if(event .state){// 如 果 事 件 有 一 个 状态 对 象 ， 则 恢复 该 状态 


// 要 注意 的 是 ，event .state 是 对 已 保存 状态 对 象 的 一 个 深 拷 贝 


// 因 此 无 须 改变 保存 的 值 就 可 以 修改 该 对 象 


state=event ,state;// 恢 复 历史 状态 


display(state);// 显 示 恢 复 的 状态 


else{f// 当 第 一 次 载 入 页 面 时 ， 会 触发 一 个 没有 状态 的 popstate 事 


ul 
Er 
I 


// 用 真实 的 状态 将 nu11 状 态 圭 换 掉 : 参见 newgame( ) 方 法 中 的 注释 


// 这 里 不 需要 调用 display( ) 方 法 


history.replaceSstate(state,"","#guess"+state.guessnum); 


}; // 每 次 用 户 猜测 一 个 数字 的 时 候 ， 都 会 调用 此 事件 处 理 程序 


向 
uu 


// 此 处 理 程序 用 于 更 新 游戏 的 状态 、 保 存 游 戏 状态 并 显示 游戏 状态 


汰 取 用 户 猜测 的 数 


SS 


function handleGuess(){// 从 input 字 上段 中 


[CS 
mn 
dtr 
I 
Da 


var g=parseInt(this.value);// 如 果 该 值 是 限定 的 一 个 数字 


Tm 


if((g>state.low)&&&(g<state.high)){// 对 应 地 更 新 状态 对 象 


if(g<state.n)state.1low=g; 


else if(g>state.n)state.high=g; 


state.guess=g; 


state .guessnum++;// 在 浏览 器 历史 记录 中 保存 新 的 状态 


户 猜 测 情况 来 修改 文档 


save(state);// 根 4 


HU 


display(state); 


else{f// 无 效 的 猜测 : 不 保存 状态 


alert("Please enter a _ number greater than"+state.1low+ 


"and less than"+state.high); 


// 修 改 文档 来 显示 游戏 当前 状态 


function display(state)f{// 显 示 文 档 的 导航 和 标题 


ui,.heading.innerHTML=document .title= 


"I'm thinking of a number between"+ 


mn 


utr 


state.low+t+"and"+state.high+".";// 使 用 一 个 表格 来 显示 数字 的 取 值 范 


ui,low,.style.width=state.1low+"%",; 


ui,.mid,.style.width=(state.high-state.1ow)+"%",; 


ui,high.style.width=(100-state.high)+"%";// 确 保 input 字 段 是 可 见 的 、 空 的 并 且 是 聚焦 的 


ui,input.style.visibility="visible",; 


ui,input.value="",; 


ui .input.focus();// 根 据 用 户 最 近 的 猜测 ， 设 置 提示 


if(state.guess===undefined) 


ui.,prompt.innerHTML="Type your guess and hit Enter:",; 


else if(state.guess<state.n) 


ui,.prompt.innerHTML=state.guess+"is too low.Guess again:"; 


else if(state.guess>state.n) 


ui,.prompt.innerHTML=state.guess+"is too high.Guess again:"; 


else{// 当 猜 对 了 的 时 候 ， 就 隐藏 input 字段 并 显示 "再 玩 一 次 " 按 锂 


ui,input.style.visibility="hidden" ;// 不 需要 再 猜 了 


ui,.heading.innerHTML=document.title=state.guess+"is correct!"; 


ui,.prompt.innerHTML= 


"You Win!<button onclick='newgame(true)'>Play Again</button>"; 


</script> 


<style>/* 通 过 CSS 样 式 美化 游戏 界面 */ 


#prompt{font-size:16pt;} 


table{width:90%;margin:10px;margin-left:5%,;} 


#1low,#high{background-color:lightgray;height:1em;} 


#mid{background-color:green;} 


</style> 


</head> 


<body> <!-- 下 面 的 HTML 元 素 是 游戏 的 UI- - > 


< 1!- -游戏 标题 和 数字 猜测 范 


的 文本 表示 - - > 


J 


<h1i id="heading">I'm thinking of a number...</hi> 


<!-- 用 于 确保 猜测 的 数字 在 有 效 范 围 内 - - > 


<table><tr><td id="low"></td><td id="mid"></td><td id="high"></td></tr> 


</table> 


<1!- -用 户 输入 猜测 数字 的 地 方 - - > 


<label id="prompt"></label><input id="input"type="text"> 


</body> </html> 


22.3” 跨 域 消息 传递 


正如 14.8 市 提 到 的 ， 一 些 浏览 器 窗口 和 标签 之 间 都 是 完全 相互 独立 的 ， 
在 其 中 一 个 窗口 或 者 标签 中 运行 的 代码 在 其 他 窗口 或 标签 中 完全 无 法 
识别 。 但 是 ， 在 其 他 的 一 些 场景 下 ， 当 脚本 显 式 打开 一 个 新 窗口 或 者 
在 嵌 套 的 窗 体 中 运行 的 时 候 ， 多 个 窗口 或 者 窗 体 之 间 是 互相 可 识别 
的 。 如 有 果 筷 们 包含 的 文档 是 来 目 同一 合 Web 服 务 硼 ， 则 再 这 些 窗口 和 窗 
体 中 的 脚本 可 以 互相 之 间 进 行 区 互 和 操作 对 方 的 文档 。 


然而 ， 有 的 时 候 ， 尽 管 脚 本 可 以 引用 其 他 的 Window 对 象 ， 但 是 由 于 那 
个 窗口 中 的 内 容 是 来 自 于 不 同 的 源 ，Web 浏 览 器 (遵循 同 源 策略 ) 不 会 
允许 访问 其 他 窗口 中 的 文档 内 容 。 大 部 分 情况 下 ， 浏 上 大 还 不 允许 脚 
本 读 取 其 他 窗口 的 属性 或 调用 其 他 窗口 方法 。 不 过 有 个 window 方 法 ， 

是 允许 来 自 非 同 源 脚 本 调用 的 : postMessage() 方 法 ， 该 方法 允许 有 限 的 
通信 通过 异步 消息 传递 的 方式 在 来 自 不 同 源 的 脚本 之 间 。 这 
类 通信 机 制 是 在 HTML5 标 准 中 定义 的 ， 所 有 主流 的 浏览 器 (包括 IE8 和 和 
更 新 版 本 ) 都 已 经 实现 了 该 通信 机 制 。 这 项 技术 称 为 “ 跨 文档 消息 传 
递 ”， 而 由 于 该 API 是 定义 在 Window 对 象 上 的 ， 而 不 是 文档 对 象 上 的 ， 
因此 ， 它 又 称 为 “ 帘 口 间 消 轧 传 递 ” 或 者 “ 跨 域 消 忆 传递 ”。 


postMessage() 方 法 接受 两 个 参数 。 其 中 第 一 个 参数 是 要 传递 的 消息 。 
HTML5 标 准 提 到 ， 该 参数 可 以 是 任意 基本 类 型 值 或 者 可 以 复制 的 对 象 
(参见 22.2 节 的 “结构 性 复制 ”) ， 但是， 有些 当 前 浏览 器 (包括 Firefox 
4 beta 版 本 ) 的 实现 只 支持 字符 串 ， 因 此 ， 如 果 想 要 作为 消息 传递 对 象 
nn 


其 中 第 二 个 参数 是 一 个 字符 串 ， 指 定 目 标 窗口 的 源 。 其 中 包括 协议 、 
主机 名 以 及 URL (可 选 的 ) 端口 部 分 (可 以 传递 一 个 完整 的 URL， 但 
是 除了 协议 、 主 机 名 和 端口 号 之 外 的 任何 信息 都 会 包 略 ) 。 这 是 一 个 
安全 特性 : 由 于 恶意 代码 或 普通 用 户 都 可 以 在 窗口 中 浏览 新 的 未 知 文 
档 ， 因 此 postMessageO) 只 会 将 消息 传递 给 指定 的 窗口 ， 而 不 会 传递 给 包 
含 非 同 源 文档 的 窗口 。 当 然 ， 如 果 传 递 的 消息 不 包含 任 何 敏感 信息 的 
话 ， 并 且 愿 意 将 其 传递 给 任何 窗口 ， 就 可 以 直接 将 该 参数 设置 成 “*” 通 
0 。 如 采 要 指定 和 当前 窗口 同 源 的 话 ， 那 么 也 可 以 简单 地 使 
cj 。 


如 有 果 指 定 的 源 匹 配 的 话 ， 那 么 当 调 用 postMessage() 方 法 的 时 候 ， 在 目标 
窗口 的 Window 对 象 上 就 会 触发 一 个 message 事 件 。 在 目标 窗口 中 的 脚本 
则 可 以 定义 通知 message 事 件 的 处 理 程序 函数 。 调 用 该 事件 处 理 程序 的 
时 候 会 传递 给 它 一 个 拥有 如 下 属性 的 事件 对 象 : 


data 


作为 第 一 个 参数 传递 给 postMessage() 方 法 的 消息 内 容 副 本 。 


source 
消息 源 自 的 window 对 象 。 

origin 

一 个 字符 串 ， 指 定 消息 来 源 (URL 形 式 ) 。 


通常 ，onmessage() 事 件 处 理 程序 应 当 首 先 检 测 其 中 的 origin 属 性 ， 忽 略 
来 目 未 知 源 的 消息 。 


当 想 要 在 Web 页 面 中 磐 入 一 个 来 目 其 他 站 点 的 模块 或 者 "gadget" 的 时 
修 ， 利 用 postMessage() 和 message 事 件 实现 的 跨 域 消 忆 传递 是 很 有 用 

的 。 当 然 ， 如 果 gadget 本 刁 承 很 帘 单 并 且 又 是 目 包 合 的 ， 束 可 以 直接 人 簿 
单 地 将 它 放 在 <iframe> 中 实现 隔离 即 可 。 然 而 ， 假 设 gadget 本 身 比 较 
复杂 ， 它 目 身 还 定义 了 一 些 API， 同 时 Web 页 面 需 要 利用 这 些 API 和 它 
进行 交互 。 这 个 时 候 ， 用 <iframe> 就 不 行 了 ， 而 如 果 将 它 租 入 在 < 
script> 元素 中 ， 它 可 以 提供 一 个 正常 的 JavaScript API， 但 是 同时 它 也 
可 以 完全 操控 页 面 和 页 面 内 容 了 。 目 前 在 Web 上 通常 不 会 这 样 去 做 〈 尤 
其 是 web 广 告 ) ， 哪 怕 信 任 第 三 方 站 点 ， 这 也 不 是 个 好 的 方案 。 


跨 域 消 忆 传递 提供 了 另外 一 种 实现 方案 : 首先 gadget 的 开发 者 可 以 将 
gadget 内 容 定 义 在 一 个 HTML 页 面 中 ， 它 负责 监听 message 事 件 ， 并 将 
它们 分 发 给 对 应 的 JavaScript 函 数 去 处 理 。 然 后 ， 租 入 gadget 的 Web 页 面 
残 可 以 通过 postMessage() 方 法 传递 消息 来 和 gadget 进 行 交 互 了 。 例 22-4 
和 例 22-5 展 示 了 如 何 使 用 该 方案 。 例 22-4 是 一 个 简单 的 gadget， 放 置 在 
<iframe> 中 ， 它 搜索 Twitter 并 将 匹配 指定 搜索 项 的 tweet 显 示 出 来 。 要 
让 它 实 现 真 正 的 搜索 功能 ， 包 含 的 页 面 只 需要 简单 地 作为 消息 传递 搜 
索 项 给 它 即 可 。 


例 22-4: Twitter 搜索 gadget， 由 postMessage(0) 来 控制 


<!DOCTYPE html> 


这 是 一 个 Twitter 搜索 gadget。 将 它 通过 iframe 的 形式 内 藤 在 任何 web 页面 中 ， 


通过 postMessage( ) 方 法 将 查询 字符 串 传 递 给 它 来 搜索 tweet“。 由 于 它 是 内 巷 在 


<iframe> 中 而 不 是 <script> 中， 因此 它 无 法 对 内 婴 它 的 页 面 造成 破坏 


<html> 


<head> 


<style>body{font:9pt sans-serif;}</style> 


<1-- 使 用 jQuery 的 jQuery .getJSON( ) 工 具 函 数 - - > 


<script src="http://code.jquery.com/jquery-1.4.4.min.js"/></script> 


<script>// 原 本 只 要 能 够 使 用 window.onmessage 就 可 以 了 ,但 是 考虑 到 早期 的 浏览 器 (比如 :; Firefox 3) 
不 支持 它 ， 因 此 ， 采 用 如 下 兼容 方式 实现 


if(window.addEventListener) 


window.addEventListener("message",handleMessage, false); 


else 


window.attachEvent("onmessage",handleMessage);//For IE8 


function handleMessage(e){// 不 在 意 消 息 来 源 ， 愿 意 接受 任何 来 源 的 Twitter 搜 索 请 求 


// 但 是 ， 希 望 消息 源 自 内 骨 gadget 的 


if(e.source!==window.parent)return; 


var searchterm=e.data;// 获 取 搜 索 内 容 


// 使 用 jQuery Ajax 工 具 函 数 以 及 Twitter 的 搜索 API 来 查找 匹配 消息 的 tweet 


jQuery.getJSON("http://search.twitter.com/search.json?callback=?", 


{9q:searchterm}, 


function(data){// 使 用 请 求 结果 调用 


var tweets=data.results;// 构 造 一 个 HTML 文 档 来 显示 搜索 结果 


var escaped=searchterm,.replace("<","&1t,;"); 


Var html="<h2>"+escaped+"</h2>",， 


if(tweets.1length==0){ 


html+="No tweets found"; 


elsef 


html+="<dl>";// 以 <dl> 列表 形式 呈现 结果 


for(var i=0;i<tweets.length;i++){ 


Var tweet=tweets[i]; 


var text=tweet ,text 


Var from=tweet .from_user ， 


Var tweeturl="http://twitter.com/#!/"+ 


from+"/status/"+tweet ,Id_str， 


html+="<dt><a target=' blank'href=' "+ 


tweeturl+"'>"+tweet.from user+ 


"</a></dt><dd>"+tweet,.text+"</dd>"，; 


html+="</dl>"; 


// 设 置 <iframe> 文 档 


document .body.innerHTML=html; 


}); 


$(function( ){// 通 知 内 嵌 gadget 的 页 面 [3]-， 


// 我 们 (gadget) 已 经 准备 就 绪 


// 容 器 在 没有 收 到 这 条 消息 前 ， 它 不 能 发 送 任何 消息 


// 因 为 我 们 还 没有 准备 好 接收 消息 


// 通 常 ， 容 器 只 需要 等 待 0n10ad 事 件 的 触发 ， 以 此 来 4 


旦 


知 所 


的 <iframe> 都 


已 


Ls 


载 入 


Eb 
完毕 


// 我 们 发 送 消 息 告诉 容器 已 经 准备 就 绪 ， 甚 至 有 可 能 在 容器 获得 onload 事 件 之 前 


// 我 们 并 不 知道 容器 的 源 ， 所 以 采用 "*" 来 让 浏览 器 把 消息 发 送 给 任何 


window.parent.postMessage("Twitter Search vO.1","*"),; 
}); 

</script> 

</head> 

<body> 

</body> 


</html> 


例 22-5 是 一 个 简单 的 JavaScript 文 件 ， 可 以 将 它 引 入 到 任何 想 要 使 用 
Twitter 搜索 gadget 的 Web 页 面 中 。 它 将 gadget 插 入 到 文档 中 ， 然 后 为 文 
档 中 所 有 的 链接 都 添加 一 个 事件 处 理 程序 ， 以 便当 鼠标 指针 划 过 一 个 
链接 的 时 候 ， 职 会 调用 postMessage() 方 法 ， 让 gadget 去 搜索 链接 上 的 
URL 指 定 的 内 容 。 这 可 以 允许 用 户 在 发 一 条 包含 网 站 内 容 的 tweet 时 
在 未 访问 该 站 点 前 束 能 够 完 看 到 网 站 内 容 。 


例 22-5: 通过 postMessage(0) 来 使 用 Twitter 搜索 gadget 


// 如 下 JS 代码 实现 将 Twitter 搜索 gadget 添 加 至 


2 

尘 

下 
| 
DH 


rr 


// 然 后 为 文档 中 所 有 的 链接 都 添加 一 个 事 人 


F 处 理 程序 


// 实 现 当 鼠标 指针 划 过 一 个 链接 的 时 候 ， 就 会 调用 postMessage( ) 方 法 


上 


让 gadget 去 搜索 链接 上 的 URL 指 定 的 内 容 。 这 可 以 允许 用 户 要 发 一 条 包含 网 站 内 容 的 tweet 时 


// 在 未 访问 该 站 点 前 就 能 够 先 看 到 网 站 内 容 


window.addEventListener("load",function(){// 在 IE9 以 下 的 版 本 无 效 


var origin="http://davidflanagan.com";//gadget 源 


var gadget="/demos/TwitterSearch.html";//gadget 路 径 


var iframe=document.createElement("iframe");// 创 建 iframe 


iframe.src=origin+gadget;// 设 置 它 的 URL 


iframe .width="250";//250 个 像素 宽 


iframe .height="100%" ;// 整 个 文档 高 度 


A 


浮动 


iframe.style.cssFloat="right";// 


// 将 该 iframe 插 入 到 文档 的 最 开始 


document .body .insertBefore(iframe,document ,body.firstchild);// 查 找 所 有 的 链接 ， 并 把 它们 绑 定 


到 gadget 上 


var links=document .getElementsByTagName("a"); 


for(var i=0;i<links.length;i++){//addEventListener 在 IE8 及 


期 版 本 无 效 


links[i].addEventListener("mouseover",function(){// 作 为 查询 


// 只 当 iframe 仍 然 显 示 来 自 davidflanagan .com 文 档 的 时 候 传递 它 


iframe.contentwindow.postMessagel(this.href,origin),; 


},false); 


},false); 


22.4 Web Worker 


并 


内 


N 


容 传递 ur1l 


客户 端 JavaScript 其 中 一 个 基本 的 特性 束 是 单线 程 : 比如 ， 浏 抽 器 无 法 
同时 运行 两 个 事件 处 理 程序 ， 它 也 无 法 在 一 个 事件 处 理 程 序 运 行 的 时 
候 触 发 一 个 计时 器 。 并 行 更 新 应 用 状态 和 文档 状态 根本 是 不 可 能 的 ， 
客户 端的 程序 员 也 不 需要 理解 或 者 关心 并 行 编程 。 之 所 以 设计 成 单线 
程 的 理论 就 是 ， 客 户 端的 JavaScript 函 数 必 须 不 能 运行 太 长 时 间 : 否则 
会 导致 循环 事件 ，Web 浏 哎 絮 无 法 对 用 户 输入 作出 啊 应 。 这 也 是 为 什么 
Ajax 的 API 都 是 异步 的 ， 以 及 为 什么 客户 端 JavaScript 不 能 使 用 一 个 简单 
的 异步 load0 函 数 或 者 requireO 画 数 来 加 载 JavaScript 库 。 


在 Web Workers 标 准 由 中 ， 定 义 了 解决 客户 端 JavaScript 无 法 多 线程 的 问 
题 。 其 中 定义 的 "Worker" 是 指 执行 代码 的 并 行 线程 。 不 过 ，Web 
Workers 处 在 一 个 目 包 含 的 执行 环境 中 ， 无 法 访问 Window 对 象 和 
Document 对 象 ， 和 主线 程 之 间 的 通信 也 只 能 通过 异步 消息 传递 机 制 来 
实现 。 这 就 意味 着 ， 并 行 地 修改 DOM 是 不 可 能 的 ， 不 过 ， 它 提供 了 一 
种 使 用 异步 API 的 方式 ， 同 时 允许 书写 需要 长 时 间 运 行 的 函数 而 不 会 这 
来 循环 事件 和 导致 浏览 器 天 省 的 问题 。 创 建 一 个 新 的 Worker 并 不 像 打 
开 一 个 新 的 浏览 器 窗口 那样 属于 重量 级 的 操作 ， 不 过 ，Worker 本 身 也 
不 是 轻 量 级 的 线程 ， 因 此 创建 一 些 新 的 Worker 去 处 理 次 要 的 操作 是 不 
划算 的 。 这 里 不 建议 创建 太 多 的 Worker (比如 成 百 上 千 个 ) ， 一 个 复 
杂 的 Web 应 用 一 般 包 含 几 十 个 Worker。 


和 任何 线程 API 一 样 ，Web Workers 标 准 包含 两 部 分 。 第 一 部 分 是 
Worker 对 象 : 该 对 象 是 暴露 给 创建 该 线程 的 线程 的 。 第 二 部 分 是 
WorkerGlobalScope: 这 是 一 个 用 来 表示 新 创建 的 Worker 的 全 局 对 象 ， 
也 是 Worker 线 程 内 部 使 用 的 对 象 。 下 面 儿 市 会 结合 例子 对 这 两 者 一 一 


做 介绍 。 


22.4.1 Worker 对 象 
要 创建 一 个 新 的 Worker， 只 须 使 用 Worker() 构 造 画 数 ， 并 将 指定 在 


Worker 中 运行 的 JavaScript 脚 本 的 URL 传 递 给 该 构造 画 数 即 可 ， 如 下 所 
修 \: 


var loader=new Worker("utils/loader.js"); 


如 果 URL 采 用 的 是 相对 路 径 ， 那 么 是 以 包含 调用 Worker0 构 霹 画 数 脚本 
的 文档 的 URL 为 参照 的 。 而 如 果 指 定 的 URL 采 用 的 是 绝对 路 人 径 ， 那 么 
必须 和 包含 该 脚本 的 文档 是 同 源 的 (同样 的 协议 、 主机 名 和 端口 ) : 


一 旦 获取 到 Worker 对 象 后 ， 就 可 以 通过 postMessage() 方 法 来 传递 参 数 
了 。 传 递 给 postMessage() 方 法 的 值 会 复制 (参见 22.2 节 的 “结构 性 复 
制 ”) ， 最 终 的 副本 会 通过 message 事 件 传递 给 Worker 。 


Loader .postMessage("file.txt")， 


要 注意 的 是 ，Worker 的 postMessage0 方 法 是 没有 参数 的 ， 而 Window 对 

象 的 postMessage() 方 法 是 有 的 〈 参 见 22.3 节 ) 。 还 有 ，Worker 的 

postMessage() 方 法 在 主流 浏 贤 器 中 都 会 正确 地 复制 消 轧 ， 不 像 

入 在 一 些 重要 的 浏 蜗 器 中 ， 对 字符 串 消 乱 仍然 是 
I 的。 


可 以 通过 监听 Worker 对 象 上 的 message 事 件 来 接收 来 自 Worker 的 消息 : 


worker .onmessage=function(e){ 


var message=e.data;// 从 事件 对 象 中 获取 消息 


console.1og("URL contents:"+message);// 用 它 进行 一 些 操作 


} 


如 条 Worker 抛 出 了 异 音 ， 并 且 


国 没有 对 其 进行 捕获 和 处 理 ， 可 以 
作为 监听 的 一 个 error 事 件 来 传递 该 


worker .onerror=function(e){// 记 录 错 误 消 息 日 志 : 包括 Worker 的 文件 名 和 行 数 


console.log("Error at"+e.filename+":"+e.linenot":"+ 


e.message); 


和 所 有 的 事件 目标 一 样 ，Worker 对 象 也 定义 了 标准 的 addEventListener() 
方法 和 removeEventListener() 方 法 ， 如 果 想 要 管理 多 个 事件 处 理 程序 ， 
可 以 使 用 这 些 方法 来 代替 onmessage 和 onerror 属 性 。 


Worker 对 象 还 有 另 一 个 方法 : terminate()。 该 方法 强制 一 个 Worker 线 程 


一 一 


结束 运行 。 


22.4.2 ”Worker 作 用 域 


在 通过 Worker() 构 造 画 数 创建 一 个 新 Worker 的 上 时候， 指定 了 包含 
JavaScript 代 码 文件 的 URL。 该 代码 会 运行 在 一 个 全 新 的 JavaScript 运 行 
环境 中 ， 完 全 和 创建 Worker 的 脚本 隔离 开 来 。WorkerGlobalScope 全 局 
对 象 表示 了 该 新 的 运行 环境 。WorkerGlobalScope 对 象 在 某 种 程度 上 来 
心 的 JavaScript 全 局 对 象 ， 但 又 小 于 整个 客户 端的 window 对 


和 Worker 对 象 一 样 ，WorkerGlobalScope 对 象 也 有 一 个 postMessage() 方 
法 和 一 个 onmessage 事 件 处 理 程序 的 属性 ， 不 过 使 用 方法 恰好 相反 : 在 
Worker 中 调用 postMessage() 方 法 会 触发 Worker 外 部 的 一 个 message 事 
件 ， 而 Worker 外 部 传递 的 消息 会 转换 成 一 个 事件 ， 并 传递 给 onmessage 
事件 处 理 程序 。 要 注意 的 是 ，WorkerGlobalScope 是 一 个 供 Worker 使 用 
的 全 局 对 象 ， 因 此 该 对 象 上 的 postMessage() 方 法 和 onmessage 属 性 在 
Worker 代 码 中 使 用 的 时 候 ， 看 起 来 殉 像 是 全 局 函数 和 全 局 变量 。 


close() 落 数 人 允许 Worker 将 目 己 终止 ， 它 从 效果 上 来 说 和 Worker 对 象 的 
terminate() 方 法 类 似 。 但 是 ， 要 注意 的 是 ， 在 Worker 对 象 上 没有 定义 任 
何 API 用 于 检测 是 否 Worker 已 经 将 自己 关闭 了 ， 也 没有 类 似 onclose 这 样 
的 事件 处 理 程序 属性 。 如 果 在 一 个 已 经 关闭 的 Worker 上 调用 
postMessage() 方 法 ， 那 么 消 因 会 被 无 声 无 尽 地 丢弃 ， 而 且 也 不 会 有 任何 
错误 抛 出 。 因 此 ， 如 果 一 个 Worker 想 要 使 用 close() 方 法 将 目 己 关闭 ， 那 
么 最 好 是 和 传递 诸如 “关闭 ”这 样 的 消息 。 


WorkerGlobalScope 对 象 上 定义 的 最 有 意思 的 全 局 函数 是 
importScripts(): Worker 使 用 此 方法 来 加 载 任何 需要 的 库 代 码 。 如 下 所 
As: 


// 在 开始 工作 前 ， 先 载 入 需要 的 类 、 工 具 丽 数 


importSscripts("collections/Set.js","collections/Map.js", "utils/base64.js"); 


importScripts() 方 法 接受 一 个 或 者 多 个 URL 参 数 ， 每 个 URL 都 需 指 向 一 
个 JavaScript 代 码 文 件 。 相 对 地 址 的 URL 以 传递 给 Worker0 构 造 画 数 的 
URL 为 参照 。 它 会 按照 指定 的 顺序 依次 载 入 并 运行 这 些 JavaScript 文 
件 。 如 果 载 入 脚本 的 时 候 抛 出 了 网 络 错误 ， 或 者 在 执行 的 时 候 抛 出 了 
销 误 ， 那 么 剩 下 的 脚本 都 不 会 载 入 和 运行 。 通 过 importScripts(0) 方 法 载 
入 的 脚本 自身 还 可 以 调用 importScripts(0) 方 法 载 入 它 需 要 的 文件 。 但 
是 ， 要 注意 的 是 ，importScripts() 方 法 不 会 试图 去 跟踪 哪些 脚本 已 经 载 
入 了 ， 也 不 会 去 防止 循环 依赖 的 问题 。 


importScriptsO 是 一 个 同步 的 方法 : 它 直 到 所 有 的 脚本 都 已 经 载 入 并 运 
行 完 成 才 会 返回 。 一 旦 importScripts() 方 法 返回 束 可 以 开始 使 用 载 入 的 
脚本 了 : 这 里 不 需要 回调 函数 或 者 事件 处 理 程 序 。 一 旦 对 客户 端 
JavaScript 异 步 的 特性 根深 带 固 之 后 ， 再 回 到 简单 的 同步 编程 方式 会 感 
觉 很 不 适应 。 但 是 ， 这 就 是 线程 之 美 : 可 以 在 一 个 Worker 中 使 用 阻塞 
式 函 数 ， 而 不 会 导致 主线 程 中 的 事件 循环 ， 也 不 会 阻塞 在 其 他 Worker 
中 并 行 执行 的 计算 。 


Worker 执 行 模 型 


Worker 线 程 从 上 到 下 同步 运行 它们 的 代码 (以 及 所 有 导入 的 脚本 ) ， 
然后 进入 一 个 异步 阶段 ， 来 对 事件 以 及 计时 器 做 出 响应 。 如 采 Worker 
注册 了 onmessage 事 件 处 理 程 序 ， 那 么 只 要 message 事 件 有 可 能 触发 ， 那 
么 它 将 永远 不 会 退出 。 但 是 ， 如 果 Worker 没 有 监听 消息 ， 那 么 一 直到 
所 有 任务 相关 的 回调 函数 都 调用 以 及 再 也 没有 挂 起 的 任务 (比如 下 载 
和 计时 器 ) 之 后 ， 它 就 会 退出 。 一 旦 所 有 注册 的 回调 函数 都 已 经 调用 
之 后 ，Worker 也 不 再 创建 新 任务 了 ， 这 个 时 候 线 程 就 可 以 安全 退出 

了 。 想 象 这 样 一 个 Worker， 它 通过 XMLHttpRequest 下 载 一 个 文件 ， 但 
是 没有 任何 onmessage 事 件 处 理 程序 。 如 果 该 下 载 任务 的 onload 处 理 程 
序 开 始 一 个 新 的 下 载 任务 或 者 通过 setTimeout(0) 方 法 注册 一 个 超时 的 程 
序 ， 那 么 线程 有 了 新 的 任务 并 保持 运行 状态 ; 否则， 线程 职 会 退出 。 


因为 WorkerGlobalScope 是 Worker 的 全 局 对 象 ， 所 以 它 有 所 有 核心 
JavaScript 全 局 对 象 拥 有 的 那些 属性 ， 诸 如 JSON 对 象 、isNaNO 函 数 和 
Date0 构 造 画 数 。〈 请 通过 在 第 三 部 分 中 查询 Global 来 获得 完整 的 列 

表 。) 然而 ， 除 此 之 外 ，WorkerGlobalScope 对 象 还 有 客户 端 Window 对 
象 拥 有 的 一 些 如 下 属性 : 


self 是 对 全 局 对 象 自身 的 引用 。 但 是 ， 要 注意 的 是 ，WorkerGlobalScope 
对 象 的 sealf 和 Window 对 象 的 self 意 义 不 同 。 


:计时 器 方法 : setTimeoutO 、clearTimeoutO、setIntervalO 以 及 
clearInterval(O)。 


.location 属性 ， 描 述 传递 给 Worker0 构 造 男 数 的 URL。 和 Window 对 象 的 
location 属 性 一 样 ， 此 属性 指向 一 个 Location 对 象 。 该 对 象 有 href 、 
protocol、host、hostname、port、pathname、search 以 及 hash 属 性 。 在 
Worker 中 ， 这 些 属 性 都 是 只 读 的 。 


-navigator 属 性 ， 指 向 一 个 对 象 ， 该 对 象 拥 有 的 属性 和 Window 的 
Navigator 对 象 拥有 的 那些 属性 类 似 。Worker 的 navigator 对 象 有 
appName、appVersion、platform、userAgent 以 及 onLine 属 性 。 


常用 的 事件 目标 方法 : addEventListener() 和 removeEventListener() 。 


:onerror 属 性 ， 可 以 将 它 设置 为 一 个 错误 事件 处 理 程序 ， 就 像 在 14.6 廊 
中 介绍 的 Window.onerror 处 理 程序 那样 。 如 果 注 册 了 错误 处 理 程序 ， 那 
么 错误 的 消息 、URL 以 及 行 号 会 作为 三 个 字符 串 参 数 传递 给 该 处 理 程 
序 。 如 果 该 处 理 程序 返回 false， 则 表示 错误 已 经 处 理 ， 不 应 该 再 将 其 
当成 一 个 Worker 对 象 上 的 error 事 件 传播 了 。 (不 过 ， 截 至 撰写 本 书 
时 ， 不 是 所 有 的 浏览 器 都 实现 了 在 Worker 中 的 错误 处 理 。) 


最 后 ，WorkerGlobalScope 对 象 还 包含 客户 端 JavaScript 一 些 重 要 的 构造 
函数 对 象 。 其 中 包括 XMLHttpRequest()， 以 便 Worker 可 以 通过 它 进行 脚 
本 化 的 HTTP 请 求 (参见 第 18 章 ) ， 以 及 Worker0 构 造 函 数 ，Worker 可 
以 通过 它 创建 它们 自己 的 Worker 线 程 。 (然而 ， 截 至 撰写 本 书 时 ， 
Chrome 和 Safari 还 不 支持 在 Worker 中 使 用 Worker(0) 构 造 加 数 。) 


本 章 后 续 将 要 介绍 的 一 些 HTML 5 API， 在 普通 的 Window 对 象 和 Worker 
的 WorkerGlobalScope 对 象 上 都 定义 了 一 些 新 特性 。 通 常 ，Window 对 和 象 
会 定义 一 个 异步 的 API， 同 时 ，WorkerGlobalScope 会 添加 一 个 相同 基本 


API 的 异步 版 本 。 这 些 “ 启 用 Worker 的 "API 会 在 本 章 后 续 部 分 做 相应 介 


SE 
Worker 高 级 特性 


本 节 介 绍 的 Worker 线 程 都 是 专用 Worker 线 程 ， 它们 和 单独 的 父 线程 相 

关联 。Web Workers 标 准 还 定义 了 另外 一 类 Worker 线 程 : 共享 Worker 线 
程 。 截 至 撰写 本 书 时 ， 浏 贤 絮 还 未 实现 此 类 线程 。 但 是 这 里 仍然 对 其 

做 相应 介绍 ， 原 因 是 ， 共 享 Worker 线 程 是 一 种 命名 资源 ， 为 任何 与 之 

相连 接 的 线程 提供 计算 服务 ， 和 共享 Worker 之 则 的 交互 束 好 比 是 通过 

网 络 套 接 字 和 服务 姨 进 行 通信 。 


对 于 共享 Worker 线 程 而 言 , “ 套 接 字 ” 又 叫 MessagePort。MessagePorts 定 
义 了 一 个 消息 传递 API， 和 为 专用 Worker 线 程 和 路 文档 消息 传递 统一 的 
API 类 似 : 它们 有 一 个 postMessage() 方 法 以 及 一 个 onmessage 事 件 处 理 程 
序 属性 。HTML5 标 准 人 允许 通过 MessageChannel() 构 造 画 数 ， 创 建 一 对 相 
互 连 接 的 MessagePort 对 象 。 可 以 将 MessagePorts (作为 postMessage() 方 
法 的 特殊 参数 ) 传递 给 其 他 窗口 或 者 其 他 Worker， 并 将 它们 作为 专用 
的 通信 频道 。MessagePorts 和 MessageChannels 是 高 级 API， 目 前 大 多 数 
浏览 絮 都 还 未 实现 ， 因 此 这 里 将 不 做 介绍 。 


22.4.3 “Web Worker 的 例子 


本 攻 将 以 两 个 Web Worker 的 例子 结束 。 第 一 个 例子 展示 了 如 何在 一 个 
Worker 线 程 中 执行 长 时 间 计算 ， 同 时 又 不 影响 主线 程 进行 UI 啊 应 。 第 
二 个 例子 展示 了 Worker 线 程 如 何 使 用 更 加 简单 的 同步 API 。 


例 22-6 定 义 了 一 个 smear0 范 数 ， 它 接受 一 个 <img> 元 素 作 为 参数 。 该 
画 数 用 于 在 图 片上 产生 向 右 的 动态 模糊 效果 。 它 使 用 了 第 21 章 介绍 的 
技术 ， 将 图 片 复制 到 一 个 屏幕 外 的 <canvas> 元 素 中 ， 然 后 再 将 图 片 的 
像 系 提取 到 一 个 ImageData 对 象 中 。 不 能 通过 postMessage() 方 法 将 <img 
> 元 素 或 者 < canvas> 元 素 传递 给 Worker， 但 是 可 以 传递 ImageData 对 
象 (具体 细 市 参见 22.2 市 的 “结构 性 复制 ») 。 例 22-6 创 建 一 个 Worker 对 
象 ， 并 调用 postMessage() 方 法 将 要 涂抹 的 像素 传递 给 它 。 当 Worker 线 程 
将 处 理 完 的 像素 信息 再 传递 回来 后 ， 代 码 将 它们 复制 回 < canvas>> 元 素 
中 ， 再 作为 data://URL 提 取 它 们 ， 然 后 将 该 URL 设 置 成 最 初 <img> 元 
素 的 src 属 性 值 。 


例 22-6: 创建 一 个 Web Worker 线 程 处 理 图 片 


// 异 步 地 将 图 片 内 容 替 换 成 动态 模糊 版 本 


// 以 这 种 方式 使 用 : <img src="testimage.jpg"onclick="smear(this)"/> 


于 


片 尺 十 相同 的 屏幕 外 < canvas > 


function smear(img){// 创 建 一 个 和 


Var canvas=document.createElement ("canvas"); 


canvas .width=img .width; 


史 


片 复 制 到 画布 中 ， 随 后 提取 其 像素 


canvas.height=img.height;// 将 


Var context=canvas.getContext("2d"); 


context.drawImage(img,o0,90); 


var pixels=context.getImageData(0,0,img.width,img.height)// 将 像素 信息 传递 给 Worker 线 程 


var worker=new Worker("SmearWorker .js");// 创 建 Worker 线 程 


worker .postMessage(pixels);// 复 制 和 传递 像素 信息 


hl 
a 
I 


// 注 册 事 件 处 理 程序 来 获取 Worker 的 响应 


worker .onmessage=function(e){ 


var smeared_pixels=e.data;// 从 Worker 获 取 的 像素 信息 


Pa 


制 到 画布 中 


context.putImageData(smeared pixels,0,0);// 将 它 1 


UD 


img.src=canvas .toDataURL( );// 然 后 ， 添 加 到 img 


worker .terminate();// 关 闭 Worker 线 程 


mn 


dtr 


像素 全 


canvas ,width=canvas .height=0;// 将 周 


例 22-7 所 示 的 代码 是 给 例 22-6 中 创建 的 Worker 线 程 使 用 的 。 该 例 是 一 个 
图 片 处 理 函 数 : 基于 例 21-10 修 改 的 。 要 注意 的 是 ， 该 例 使 用 一 行 代码 
就 建立 了 一 套 消息 传递 机 制 : onmessage 事 件 处 理 程序 只 将 传递 给 它 的 
图 片 进行 涂抹 ， 随 后 传递 回去 。 


例 22-7: 在 Web Worker 中 进行 图 片 处 理 


// 从 主线 程 中 获取 ImageData 对 象 ， 对 其 进行 处 理 并 将 它 传递 回去 


onmessage=function(e){postMessage(smear(e.data));}// 将 ImageData 中 的 像素 信息 向 右 涂抹 ， 产 生 
动态 模糊 效果 


// 对 于 大 图 片 ， 此 方法 会 进行 大 量 的 计算 ， 


// 如 果 它 用 在 主线 程 中 的 话 ， 很 有 可 能 导致 无 法 啊 应 UI 操 作 的 问题 


function Smear(pixels){ 


var data=pixels.dataywidth=pixels,width,height=pixels,.height'， 


var n=10,m=n-1;// 设 置 n 倍 大 ， 用 于 更 多 的 涂抹 


for(var row=0;row<height;rowt+){// 每 一 行 


var i=row*width*4+4;// 第 二 个 像素 偏 移 


for(var col=1;col<width;col++,i+=4){// 每 一 列 


data[i]=(data[i]+data[i-4]*m)/n;// 红 色 像 素 分 量 


data[i+1]=(data[i+1]+data[i-3]*m)/n;// 绿 色 


data[i+2]=(data[i+2]+data[i-2]*m)/n;// 蓝 色 


data[i+3]=(data[i+3]+data[i-1]*m)/n;//Alpha 分 量 


} 


return pixels; 


} 


要 注意 的 是 ， 例 22-7 中 的 代码 可 以 用 于 处 理 任意 数量 的 图 片 。 然 而 ， 为 
了 简单 起 见 ， 例 22-6 为 它 要 处 理 的 每 一 幅 图 片 创 建 了 一 个 新 的 Worker 对 
象 。 同 时 ， 为 了 确保 没有 线程 闲置 ， 它 会 对 于 已 经 完成 操作 的 线程 调 
用 terminate() 方 法 将 其 终止 挥 。 


调试 Worker 线 程 


在 WorkerGlobalScope 中 ， 有 一 个 API 是 不 可 用 的 (至少 截 至 撰写 本 书 时 
是 不 可 用 的 ) : 控制 台 API 以 及 它 非 常 有 用 的 console.log0 汞 数 。Worker 
线程 不 能 输出 日 志 ， 也 不 能 和 文档 进行 交互 ， 因 此 要 想 调试 ， 就 要 采 
用 更 加 巧妙 的 方法 。 如 果 Worker 抛 出 错误 ， 那 么 主线 程 在 Worker 对 象 
上 会 接收 到 一 个 error 事 件 。 但 是 ， 通 常情 况 下 ， 需 要 一 种 方式 能 够 让 
Worker 将 调试 消 县 输出 到 浏览 右 的 Web 探 制 台 中。 其 中 ， 最 和 直接 的 方式 
束 是 通过 修改 和 Worker 间 的 消 恩 传递 协议 ， 来 让 Worker 将 调试 消 居 传 
递 出 来 。 比 如 ， 在 例 22-6 中 ， 可 以 将 如 下 代码 添加 到 onmessage 事 件 处 
理 程序 的 最 开始 : 


console.log("Worker:"+e.data); 
return; 
3 


有 了 新 增 的 这 部 分 代码 ，Worker 线 程 只 要 简单 地 将 字符 串 传 递 给 
postMessage() 方 法 就 能 够 实现 展示 调试 消 恩 了 。 


下 面 的 例子 展示 了 Web Worker 如 何 允 许 书 写 同 步 代 码 并 在 客户 端 
JavaScript 中 放心 地 使 用 它 。18.1.2 节 介绍 过 如 果 使 用 XMLHttpRequest 
实现 同步 的 HITP 请 求 ， 但 是 也 警告 过 ， 在 主 浏览 器 线程 中 这 样 使 用 是 
个 很 不 好 的 实践 。 然 而 ， 在 Worker 线 程 中 进行 同步 请 求 是 再 理想 不 过 
的 了 ， 例 22-8 正 是 展示 的 是 与 之 相关 的 例 于 。 其 中 的 onmessage 事 件 处 
理 程序 接受 一 个 竺 获取 的 URL 数 组 。 它 通过 同步 XMLHttpRequest API 
来 进行 获取 ， 然 后 ， 将 获取 到 的 文本 内 容 以 字符 串 的 形式 ， 组 成 一 个 
数组 ， 传 递 回 主线 程 。 或 者 ， 如 果 在 HTTP 请 求 过 程 中 失败 了 ， 则 会 抛 
出 错误 ， 并 会 将 其 传递 给 Worker 对 象 的 onerror 处 理 程序 。 


例 22-8: 在 Web Worker 中 发 起 同步 XMLHttpRequest 


和 > 


新 的 Worker () 来 载 入 ， 因 此 ， 它 是 运行 在 独立 的 线程 中 的 ， 


// 此 文件 会 通过 


// 可 以 放心 地 使 用 同步 XMLHttpRequest API 


// 消 息 是 URL 数 组 的 形式 。 以 字符 串 形 式 同步 获取 每 个 URL 指 定 的 内 容 ， 


// 并 将 这 些 字符 串 数组 传递 回去 。 


onmessage=function(e){ 


var urls=e.data;// 输 入 : 要 获取 的 URL 


var contents=[];// 输 出 :URL 指定 的 内 容 


for(var i=0;i<urls.length;i++){ 


var url=urls[i];// 每 个 URL 


var xhr=new XMLHttpRequest();// 开 始 一 个 HTTP 请 求 


xhr .open("GET", url, false);//false 则 表示 进行 同步 请 求 


xhr .send( );// 阻 塞 住 ， 到 响应 完成 


if(xhr.status1==200)// 如 果 请 求 失败 则 抛 出 错误 


throw Error(xhr.status+""+xhr.statusText+":"+url); 


contents.push(xhr,.responseText ) ;// 和 否则 ， 存 储 通过 URL 获 取得 到 的 内 容 


} 


// 最 后 ， 将 这 些 URL 内 容 以 数组 的 形式 传递 回 主线 程 


postMessage(contents); 


} 


22.5 ”类 型 化 数组 和 ArrayBuffer 


正如 第 7 章 介绍 的 那样 ，JavaScript 中 的 数组 是 包含 多 个 数值 属性 和 一 个 
特殊 的 length 属 性 的 通用 对 象 。 数 组 元 素 可 以 是 JavaScript 中 任意 的 值 。 
数组 可 以 动态 地 增长 和 收缩 ， 也 可 以 羡 黎 焉 数组 。JavaScript 的 实现 中 
对 数组 做 了 很 多 的 优化 ， 使 得 典型 的 数组 操作 可 以 变 得 很 快 。 类 型 化 
(参见 7.11 节 ) ， 它 和 篆 规 的 数组 有 如 下 重要 的 区 
别 : 


类 型 化 数组 中 的 元 素 都 是 数字 。 使 用 构造 画 数 在 创建 类 型 化 数组 的 时 
候 决 定 了 数组 中 数字 〈 有 符号 或 者 无 符号 整数 或 者 浮 点 数 ) 的 类 型 和 
大 小 〈 以 位 为 单位 ) 。 

-类 型 化 数组 有 固定 的 长 度 。 

-在 创建 类 型 化 数组 的 时 候 ， 数 组 中 的 元 素 总 是 黑 认 初始 化 为 0。 


一 共有 8 种 类 型 化 数组 ， 每 一 种 的 元 系 类 型 都 不 同 。 可 以 使 用 如 下 所 示 
的 构造 函数 来 创建 这 8 种 类 型 化 数组 : 


构造 函数 数字 类 型 


Int8Array() 有 符号 字 市 

Uint8Array() 无 符号 字 市 

Int16Array() 有 符号 16 位 短 整数 

Uint16Array() 无 符号 16 位 短 整 数 

Int32Array() 有 符号 32 位 整数 

Uint32Array() 无 符号 32 位 整数 

Float32Array() 32 位 浮 点 数值 

Float64Array() 64 位 浮 点 数值 ，JavaScript 中 的 常规 数字 


类 型 化 数组 、< canvas > 和 核心 JavaScript 


类 型 化 数组 是 用 于 <canvas> 元 素 的 WebGL 3D 图 形 化 API 中 重要 的 一 
部 分 ， 浏 览 器 已 经 将 它们 实现 成 为 WebGL 的 一 部 分 。 本 书 不 会 对 
WebGL 做 介绍 ， 但 是 类 型 化 数组 通常 有 用 ， 因 此 在 这 里 做 相应 的 介 

绍 。 回 忆 一 下 ， 在 第 21 章 中 介绍 过 ， 画 布 API 定 义 了 一 个 getImageDate0) 
方法 ， 该 方法 返回 一 个 ImageData 对 象 。ImageData 对 象 的 data 属 性 就 是 
一 个 字数 组 。 在 HTML 标 准 中 把 这 叫做 CanvasPixelArray， 但 是 ， 它 
基本 上 和 这 里 描述 的 Uint8Array 是 一 样 的 ， 除 了 它 可 以 处 理 超 过 0 一 255 
范围 的 值 之 外 。 


要 注意 的 是 ， 这 些 类 型 不 是 核心 语言 的 一 部 分 。JavaScript 语 言 未 来 的 
版 本 可 能 会 引入 对 这 些 类 型 化 数组 的 支持 ， 但 是 ， 和 截至 撰写 本 书 时 ， 
都 尚未 清楚 ， 是 否 JavaScript 语 言 本 身 会 采用 这 里 描述 的 这 些 API 还 是 创 
建新 的 API 。 


在 创建 一 个 类 型 化 数组 的 时 候 ， 可 以 传递 数组 大 小 给 构造 画 数 ， 或 者 
传递 一 个 数组 或 者 类 型 化 数组 来 用 于 初始 化 数组 元 素 。 一 旦 创建 了 类 


型 化 数组 ， 就 可 以 像 操 作 其 他 类 数组 对 象 那 样 ， 通 过 常规 的 中 括号 表 
示 法 来 对 数组 元 素 进 行 读 / 写 操 作 : 


var bytes=new Uint8Array(1024) ;V/V/1KB 字 节 


for(var i=0;i<bytes.1length;i++)// 循 环 数组 的 每 个 元 素 


bytes[i]=i&0xFF;// 设 置 为 索引 的 低 8 位 值 


人 


var copy=new Uint8Array(bytes ),;// 创 建 数组 的 副 才 


var ints=new Int32Array([9,1,2,3]);// 包 含 这 4 个 int 值 的 类 型 化 数组 


现代 JavaScript 语 言 实现 对 数组 进行 了 优化 ， 使 得 数组 操作 已 经 非常 高 
效 。 不 过 ， 类 型 化 数组 在 执行 时 间 和 内 存 使 用 上 都 要 更 加 高 效 。 下 面 
的 函数 用 于 计算 出 比 指定 数值 小 的 最 大 系数 。 它 使 用 了 埃 拉 托 色 尼 和 介 
选 算法 ， 该 算法 要 求 使 用 一 个 大 数组 来 存储 哪些 数字 是 素数 ， 哪 些 是 
合 数 。 由 于 每 个 数组 元 素 只 要 使 用 一 位 信息 ， 因 此 这 里 使 用 Pt8Array 
要 比 使 用 常规 的 JavaScript 数 组 更 加 高 效 : 


// 使 用 埃 拉 托 色 尼 筛 选 算法 ， 返 回 一 个 小 于 n 的 最 大 素数 


function Sieve(n){ 


var a=new Int8Array(n+1);// 如 果 x 是 合 数 ， 则 a[x] 为 1 


var max=Math.floor (Math.sqrt(n));// 因 数 不 能 比 它 大 


var p=2;//2 是 第 一 个 素数 


while(p<=max){// 对 于 小 于 max 的 素数 


for (var i=2*p;i<=n;it+=p)// 将 p 的 倍数 都 标记 为 合 数 


a[i]=1; 


while(a[++p])/*empty*/;// 下 一 个 未 标记 的 索引 值 是 素数 


} 


while(a[n])n--;// 反 向 循环 找到 最 大 的 素数 


return n;// 将 它 返 下 


如 果 将 其 中 的 Int8Array() 构 造 画 数 替 换 成 传统 的 Array() 构 造 画 数 ， 
sieve() 画 数 依然 可 用 ， 但 是 ， 处 理 过 程 中 可 能 需要 2~3 倍 的 时 间 ， 而 且 
需要 更 多 的 内 存 来 存储 大 的 参数 n 的 值 。 当 处 理 图 形 相关 的 数字 或 者 数 
学 相关 的 数字 的 时 候 ， 类 型 化 数组 也 很 有 用 ， 


var matrix=new Float64Array(9);// 一 个 3x3 的 矩阵 


var 3dPoint=new Int16Array(3);//3D 空 间 中 的 一 点 


var rgba=new Uint8Array(4);// 一 个 4 字 节 的 RGBA 像 素 值 


var sudoku=new Uint8Array(81);// 一 个 9x9 的 数 独 板 


使 用 JavaScript 的 中 括号 表示 法 可 以 获取 和 设置 类 型 化 数组 的 单个 元 

素 。 然 而 ， 类 型 化 数组 日 己 还 定义 了 一 些 用 于 设置 和 获取 整个 数组 内 
容 的 方法 。 其 中 set(0) 方 法 用 于 将 一 个 音 规 或 者 类 型 化 数组 复制 到 一 个 类 
型 化 数组 中 : 


var bytes=new Uint8Array(1024)//1KB 绥 冲 区 


区 


var pattern=new Uint8Array([9,1,2,3]);// 一 个 4 个 字 节 的 数组 


bytes.set(pattern);// 将 它们 复制 到 另 一 个 数组 的 开始 


bytes.set(pattern,4);// 在 男 一 个 偏 移 量 处 再 次 复制 它们 


bytes.set([9,1,2,3],8);// 或 直接 从 一 个 常规 数组 复制 值 


类 型 化 数组 还 有 一 个 subarray() 方 法 ， 调 用 该 方法 返回 部 分 数组 内 容 : 


var ints=new Int16Array([9,1,2,3,4,5,6,7,8,9]);//10 个 短 整 数 


var last3=ints.subaarray(ints.length-3,ints.length);// 最 后 三 个 


last3[0]//=>7: 等 效 于 ints[7] 


要 注意 的 是 ， subarray0 万 法 个 ` 会 创建 数据 的 副本 。 它 只 是 直接 返回 原 
数组 的 其 中 一 部 分 内 容 : 


ints[9]=-1;// 改 变 原 数组 中 的 元 素 值 ， 然 后 ..… 


last3[2]//=> -1: 同 时 也 改变 子 数 组 中 的 元 素 值 


subarray() 方 法 返回 当前 数组 的 一 个 新 视图 ， 这 一 事实 ， 说 明了 类 型 化 
数组 中 某 些 重要 的 概念 : 它们 都 是 基本 字 节 块 的 视图 ， 称 为 一 
ArrayBuffer。 每 个 类 型 化 数组 都 有 与 基本 缓冲 区 相关 的 三 个 属性 : 


last3,buffer//=> 返 回 一 个 ArrayBuffer 对 象 


last3.buffer==ints.buffer//=>true: 两 者 都 是 同一 缓冲 区 上 的 视图 


Xe 


last3.byteoffset//=>14: 此 视图 从 基本 缓冲 区 的 第 14 个 字 节 


口 


个 16 位 整数 ) 长 


一 、 
CD 


last.bytelength//=>6: 该 视图 是 6 字 节 


ArrayBuffer 对 象 自身 只 有 一 个 返回 它 长 度 的 属性 : 


last3.byteLength//=>6: 此 视图 6 个 字 节 长 


last3.buffer.byteLength//=>209: 但 是 基本 缓冲 区 长 度 有 20 个 字 节 长 


ArrayBuffer 只 是 不 透明 的 字 节 块 。 可 以 通过 类 型 化 数组 获取 这 些 字 
帮 ， 但 是 ArrayBuffer 上 自己 并 不 是 一 个 类 型 化 数组 。 然 而 ， 要 注意 的 
是 : 可 以 像 对 任意 JavaScript 对 象 那 样 ， 使 用 数字 数组 索引 来 操作 
ArrayBuffer。 但 是 ， 这 样 做 并 不 能 赋予 访问 缓 神 区 中 字 世 的 权限 ; 


JE 


var bytes=new Uint8Array(8);// 分 配 8 个 字 节 


bytes[9]=1;// 把 第 一 个 字 节 设置 为 1 


bytes.buffer[9]//=>undefined :缓冲 区 没有 索引 值 9 


bytes,.buffer[1]=255;// 试 着 错误 地 设置 缓冲 区 中 的 字 节 


bytes.buffer[1]//=>255: 这 只 设置 一 个 常规 的 JS 属 性 


bytes[1]//=>0: 上 面 这 行 代码 并 没有 设置 字 节 


可 以 直接 使 用 ArrayBuffer() 构 造 画 数 来 创建 一 个 ArrayBuffer， 有 了 
ArrayBuffer 对 象 后 ， 可 以 在 该 缓冲 区 上 创建 任意 数量 的 类 型 化 数组 视 
图 : 


var buf=new ArrayBuffer(1024*1024);//1MB 
var asbytes=new Uint8Array(buf);// 视 为 字 节 


var asints=new Int32Array(buf);// 视 为 32 位 有 符号 整数 


var lastK=new Uint8Array(buf,1023*1024) ;// 视 最 后 1KB 为 字 节 


var ints2=new Int32Array(buf,1024, 256) ;// 视 第 二 个 1KB 为 256 个 整数 


类 型 化 数组 允许 将 同样 的 字 节 序列 看 成 8 位 、16 位 、32 位 或 者 64 位 的 数 
据 块 。 这 里 提 到 了 “ 字 节 顺序 ”>:， 字 节 组织 成 更 长 的 字 的 顺序 。 为 了 高 
效 ， 类 型 化 数组 采用 底层 硬件 的 原生 顺序 。 在 低位 优先 (little-endian，) 
系统 中 ，ArrayBuffer 中 数字 的 字 万 是 按照 从 低位 到 高 位 的 顺序 排列 

的 。 在 高 位 优先 (big-endian) 系统 中 ， 字 万 是 按照 从 高 位 到 低位 的 顺 
序 排列 的 。 可 以 使 用 如 下 代码 来 检测 系统 的 字 节 顺序 : 


// 如 果 整 数 0Xx90000001 在 内 存 中 表示 成 : 91 00 00 00， 


// 则 说 明 当 前 系统 是 低位 优先 系统 


// 相 反 ， 在 高 位 优先 系统 中 ， 它 会 表示 成 : 00 00 00 01 


var little_ endian=new Int8Array(new Int32Array([1]).buffer)[0]===1; 


如 今 ， 大 多 数 CPU 染 构 都 采用 低位 优先 。 然 而 ， 很 多 的 网 络 协议 以 及 
有 些 二 进 制 文件 格式 ， 是 采用 高 位 优先 的 字 节 顺序 的 。22.6 廊 将 会 介绍 
如 何 使 用 ArrayBuffer 来 存储 从 文件 中 读 取 到 的 或 者 是 从 网 络 中 下 载 下 
来 的 字 节 。 当 这 么 做 的 时 候 ， 要 考虑 平台 的 字 他 顺序。 通常 ， 处 理 外 
部 数据 的 时 候 ， 可 以 使 用 Int8Array 和 Uint8Array 将 数据 视 为 一 个 单字 市 
数组 ， 但 是 ， 不 应 该 使 用 其 他 的 多 子 证 字 长 的 类 型 化 数组 。 取 而 代 之 
的 是 可 以 使 用 DataView 类 ， 该 类 定义 了 采用 显 式 指定 的 字 市 顺序 从 
ArrayBuffer 中 读 / 写 其 值 的 方法 : 


var data;// 假 设 这 是 一 个 来 自 网 络 的 ArrayBuffer 


var view=DataView(data);// 创 建 一 个 视图 


var int=view.getInt32(0);// 从 字 节 0 开始 的 ， 高 位 优先 顺序 的 32 位 有 符号 int 整 数 


int=view.getInt32(4,false);// 接 下 来 的 32 位 ijnt 整 数 也 是 高 位 优先 顺序 的 


int=view.getInt32(8,true)// 接 下 来 的 4 个 字 节 视 为 低位 优先 顺序 的 有 符号 Int 整数 


view.setInt32(8, int,false);// 以 高 位 优先 顺序 格式 将 数字 写 回去 


DateView 为 8 种 不 同 的 类 型 化 数组 分 别 定 义 了 8 个 get 方 法 。 和 名字 诸如 : 
getInt16()、getUint32() 以 及 getFloat64()。 这 些 方法 的 第 一 个 参数 指定 了 
ArrayBuffer 中 的 字 节 偏 移 量 ， 表 示 从 哪个 值 开始 获取 。 除 了 getInt80) 方 
法 和 getUint8() 方 法 之 外 ， 其 他 所 有 getter 方 法 都 接受 第 二 个 可 选 的 布尔 
类 型 的 参数 。 如 有 果 忽 略 该 参数 或 者 将 该 参数 设置 为 false， 则 表示 采用 
高 位 优先 字 节 顺序 ， 反 之 ， 则 采用 低位 优先 字 节 顺序 。 


DateView 同 时 也 定义 了 8 个 对 应 的 set 方 法 ， 用 于 将 值 写 入 到 那个 基本 组 
存 区 ArrayBuffer 中 。 这 些 方法 的 第 一 个 参数 指定 偏 移 量 ， 表 示 从 哪个 
值 开始 写 。 第 二 个 参数 指定 要 写 入 的 值 。 除 了 setInt8() 方 法 和 setUint80 
方法 之 外 ， 其 他 每 个 方法 都 接受 第 三 个 可 选 的 参数 。 如 果 和 忽略 该 参数 
或 者 将 该 参数 设置 为 false， 则 将 值 以 高 位 优先 字 节 顺序 写 入 ; 反之 ， 
则 采用 低位 优先 字 节 顺序 写 入 。 


22.6 Blob 


Blob 是 对 大 数据 块 的 不 透明 引用 或 者 句柄 。 名 字 来 源 于 SQL 数 据 库 ， 表 
示 “ 二 进 制 大 对 象 ”(Binary Large Object) 。 在 JavaScript 中 ，Blob 通 常 
表示 二 进 制 数据 ， 不 过 它们 不 一 定 非得 是 大 量 数据 : Blob 也 可 以 表示 
一 个 小 型 文本 文件 的 内 容 。Blob 十 不 透明 的 : 能 对 它们 进行 直接 操作 
的 就 只 有 获取 它们 的 大 小 〈 以 字 贡 为 单位 ) 、MIME 类 型 以 及 将 它们 分 
割 成 更 小 的 Blob: 


var blob=...// 后 面 会 介绍 如 何 获 取 一 个 Blob 


blob.size//Blob 大 小 (以 字 节 为 单位 ) 


blob .type//Blob 的 MIME 类 型 ， 如 果 未 知 的 话 ， 则 是 "" 


var subblob=blob.slice(0,1024,"text/plain");//Blob 中 前 1KB 视 为 文本 


YE 


var last=blob.slice(blob.size-1024,1024);//Blob 中 最 后 1KB 视 为 无 类 型 


Web 浏 览 锅 可 以 将 Blob 存 储 到 内 存 中 或 者 磁盘 上 ，Blob 可 以 表示 非常 大 
的 数据 块 《比如 视频 文件 ) ， 如 果 事 先 不 用 slice() 方 法 将 它们 分 割 成 为 
小 数据 块 的 话 ， 无 法 存储 在 主 内 存 中 。 正 是 因为 Blob 可 以 表示 非常 大 


的 数据 块 ， 并 且 它 可 能 需要 磁盘 的 访问 权限 ， 所 以 使 用 它们 的 API 是 异 
步 的 (在 Worker 线 程 中 有 提供 相应 的 同步 版 本 ) 。 


Blob 本 身 并 没有 多 大 意思 ， 但 是 它们 为 用 于 二 进 制 数 据 的 大 量 
JavaScript API 提 供 重 要 的 数据 交换 机 制 。 图 22-2 展 示 了 如 何 从 Web、 本 
地 文件 系统 、 本 地 数据 库 或 者 其 他 的 窗口 和 Worker 中 对 Blob 进 行 读 

写 。 不 仅 如 此 ， 图 22-2 还 展示 了 如 何以 文本 、 类 型 化 数组 或 者 URL 的 形 
式 读 取 Blob 内 容 。 
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图 22-2 Blob 以 及 使 用 Blob 的 API 


在 使 用 Blob 之 前 ， 首 先 必须 要 获取 Blob。 获 取 Blob 有 很 多 方法 ， 其 中 有 
些 方法 中 涉及 的 API 之 前 已 经 介绍 过 了 ， 而 有 些 API 则 会 在 本 章 后 续 部 
分 做 相应 的 介绍 


-Blob 文 持 结构 性 复制 算法 (参见 22.2 节 的 “结构 性 复制 ") ， 这 就 意味 
着 ， 可 以 通过 message 事 件 从 其 他 窗口 或 者 线程 中 获取 Blob。 参 见 22.3 
节 和 22.4 节 。 


:可 以 从 客户 端 数据 库 中 获取 Blob， 这 部 分 会 在 22.8 下 进行 相应 介绍 


.可 以 使 用 XHR2 标 准 中 的 尖端 特性 ， 通 过 脚本 化 HTTP 从 Web 中 下 载 
Blob。 这 部 分 内 容 会 在 22.6.2 节 进行 相应 介绍 。 


.可 以 使 用 BlobBuilder 对 象 来 从 字符 串 、ArrayBuffer 对 象 (参见 22.5 节 ) 
以 及 其 他 Blob 来 创建 自己 的 Blob。BlobBuilder 对 象 将 在 22.6.3 节 进行 相 
应 介 绍 O 〇 


最 后 也 是 最 重要 的 就 是 ， 客 户 端 JavaScript 的 File 对 象 是 Blob 的 子 类 : 

File 对 象 其 实 就 是 有 名 字 和 修改 日 期 的 Blob 数 据 。 通 过 <input 

type="file" 之 元 素 以 及 拖 放 API 可 以 获取 File 对 象 ， 这 部 分 将 在 22.6.1 方 

nl 让 绍 。 在 22.7 节 中 会 介绍 ，File 对 象 还 可 以 使 用 文件 系统 API 
大 直 。 


一 旦 获取 了 Blob， 就 可 以 对 其 进行 很 多 的 操作 ， 其 中 包括 上 述 提 到 的 


一 些 操作 : 


.可 以 使 用 postMessage() 方 法 向 其 他 窗口 或 者 Worker 发 送 一 个 Blob。 参 
见 22.3 作 和 22.4。 


.可 以 将 Blob 存 储 到 客户 端 数据 库 中 。 参 见 22.8 节 。 

.可 以 通过 将 Blob 传 递 给 一 个 XMLHttpRequest 对 象 的 send0) 方 法 ， 来 将 
该 Blob 上 传 到 服务 器 。 例 18-9 介 绍 了 相关 的 文件 上 传 的 例子 (要 记 住 ， 
File 对 象 就 是 特殊 的 类 型 的 Blob) 


:可 以 使 用 createObjectURLO 芳 数 获取 一 个 特殊 的 blob://URL， 该 URL 代 
表 一 个 Blob 的 内 容 ， 然 后 ， 将 其 和 DOM 或 者 CSS 结 合 使 用 。22.6.4 贡 会 


对 其 进行 相应 介绍 。 


.可 以 使 用 FileReader 对 象 来 异步 地 (或 者 在 Worker 线 程 中 同步 地 ) 将 一 
个 Blob 内 容 抽取 成 一 个 字符 串 或 者 ArrayBuffer。22.6.5 节 将 展示 该 基本 
的 技术 。 


可 以 使 用 将 在 22.7 节 中 介绍 的 文件 系统 API 和 FileWriter 对 象 ， 来 实现 将 
一 个 Blob 写 入 到 一 个 本 地 文件 中 。 


下 面 几 市 将 介绍 如 何人 简单 地 获取 和 使 用 Blob。 涉 及 本 地 文件 系统 和 客 
端 数据 库 的 更 为 复杂 的 技术 将 在 它们 各 目的 章 世 中 做 相应 介绍 。 


22.6.1 文件 作为 Blob 


<input type="file">> 元素 最 初 是 用 于 在 HTML 表 单 中 实现 文件 上 传 的 。 
浏 斋 需 总 是 很 小 心地 实现 该 元 素 ， 目 的 是 为 了 只 允许 上 传 用 户 显 式 选 
择 的 文件 。 脚 本 是 无 法 将 该 元 素 的 value 属 性 设置 成 一 个 文件 名 的 ， 这 
样 它们 就 无 法 实现 将 用 户 电脑 上 任意 的 文件 进行 上 传 。 最 近 ， 浏 览 器 
提供 商 已 经 对 该 元 系 进行 了 扩展 ， 人 允许 客户 端 可 以 访问 用 户 选 择 的 文 
件 了 。 要 注意 的 是 ， 人 允许 客户 端 脚本 读 取 选 择 的 文件 内 容 不 会 引发 安 
全 问题 ， 它 和 人 允许 这 些 文件 上 传 到 服务 器 的 安全 级 别 是 一 样 的 。 


在 支持 本 地 文件 访问 的 浏览 妖 中 ，<input type="file" > 元 素 上 的 旬 es 局 
性 则 是 一 个 FileList 对 象 。 该 对 象 是 一 个 类 数组 对 象 ， 其 元 素 要 么 是 0， 
要 么 是 用 户 选 择 的 多 个 File 对 象 。 一 个 File 对 象 就 是 一 个 Blob， 除 此 之 
外 ， 还 多 了 name 和 1lastModifiedDate 属 性 : 


<script>// 输 出 选中 的 文件 列表 相关 的 信息 


function fileinfo(files){ 


for(var i=0;1i<files.length;i++){f//files 是 一 个 类 数组 对 象 


Var f=files[i]; 


console.1og(f.name, // 只 是 名 字 : 没有 路 径 


f.size,f.type,//size 和 type 是 Blob 的 属性 


3 


f.lastModifiedDate);// 另 外 一 个 File 对 象 的 属性 


} 


} 


</script> 


< 1!-- 人 允许 选择 多 个 图 片 文件 并 将 它们 传递 给 fileinfo( ) 方 法 -- > 


<input type="file"accept="image/*"multiple onchange="fileinfo(this.files)"/> 


能 够 显示 选中 文件 的 名 字 、 类 型 和 大 小 并 没有 多 大 意义 。22.6.4 节 和 
22.6.5 节 将 会 介绍 如 何 真正 操作 文件 内 容 。 


除了 通过 <input> 元 素来 选择 文件 之 外 ， 用 户 还 可 以 通过 将 本 地 文件 
放 到 浏览 器 中 来 给 予 脚 本 访问 它们 的 权限 。 当 应 用 接收 到 一 个 drop 事 
件 ， 事 件 对 象 的 dataTransferfiles 属 性 就 会 和 放 入 的 FileList 井 行 关联 
(如 果 有 的 话 ) 。 拖 放 API 在 17.7 市 中 介绍 过 ， 例 22-10 会 展示 如 何在 文 
件 中 使 用 该 API。 


22.6.2 下载 Blob 


第 18 章 介绍 了 使 用 XMLHttpRequest 对 象 脚本 化 HTTP， 同 时 还 介绍 了 
XMLHttpRequest Level 2 (XHR2) 标准 草案 中 定义 的 一 些 新 特性 。 截 
至 撰写 本 书 时 ，XHR2 定 义 了 一 种 将 URL 指 定 的 内 容 以 Blob 的 形式 下 载 
下 来 ， 但 是 浏览 器 还 不 支持 它 。 由 于 代码 还 无 法 测试 (浏览 器 不 支 
持 ) ， 因 此 ， 本 节 只 简单 地 介绍 操作 Blob 的 XHR2 API 。 


例 18-2 介 绍 过 如 何 将 URL 指 定 的 内 容 以 纯 文本 的 形式 下 载 下 来 ， 与 之 不 
同 的 是 ， 例 22-9 展 示 了 从 Web 下 载 一 个 Blob 的 基本 技术 : 


例 22-9: 使 用 XMLHttpRequest 下 载 Blob 


// 以 Blob 的 形式 获取 URL 指 定 的 内 容 ， 并 将 其 传递 给 指定 的 回调 函数 


里 的 代码 没有 测试 过 ， 因 为 稚 至 撰写 本 书 时 ， 没 有 一 个 浏览 器 支持 该 API 


入 
S> 
演 


function getBlob(url,callback){ 


var xhr=new XMLHttpRequest();// 创 建 一 个 新 的 XHR 对 象 


xhr .open("GET", url1);// 指 定 要 获取 内 容 的 URL 


xhr .responseType="blob"// 以 Blob 的 形式 


xhr .onload=function(){//onload 比 onreadystatechange 更 容易 


callback(xhr.response);// 将 Blob 传 递 给 回调 函数 


// 注 意 ， 这 里 是 .response, 不 是 ,responseText 


xhr .send(null);// 发 送 请 求 


如 果 要 下 载 的 数据 量 很 大 ， 想 要 在 下 载 过 程 中 显示 一 个 进度 条 ， 那 么 
可 以 使用 captomess 事 件 处 理 程序 这 部 分 将 在 22.6. 5 中 进行 相应 介 


绍 。 
22.6.3 ”构造 Blob 


eh URL 以 及 数据 库 外 部 资源 的 大 数据 
块 。 然 而 ， 有 的 时 候 ，Web 应 用 想 要 创建 的 Blob， 并 将 其 上 传 到 Web 上 
或 者 存储 到 一 个 文件 或 者 数据 库 中 或 者 传递 给 另 一 个 线程 。 要 从 自 | 
的 数据 来 创建 Blob， 可 以 使 用 BlobBuilder: 


// 创 建 一 个 新 的 BlobBuilder 


var bb=new BlobBuilder();// 把 一 个 字符 串 追 加 到 Blob 中 ， 并 以 一 个 NUL 字 符 标 记 为 字符 串 结束 


bb.append("This blob contains this text and 10 big-endian 32-bit signed ints."); 


bb .append("\0");//NUL 结 束 符 表 示 字 符 串 的 结束 


// 将 数据 存储 到 ArrayBuffer 中 


Var ab=new ArrayBuffer(4*10); 


var dv=new DataView(ab); 


for(var i=0;i<10;i++)dv.setInt32(i*4,i);// 将 ArrayBuffer 添 加 到 Blob 中 


bb .append(ab);// 现 在 从 builder 中 获取 Blob， 并 指定 MIME 类 型 


Var blob=bb.getBlob("x-optional/mime-type-here"); 


在 本 节 一 开始 介绍 过 Blob 有 一 个 slice0 方 法 ， 用 于 将 Blob 拆 分 成 多 个 片 
段 。 通 过 将 多 个 Blob 传 递 给 BlobBuilder 的 append() 方 法 可 以 实现 将 多 个 
Blob 合 并 在 一 起 。 


22.6.4 Blob URL 


前 面 章 节 介 绍 过 如 何 获取 或 者 创建 Blob。 现 在 来 介绍 如 何 对 获取 的 或 
者 创建 的 Blob 进 行 操作 。 其 中 最 简单 的 就 是 可 以 创建 一 个 URL 来 指向 
该 Blob。 随 后 ， 可 以 以 一 般 的 URL 形 式 在 任何 地 方 使 用 该 URL: 在 

DOM 中 ， 在 样式 表 中 ， 甚 至 可 以 作为 XMLHttpRequest 的 目标 。 


使 用 createObjectURLO 函 数 可 以 创建 一 个 Blob URL。 截 至 撰写 本 书 

上 时， 标准 草案 和 Firefox 4 都 是 将 该 函数 放 在 全 局 对 象 中 ， 命 名 为 URL， 
Chrome 和 Webkit 浏 史 器 则 在 URL 前 加 上 了 前 级 ， 命 名 为 webkitURL。 早 
期 标准 (以 及 早期 浏览 器 的 实现 ) 直接 将 该 男 数 放 在 Window 对 象 上 。 
可 以 使 用 如 下 代码 ， 实 现 跨 浏览 器 创建 Blob URL: 


var getBlobURL=(window.URL&&URL.createObjectURL.bind(URL))|| 


(window.webkitURL& &webkitURL.createObjectURL.bind(webkitURL))|| 


window.createObjectURL; 


Web Workers 也 人 允许 使 用 该 API 和 访问 同样 的 URL (或 者 webkitURL) 对 
象 上 同样 的 函数 。 


传递 一 个 Blob 给 createObjectURL() 方 法 会 返回 一 个 URL 〈 以 普通 字符 串 
形式 ) 。 该 URL 以 blob:// 开 始 ， 紧 跟着 是 一 小 串 文 本 字符 串 ， 该 字符 串 
用 不 透明 的 唯一 标识 符 来 标识 Blob。 要 注意 的 是 ， 这 和 data://URL 是 不 
同 的 ，data://URL 会 对 内 容 进行 编码 。Blob URL 只 是 对 浏览 器 存储 在 内 
存 中 或 者 磁 一 上 的 Blob 的 一 个 简单 引用 。blob:VXURL 和 fie:WVUREL 也 是 不 
同 的 ，file:VXUREL 直 接 指 加 本 地 文件 系统 中 的 一 个 文件 ， 仅 骏 露 了 文件 

、 浏览 目 录 的 许可 等 ， 除 此 之 外 任何 内 容 都 会 带 来 安全 问题 


例 22-10 展 示 了 两 种 重要 的 技术 。 首 匈 ， 它 实现 了 一 个 和 文件 相关 的 用 
于 监听 拖 放 事件 的 “ 拖 放 目标 区 域 ”。 然 后 ， 当 用 户 将 一 个 或 多 个 文件 
拖 放 到 该 目标 区 域 中 时 ， 它 会 使 用 createObjectURL() 方 法 来 为 每 个 文件 
获取 一 个 URL， 然 后 创建 <img > 元 素来 展示 URL 引 用 图 片 的 缩 略图 。 


例 22-10: 用 Blob URL 来 显示 一 个 拖 放 的 图 片 文件 


<!DOCTYPE html> 


<html> <head> 


<script>// 截 至 撰写 本 书 时 ，Firefox 和 Webkit 在 


//create0bjectURL( ) 函 数 的 命名 上 意见 不 统一 


var getBlobURL=(window.URL&&URL.createObjectURL.bind(URL))|| 


(window.webkitURL& &webkitURL.createObjectURL.bind(webkitURL))|| 


window.createObjectURL; 


var revokeBlobURL=(window.URL&&URL.revokeObjectURL.bind(URL))|| 


(window.webkitURL& &webkitURL.revokeObjectURL.bind(webkitURL))|| 


window.revoke0bjectURL;// 在 文档 载 入 后 ， 在 droptarget 元 素 上 添加 事件 处 理 程序 


// 以 便 它 可 以 处 理 文件 的 拖 放 


window.onload=function( ){// 查 询 要 向 其 中 添加 处 理 程序 的 元 素 


var droptarget=document . getElementById("droptarget");V// 当 用 户 开 始 拖 放 文 件 经 过 droptarget 元 


素 的 时 候 ， 将 其 高 亮 显示 


droptarget .ondragenter=function(e){// 如 果 拖 的 不 是 文件 ， 则 忽略 它 


中 


/V 在 实现 的 时 候 ， 使 用 HTML5 的 dropzone 属 性 会 更 加 简 自 


mh 
bn 
| 


Var types=e.dataTransfer.types; 


if(!types|| 


(types.contains&&types.contains("Files"))|| 


(types.indexof&&types.indexof ("Files")!=-1)){ 


droptarget.classList.add("active");// 局 党 卫 不 droptarget 


return false;// 阻 止 默认 事件 处 理 


时 


};// 如 户 移出 该 区 域 ， 则 取消 高 亮 显示 拖 放 区 


droptarget.ondragleave=function( ){ 


droptarget.classList.remove("active"),; 


};// 此 处 理 程序 只 是 通知 浏览 器 继续 发 送 提 醒 


droptarget .ondragover=function(e){return false;};// 当 用 户 放 下 文件 时 ， 就 获取 它们 的 URL， 
对 应 的 缩 略 图 


droptarget.ondrop=function(e){ 


I 


var files=e.dataTransfer.files;// 放 下 的 文 伯 


Nia 


for(var i=0;i<files,.length;i+t+){// 循 环 每 个 文件 


Var type=files[i].type; 


if(type.substring(0,6)!=="image/")// 不 是 


continue; 


图 


片 则 忽略 


var img=document .createElement("img");/V/ 创 建 <img> 元 素 


img.src=getBlLobURL(files[i]);// 在 <img> 元 素 上 使 用 BlLob URL 


img.onload=function( ){// 图 


this .width=100;// 调 整 


document .body.appendchild(this);// 将 


revokeBlobURL(this.src);// 但 是 要 避免 内 存 六 


droptarget.classList.remove("active");// 取 消 高 亮 显示 droptarget 区 


return false;// 处 理 


}; 


</script> 


Le==4 


E 完 纪 


Eb 
于 


片 载 入 的 时 候 


小 并 


它 添加 


到 文档 中 


<style>/* 给 文 伯 


F 拖 放 


标 


广 域 


E 义 简 


的 档 


Ff 式 */ 


和 


#droptarget{border:solid black 2px;width:200px;height:200px;} 


#droptarget.active{border:solid red 4px;} 


</style> 


</head> 


<body> <!- -文档 只 定义 文件 拖 放 目标 区 域 - - > 


<div id="droptarget">Drop Image Files Here</div> 
</body> 


</html> 


Blob URL 和 创建 它们 的 脚本 拥有 同样 的 源 (参见 13.6.2 节 ) 。 这 使 得 它 
们 比 fle:/W/URL 更 加 灵活 ， 由 于 file://URL 是 非 同 源 的 ， 因 此 要 在 Web 访 
用 中 使 用 它们 相对 比较 麻烦 。Blob URL 只 有 在 同 源 的 文档 中 才 是 有 效 
的 。 比 如 ， 如 果 将 一 个 Blob URL 通 过 postMessage() 传 递 给 一 个 非 同 源 
窗口 ， 则 该 URL 对 于 该 窗口 来 说 是 没有 任何 意义 的 。 


Blob URL 并 不 是 永久 有 效 的 。 一 旦 用 户 关闭 了 或 者 离开 了 包含 创建 

Blob URL 脚 本 的 文档 ， 该 Blob URL 就 失效 了 。 比 如 ， 将 Blob URL 保 存 
到 本 地 存储 器 中 ， 然 后 当 用 户 开始 一 个 新 的 Web 应 用 会 话 的 时 再 使 用 
它 ， 这 是 不 可 能 的 。 


可 以 通过 调用 URL.revokeObjectURL() 方 法 (或 者 
WebkitURL.revokeObjectURL() 方 法 ) ， 来 手动 让 Blob URL 失 效 ， 这 在 
例 22-10 中 已 经 使 用 到 了 。 之 所 以 提供 这 样 的 方式 ， 是 因为 这 和 内 存 管 
理 问 题 有 关 。 一 旦 展示 了 图 片 的 缩 略 图 之 后 ，Blob 就 不 再 需要 了 ， 应 
当 回 收 它 。 但 是 ， 如 果 Web 浏 览 器 正 维 护 创建 的 Blob 和 Blob URL 之 间 
的 映射 关系 ， 那 么 即使 该 Blob 已 经 不 用 了 ， 也 不 会 被 回收 。JavaScript 
解释 器 无 法 跟踪 字符 串 的 使 用 情况 ， 如 果 URL 仍 然 是 有 效 的 ， 那 么 它 
只 能 认为 该 URL 可 能 还 在 用 。 这 就 意味 着 ， 在 手动 撤销 该 URL 之 前 ， 
是 不 会 将 其 回收 的 。 例 22-10 使 用 的 是 都 是 本 地 文件 ， 不 需要 对 其 进行 
清除 ， 但 是 ， 不 难 想象 ， 如 果 通 过 BlobBuilder 创 建 的 Blob 都 是 存储 在 
内 存 中 ， 或 者 通过 XMLHttpRequest 下 载 的 Blob 是 存储 在 一 个 临时 文件 
中 的 话 ， 那 么 一 定 会 有 严重 的 内 存 管理 问题 。 


blob://URL 模 式 被 显 式 地 设计 成 像 一 个 人 简化 的 http://URL 那 样 工 作 ， 并 
且 ， 当 请 求 一 个 blob://URL 的 上 时候， 要 求 浏 顺 絮 像 迷 你 的 HTTP 服 务 履 


那样 做 出 响应 。 如 果 请 求 的 Blob URL 已 经 失效 ， 浏 览 器 必须 返回 一 个 
404 无 法 找到 的 状态 码 。 如 果 请 求 的 Blob URL 来 自 另 外 的 源 ， 那 么 浏览 
器 必须 返回 403 禁 止 访问 的 状态 码 。Blob URL 只 人 允许 通过 GET 请 求 获 
取 ， 并 且 一 旦 获取 成 功 ， 浏 览 器 必须 返回 一 个 HTTP 200 OK 的 状态 
码 ， 同 时 返回 一 个 使 用 Blob type 属 性 的 Content-Type 头 部 信息 。 由 于 
Blob URL 的 工作 方式 和 简单 的 HTTP URL 一 致 ， 因 此 可 以 通过 
XMLHttpRequest 将 它们 指定 的 内 容 “ 下 载 * 下 来 。 (然而 ， 下 一 节 会 介 
绍 如 何 使 用 FileReader 对 象 更 直接 地 读 取 Blob 的 内 容 。) 


22.6.5” 读 取 Blob 


到 目前 为 止 ， 介绍 了 Blob 是 不 透明 的 大 数据 块 ， 只 允许 通过 Blob URL 
来 间接 地 访问 它们 的 内 容 。FileReader 对 象 允 许 访问 Blob 中 的 字符 或 者 
字 节 ， 可 以 将 它 视 为 是 BlobBuilder 对 应 的 一 个 对 象 。 (其 实 这 个 名 字 
叫 BlobReader 会 更 好 ， 因 为 它 只 适用 于 Blob 而 不 是 文件 。) 由 于 Blob 可 
能 会 是 存储 在 文件 系统 中 的 大 对 象 ， 因 此 读 取 它们 的 API 是 异步 的 ， 和 
XMLHttpRequest API 很 像 。 尽 管 Worker 线 程 也 可 以 使 用 异步 的 API， 但 
在 Worker 线 程 中 有 对 应 的 同步 版 本 的 API， 叫 FileReaderSync 。 


要 使 用 FileReader， 首 先 要 通过 FileReader0O 构 造 函 数 创建 一 个 实例 。 然 
后 ， 定 义 一 个 事件 处 理 程 序 。 通 常会 给 load 事 件 、error 事 件 以 及 可 能 会 
给 progress 事 件 定义 处 理 程序 。 可 以 使 用 onload、onerror 和 onprogress 或 
者 使 用 标准 的 addEventListener() 方 法 来 定义 处 理 程序 。FileReader 对 和 象 

还 会 触发 loadstart 事 件 、loadend 事 件 以 及 abort 事 件 ， 这 些 事件 和 同名 的 
XMLHttpRequest 事 件 一 样 : 参见 18.1.4 季 。 


创建 了 FileReader 对 象 并 注册 了 对 应 的 事件 处 理 程 序 之 后 ， 必 须要 将 要 
读 取 的 Blob 传 递 给 下 面 这 4 个 方法 其 中 之 一 : readAsText()、 
readAsArrayBuffer() 、 readAsDataURL() 以 及 readAsBinaryString()。 ( 当 
然 了 ， 也 可 以 移 调 用 其 中 的 方法 ， 然 后 再 注册 事件 处 理 程序 一 一 22.4 节 
介绍 过 JavaScript 天 生 就 是 单线 程 的 ， 这 意味 着 除非 等 到 调用 的 函数 返 
回 以 及 浏览 絮 回 到 事件 循环 阶段 ， 否 则 永远 不 会 调用 事件 处 理 程 

序 。) 这 些 方法 中 前 两 个 方法 是 非常 重要 的 ， 这 里 会 对 它们 做 相应 介 
绍 。 这 里 每 个 方法 都 接受 Blob 作 为 第 一 个 参数 。readAsText() 方 法 还 接 
受 第 二 个 可 选 的 参数 ， 该 参数 指定 文本 的 编码 方式 。 如 采 不 传递 该 参 
数 ， 则 自动 会 采用 ASCII 和 UTEF-8 文 本 (也 可 以 通过 标记 字 节 顺序 的 
UTF-16 文 本 或 者 BOM) 处 理 。 


在 FileReader 访 了 指定 的 Blob 的 时 候 ， 写 会 更 新 它 的 readyState 属 性 。 该 
属性 值 开始 是 0， 表 示 还 未 读 取 任何 信息 。 当 读 取 人 到 一 些 数 据 的 时 候 ， 
它 会 变 成 1， 而 当 数 据 完 全 读 取 完毕 后 ， 该 值 会 变 成 2。 它 的 result 属 性 
包含 部 分 或 者 完整 的 结果 〈 字 符 串 或 者 ArrayBuffer 形 式 ) 。 一 般 不 会 
直接 轮 询 state 和 result 属 性 ， 而 是 在 onprogre ss 或 者 onload 事 件 处 理 程序 
中 使 用 它们 。 


22-11 展 示 了 如 何 使 用 readAsText(0 方 法 读 取 用 户 选 择 的 本 地 文本 文 


例 22-11: 使 用 FileReader 读 取 文 本 文件 


<script>// 读 取 指 定 文 本 文件 并 将 内 容 显 示 在 下 面 的 <pre> 元 素 中 


function readfile(f){ 


var reader=new FileReader();// 创 建 一 个 FileReader 对 象 


reader .readAsText(f) ;// 读 取 该 文件 


reader .onload=function( ){// 定 义 一 个 事件 处 理 程 请 


var text=reader.result;// 这 是 文件 内 容 


var out=document .getElementById("output");// 查 询 output 元 素 


out .innerHTML="";// 清 除 该 元 素 内 容 


out.appendChild(document.createTextNode(text));// 显 示 文 件 内 容 


} 


reader .onerror=function(e){// 如 果 发 生 了 错误 


console.1l0og("Error",e);// 将 错误 以 日 志 形式 输出 


}; 


</script> 
Select the file to display: 
<input type="file"onchange="readfile(this.files[0])"></input> 


<pre id="output"></pre> 


readAsArrayBuffer() 方 法 和 readAsText() 方 法 类 似 ， 不 同 的 是 ， 它 额外 多 
做 了 一 些 处 理 将 结果 以 ArrayBuffer 形 式 返 回 ， 而 不 是 字符 串 形 式 。 例 
22-12 展 示 了 如 何 使 用 readAsArrayBuffer0 方 法 ， 以 高 位 优先 字 下 顺序 读 
取 文 件 的 前 4 个 字 节 。 


例 22-12: 读 取 文件 的 前 4 个 字 节 


<script>// 检 测 指 定 的 blob 的 前 4 个 字 节 


al 
上 证 ， 


// 如 果 这 个 幻 数 标 识 文件 的 类 型 ， 那 么 就 将 其 异步 地 设置 成 Blob 的 属性 


function typefile(file){ 


var slice=file,slice(9,4);// 只 读 取 文 件 起 始 部 分 


i 


var reader=new FileReader();// 创 建 一 个 异步 的 FileReader 对 象 


reader .readAsArrayBuffer(slice);// 读 取 文件 片段 


reader .onload=function(e){ 


var buffer=reader .result;//ArrayBuffer 形 式 的 结果 


var view=new DataView(buffer );// 访 问 结果 中 的 字 节 内 容 


var magic=view.getUint32(09, false);// 以 高 位 优先 字 节 顺序 ， 读 取 4 个 字 节 


switch(magic){// 从 中 检测 文件 类 型 


case QOx89504E47:file.verified type="image/png";break; 


case QOx47494638:file.verified type="image/gif";break; 
case Ox25504446:file.verified type="application/pdf";break; 
case Ox504b0304:file.verified type="application/zip";break; 


} 

console.log(file.name, file.verified type); 
}; 

} 

</script> 


<input type="file"onchange="typefile(this.files[0])"></input> 


在 Worker 线 程 中 ， 可 以 使 用 FileReaderSync 取 代 FileReader。 同 步 版 本 的 
API 同 样 定 义 了 readAsText() 方 法 和 readAsArrayBuffer() 方 法 ， 它 们 和 异 
步 版 本 的 方法 接收 同样 的 参数 。 不 同 的 地 方 是 同步 方法 会 阻塞 住 ， 一 
直到 操作 完成 并 以 字符 串 或 者 ArrayBuffer 形 式 返 回 结 果 ， 并 且 不 需要 
使 用 事件 处 理 程序 。 下 面 的 例 22-14 就 使 用 FileReaderSync 。 


22.7 文件 系统 API 


22.6.5 “下 介 绍 过 使 用 FileReader 类 来 读 取 用 户 选择 的 文件 或 者 任意 Blob 
的 内 容 。 其 中 文件 的 类 型 和 Blob 类 型 是 在 一 份 名 为 文件 API 的 标准 草案 
中 定义 的 ， 另 外 还 有 一 份 比 文件 API 更 新 的 标准 草案 ， 它 允许 Web 应 用 
对 一 个 私有 的 文件 系统 “ 沙 箱 ” 进 行 写 文 件 、 读 文件 、 创 建 目录 、 列 出 

目 邓 等 一 些 操 作 。 截 至 撰写 本 书 时 ， 只 有 Google 的 Chrome 济 哎 如 实现 
了 此 文件 系统 API， 尽 管 此 API 相 比 于 本 章 介 绍 的 其 他 API， 甚 至 都 还 不 
够 稳定 ， 但 是 它 依然 是 非常 强大 的 ， 并 且 对 本 地 存储 亏 生 尤为 重要 
的 ， 因 此 这 里 将 会 它 进行 介绍 。 本 和 会 介绍 基本 的 文件 系统 操作 ， 但 
征 不 会 对 API 所 有 的 特性 都 一 一 做 介绍 。 由 于 此 API 很 新 还 未 趋 于 稳 
定 ， 因 此 在 第 三 部 分 也 不 做 介绍 。 


操作 本 地 文件 系统 中 的 文件 分 万 以 下 几 步 : 在 先 ， 必 须要 获取 一 个 表 
示 本 地 文件 系统 的 对 象 。 在 Worker 线 程 中 可 以 使 用 一 个 同步 API 来 获取 
该 对 象 ， 相 应 地 在 主线 程 中 也 有 对 应 的 异步 API: 


// 同 步 地 获取 一 个 文件 系统 。 传 递 文件 系统 的 有 效 期 和 大 小 参数 


// 返 回 一 个 文件 系统 对 象 或 者 抛 出 错误 


var fs=requestFileSystemSync(PERSISTENT,1024*1024);// 异 步 版 本 的 API 需 要 使 用 回调 钞 数 来 处 理 成 
功 和 失败 的 情况 


requestFileSystem(TEMPORARY, // 有 效 期 


50*1024*1024, // 大 小 :5MB 


function(fs){//fs 就 是 该 文件 系统 对 象 


// 这 里 使 用 fs 进行 一 些 操 作 


}, 


function(e){// 这 里 e 是 一 个 错误 对 象 


console .10g(e);// 或 者 以 其 他 方式 处 理 它 


}); 


不 论 是 同步 版 本 的 API 还 是 异步 版 本 的 API， 都 可 以 指定 文件 系统 的 有 
效 期 和 大 小 。 一 个 永久 的 (PERSISTENT) 的 文件 系统 适用 于 想 要 永久 
存储 用 户 数据 的 web 应用。 除非 用 户 显 式 要 求 删 除 这 些 数据 ， 否 则 浏 质 
器 永远 都 不 会 删除 这 些 数 据 。 一 个 临时 的 〈TEMPORARY) 文件 系统 
适用 于 想 要 缓存 数据 ， 在 浏览 器 删除 该 文件 系统 任 然 可 以 操作 这 些 数 
据 有 的 Web 应 用 。 文 件 系 统 的 大 小 是 以 字 市 为 单位 指定 的 ， 并 且 其 大 小 应 
0 是.。 浏 览 器 可 能 会 强制 限 
页 。 


使 用 这 些 方法 获取 的 文件 系统 依赖 于 包含 它 的 文档 源 。 所 有 同 源 ( 主 
机 、 端 口 和 协议 的 文档 或 者 Web 应 用 共享 一 个 文件 系统 。 两 个 非 同 源 
的 文档 或 者 Web 应 用 拥有 完全 独立 的 文件 系统 。 同 时 ， 文 件 系统 和 用 户 
硬盘 上 其 他 的 文件 也 是 相互 隔离 的 :Web 应 用 是 无 法 拥有 整个 硬盘 的 
root 权 限 的 ， 或 者 说 无 法 访问 任意 的 文件 。 


要 注意 的 是 ， 这 些 画 数 名 字 中 都 有 "request'。 第 一 次 调用 的 时 候 ， 浏 览 
器 在 创建 一 个 文件 系统 并 授权 生前 ， 可 能 会 询问 用 户 是 否 允许 。 一 旦 
用 户 允 许 了 ， 接 下 来 调用 这 些 丽 数 的 时 候 ， 就 只 会 返回 一 个 表示 已 有 
本 地 文件 系统 的 对 象 。 


通过 上 壕 方法 获取 到 的 文件 系统 对 象 有 一 个 root 属 性 ， 该 属性 指向 文件 
系统 的 根 目 未 。 这 是 一 个 DirectoryEntry 对 象 ， 并 且 它 可 能 还 有 舰 套 的 
目 孙 ， 这 些 舱 套 的 目 孙 也 用 DirectoryEntry 对 象 表示 。 文 件 系 统 的 每 个 
目录 中 包含 的 文件 都 用 FileEntry 对 象 表 示 。DirectoryEntry 对 象 定义 一 些 
通过 路 径 名 (pathname) (如 果 指 定 的 名 字 不 存在 ， 它 们 会 根据 指定 
的 情况 来 创建 新 的 目录 或 者 文件 ) 获取 DirectoryEntry 对 象 和 FileEntry 对 
象 的 方法 。DirectoryEntry 对 象 还 定义 了 一 个 createReader(0 工 厂 方 法 ， 

用 于 返回 一 个 列 出 目录 内 容 列表 的 DirectoryReader 对 象 。 


FileEntry 类 定义 一 个 获取 表示 文件 内 容 的 File 对 象 (一 个 Blob) 的 方 
法 。 然 后 ， 可 以 使 用 FileReader 对 象 (22.6.5 节 介绍 过 ) 读 取 该 文件 。 
除 此 之 外 ，FileEntry 还 定义 一 个 方法 ， 该 方法 返回 一 个 FileWriter 对 
象 ， 用 该 对 象 可 以 将 内 容 写 入 到 文件 中 。 


通过 该 APT 读 取 或 者 写 入 文件 分 为 如 下 几 步 : 首先 要 获得 文件 系统 对 
象 。 然 后 通过 该 对 象 的 根 目录 来 查找 (也 可 以 创建 ) 需要 的 文件 的 
FileEntry 对 象 。 然 后 使 用 FileEntry 对 象 获 取 File 或 者 FileWriter 对 象 来 进 
行 读 / 写 操作 。 如 果 在 使 用 异步 API 的 情况 下 ， 这 几 步 过 程 会 更 加 复 
下 : 


// 读 取 文 本 文件 "hello .txt"， 并 将 其 内 容 以 日 志 的 形式 输出 


// 由 于 使 用 了 异步 API， 因 此 出 现 了 4 层 画 数 符 套 


// 此 例子 不 包括 任何 错误 回调 处 理 


requestFileSystem(PERSISTENT, 10*1024*1024, function(fs){// 获 取 文 件 系 统 


fs.root.getFile("hello.txt", {},function(entry){// 获 取 FileEntry 对 象 


entry.file(function(file){// 获 取 File 对 象 


Var reader=new FileReader(); 


reader .readAsText (file); 


reader .onload=function( ){// 获 取 文 件 内 容 


console.log(reader.result); 


}; 


}); 


}); 


}); 


例 22-13 古 一 个 更 加 完整 的 例子 ， 泗 副 了 很 多 内 容 。 它 展示 了 如 何 使 用 
异步 API 读 文件 、 写 文件 、 删 除 文 件 、 创 建 目 好 以 及 列 出 目录 。 


例 22-13: 使 用 异步 文件 系统 API 


yA 


* 这 些 函 数 在 Google Chrome19 .9 开发 版 中 都 测试 过 了 


* 启 动 Chrome 的 时 候 需 要 开启 这 些 选 项 : 


*--unlimited-quota-for-files: 启 用 文件 系统 访问 


*--allow-file-access-from-files: 人 允许 通过 file://URL 进 行 测试 


*/ 


// 这 里 使 用 的 大 部 分 异步 画 数 都 接受 一 个 可 选 的 错误 回调 参数 


// 这 里 的 回调 画 数 只 是 简单 地 将 错误 输出 


function logerr(e){fconsole.1og(e);}//requestFileSystem( ) 方 法 创建 了 一 个 在 沙 箱 环境 中 的 本 地 文 
件 系统 ， 


// 并 且 只 有 同 源 的 应 用 才 可 以 访问 


// 可 以 在 该 文件 系统 中 进行 文件 读 / 写 ,但 是 只 能 限定 在 该 沙 箱 中 


// 不 能 访问 其 他 的 文件 系统 


var filesystem;// 假 设 在 调用 下 面 的 函数 之 前 ， 已 经 初始 化 完毕 


requestFileSystem(PERSISTENT, // 或 者 采用 用 于 缓存 文件 的 临时 (TEMPORARY) 文件 系统 


10*1024*1024,//10MB 


function(fs){// 完 成 后 ， 调 用 此 方法 


filesystem=fs;// 将 文件 系统 保存 到 一 个 全 局 变量 中 


}, 


logerr );// 如 果 发 生 错 误 则 调用 此 方法 


// 以 文本 形式 读 取 指定 文件 的 内 容 ， 并 将 它们 传递 给 回调 范 数 


function readTextFile(path,callback){// 根 据 指定 的 文件 名 ， 调 用 getFile( ) 获 取 相 应 的 FileEntry 对 
象 


filesystem.root.getFile(path, {},function(entry){// 使 用 FileEntry 调 用 此 方法 来 获得 文件 


// 现 在 调用 FileEntry .file( ) 方 法 获取 File 对 象 


entry.file(function(file){//file 就 表示 File 对 象 


var reader=new FileReader();// 创 建 一 个 FileReader 对 象 


让 


reader .readAsText (file);// 读 取 文 伯 


reader .onload=function( ){// 当 读 取 成 功 时 


callback(reader .result);// 将 其 内 容 传 递 给 回调 函数 


reader .onerror=logerr;// 记 录 调 用 readAsText( ) 时 发 生 的 错误 


}, logerr ) ;// 记 录 调 用 file( ) 方 法 时 发 生 的 错误 


}, 


logerr ) ; // 记 录 调 用 getFile( ) 时 发 生 的 错误 


Tr 


// 将 指定 的 内 容 添加 到 指定 路 径 的 文 


FE 
3 


// 如 果 指 定 路 径 的 文件 不 存在 ， 则 使 用 该 文件 名 创建 一 个 新 的 文件 


// 完 成 之 后 ， 调 用 回调 函数 


function appendToFile(path,contents,callback){//filesystem.root 指 根 


filesystem.root .getFile(// 获 取 FileEntry 对 象 


path, // 想 要 获取 的 文件 的 名 字 和 路 径 


{create:true},// 如 果 不 存 在 则 创建 一 个 


function(entry){// 完 成 之 后 调用 此 函数 


Re 


entry.createwriter(// 为 该 文件 创建 一 个 FiLewriter 对 象 


function(writer ){// 创 建 完成 之 后 调用 此 函数 


// 默 认 情 况 下 ， 从 文件 最 开始 开始 写 入 


// 这 里 指定 从 文件 最 后 开始 写 


it 


池 
i 


writer.seek(writer .length);// 移 动 到 文 伯 


// 将 文件 内 容 转 换 成 Blob 


//contents 参 数 可 以 是 字符 串 、Blob 或 者 ArrayBuffer 


Var bb=new BlobBuilder() 


bb .append(contents ) ; 


var blob=bb.getBlob( );// 现 在 将 该 Blob 写 入 到 文件 中 


writer .write(blob); 


writer .onerror=logerr;// 记 录 调 用 writer( ) 方 法 时 发 生 的 错误 


I 


if(callback)// 如 果 有 回调 函数 


writer .onwrite=callback;// 则 成 功 的 时 候 调 


}, 


logerr ) ; // 记 录 调 用 createwriter() 方 法 时 发 生 的 错误 


}, 


logerr ) ; // 记 录 调 用 getFile( ) 方 法 时 发 生 的 错误 


/7 删除 指定 的 文件 ， 完 成 后 调用 指定 的 


调 函 数 


function deleteFile(name,callback){ 


filesystem.root .getFile(name,{},// 根 据 指定 的 名 字 获 取 相 应 的 FijleEntry 对 象 


function(entry){//entry 就 是 该 FileEntry 对 象 


entry.remove(callback, // 删 除 FileEntry 对 象 


logerr ) ;// 或 者 记录 调用 remove ( ) 方 法 时 发 生 


// 的 错误 


}, 


logerr ) ; // 记 录 调 用 getFile( ) 方 法 时 发 生 的 错误 


// 根 据 指定 的 名 字 创 建 一 个 新 的 目录 


function makeDirectory(name,callback)t{ 


filesystem.root.getDirectory(name,// 要 创建 的 目录 的 名 字 


{// 选 项 


create:true, // 如 果 不 存 在 ， 则 创建 


exclusive:true// 如 果 存 在 ， 则 报错 


}, 


callback, // 完 成 后 调用 此 方法 


logerr ) ; // 记 录 错 误 


// 读 取 指 定 目录 的 内 容 ， 并 以 字符 串 数 组 的 形式 将 内 容 传递 给 指定 的 回调 函数 


function listFiles(path,callback){// 如 果 指 定 的 内 容 不 存在 ， 则 列 出 根 


// 和 否则 ， 根 据 名 字 查 找 目 录 并 将 目录 内 容 列 出 来 〈 或 者 如 果 发 生 错误 就 记录 错误 ) 


if(!path)getFiles(filesystem.root); 


else filesystem.root.getDirectory(path, {},getFiles, logerr); 


function getFiles(dir)f{// 此 方法 在 之 前 也 使 用 过 


var reader=dir.createReader();// 一 个 DirectoryReader 对 和 象 


var list=[];// 用 来 存储 文件 名 


reader ,readEntries(handleEntries,// 将 每 项 都 传递 给 下 面 的 函数 


logerr ) ; // 或 者 记录 错误 


// 读 取 目 录 可 以 分 成 很 多 步 


// 必 须 一 直 调 用 readEntries( ) 方 法 直到 获取 到 空 数组 为 止 
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将 整个 列表 传递 给 回调 函数 
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function handleEntries(entries){ 


if(entries.length==0)callback(1ist);// 完 成 


else{// 否 则 ， 将 这 些 项 添加 到 列表 中 ， 并 继续 读 取 


// 此 类 数组 对 象 包含 FileEntry 对 象 


// 这 里 需要 挨个 获取 它们 的 名 字 


for(var i=0;i<entries.length;i++){ 


var name=entries[i].name;// 获 取 名 字 


if(entries[i].isDirectory)name+="/";// 标 记 目 录 


list .push(name);// 添 加 到 列表 中 


// 获 取 下 一 批 项 


reader .readEntries(handleEntries, logerr); 


在 Worker 线 程 中 操作 文件 和 文件 系统 会 更 加 容易 些 ， 由 于 Worker 线 程 
中 都 是 阻塞 调用 ， 因 此 可 以 使 用 同步 的 API。 例 22-14 定 义 了 与 例 22-13 
同样 的 文件 系统 工具 函数 ， 不 同 的 是 它 使 用 同步 的 API， 代 码 也 更 加 精 


A 


简 。 


例 22-14: 同步 文件 系统 API 


// 在 Worker 线 程 中 使 用 同步 API 实 现 的 文件 系统 工具 函数 


Var filesystem=requestFileSystemSync(PERSISTENT,10*1024*1024); 


了 从 FileEntry 中 获取 


function readTextFile(name){// 从 根 DirectoryEntry 中 获取 FileEntry 对 象 ， 


File 


var file=filesystem.root.getFile(name).file();// 使 用 同步 FileReaderAPI 读 取 


return new FileReaderSync().readAsText (file); 


function appendToFile(name,contents){// 从 根 DirectoryEntry 中 获取 FileEntry 对 象 ， 再 从 


FileEntry 中 获取 Filewriter 


Var writer=filesystem,.root.getFile(name, {create:true}).createwriter(); 


writer.seek(writer.length);// 从 文件 最 后 开始 


var bb=new BlobBuilder()// 将 文件 内 容 构造 进 Blob 中 


bb.append(contents); 
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writer .write(bb.getBlob());// 将 Blob 写 入 文 伯 


function deleteFile(name){ 


filesystem.root.getFile(name).remove(); 


function makeDirectory(name ){ 


filesystem.root.getDirectory(name, {create:true,exclusive:true}); 


function listFiles(path){ 


Var dir=filesystem,.root; 


if(path)dir=dir.getDirectory(path); 


Var lister=dir.createReader(); 


Var list=[]; 


dof{ 


var entries=lister.readEntries(); 


for(var i=0;i<entries.length;i++){ 


var name=entries[i].name; 


if(entries[i].isDirectory)namet+="/"; 


list.push(name); 


} 


}while(entries.length>0); 


return list,; 


} 


// 人 允许 主线 程 通过 发 送 消 息 来 使 用 这 些 工 具 函 数 


onmessage=function(e){// 消 息 是 如 下 形式 的 对 象 


//{function:"appendToFile",args:["test","testing,testing"]} 


// 根 据 指定 的 args 调 用 指定 的 画 数 
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将 结果 消息 发 送 回去 


Var f=self[e.data.function]; 
var result=f.apply(null,e.data.args); 
postMessage(result); 


}; 


22.8 客户 端 数据 库 


传统 的 Web 应 用 架构 是 客户 端 包含 HTML、CSS 和 JavaScript， 服 务 器 端 
包含 一 个 数据 库 。 而 通过 强大 的 HTML5 API 可 以 实现 客户 端 数据 库 。 
这 些 不 是 通过 网 络 访问 服务 器 端 数据 库 的 客户 端 API， 而 是 真正 存储 在 
人 ee 端 数据 库 ， 通 过 浏览 避 中 的 JavaScript 代 码 可 以 直接 
访问 的 。 


20.1 节 介 绍 过 的 Web 存 储 API 可 以 认为 是 一 种 简单 的 数据 库 ， 用 于 将 
人 简单 的 键 / 值 对 形式 的 数据 持久 化 下 来 。 但 是 ， 除 此 之 外 ， 还 有 两 个 真 


正 的 客户 端 数据 库 API。 其 中 一 个 叫 Web SQL 数据 库 ， 它 是 文 持 基 本 
SQL 查询 的 简单 关系 数据 库 。Chrome、Safari 和 Opera 已 经 实现 了 该 
API， 但 是 Firefox 和 IE 还 没有 ， 并 且 看 起 来 也 不 打算 实现 了 。 官 方 标准 
中 关于 此 API 的 工作 已 经 停止 了 ， 此 功能 齐全 的 SQL 数据 库 或 许 永 远 也 
哪怕 是 作为 Web 平 台 非 官方 的 交互 特性 芍 怕 也 不 大 
可 能 。 


目前 官方 标准 已 经 将 注意 力 转移 到 了 另 一 种 数据 库 API， 叫 做 : 
IndexedDB“。 介 绍 关于 此 API 的 详细 细节 还 为 时 过 早 (本 书 第 四 部 分 没 
有 对 其 做 相应 介绍 ) ， 但 是 Firefox 4 和 Chrome 11 已 经 实现 了 此 API， 同 
本 节 也 包含 了 一 些 例 子 ， 展 示 了 IndexedDB API 中 一 些 最 重要 的 特 


IndexedDB 有 是 一 个 对 象 数据 库 ， 而 不 是 关系 数据 库 ， 它 比 文 持 SQL 查询 
的 数据 库 简单 多 了 。 但 是 ， 它 要 比 Web 存 储 API 文 持 的 键 / 值 对 存储 更 强 
大 、 更 高 效 、 更 健壮 。 与 Web 存 储 和 文件 系统 API 一 样 ，IndexedDB 数 
据 库 的 作用 域 也 是 限制 在 包含 它们 的 文档 源 中 : 两 个 同 产 的 Web 页 面 互 
相 之 间 可 以 访问 对 方 的 数据 ， 但 是 非 同 源 的 页 面 则 不 行 。 


每 个 源 可 以 有 任意 数目 的 IndexedDB 数 据 库 。 但 是 每 个 数据 库 的 名 字 在 
该 源 下 必须 是 唯一 的 。 在 IndexedDB API 中 ， 一 个 数据 库 其 实 就 是 一 个 
命名 对 象 存 储 区 (object store) 的 集合 。 顾 名 思 义 ， 对 象 存储 区 自然 存 
储 的 是 对 象 (也 可 以 存储 任意 可 以 复制 的 值 一 一 参见 22.2 节 的 “结构 性 
复制 >” 。 每 个 对 象 都 必须 有 一 个 键 (key) ， 通 过 该 键 实现 在 存储 区 
中 进行 该 对 象 的 存储 和 获取 。 键 必须 是 唯一 的 同一 个 存储 区 中 的 
两 个 对 象 不 能 有 同样 的 键 一 一 并 且 它 们 必须 是 按照 自然 顺序 存储 ， 以 
便于 查询 。JavaScript 中 的 字符 串 、 数 字 和 日 期 对 象 都 可 以 作为 该 键 。 
当 把 一 个 对 象 存储 到 IndexedDB 数 据 库 中 时 ，IndexedDB 数 据 库 可 以 为 
该 对 象 自动 生成 一 个 唯一 的 键 。 不 过 ， 通 常情 况 下 ， 存 储 一 个 对 象 的 
时 候 ， 该 对 象 就 已 经 包含 一 个 属性 ， 该 属性 适合 用 做 键 。 这 种 情况 
下 ， 在 创建 一 个 对 象 存 储 的 时 候 ， 可 以 为 该 属性 指定 一 条 “ 键 路 径 ”。 
从 概念 上 来 说 ， 键 路 径 其 实 束 是 一 个 值 ， 用 于 告诉 数据 库 如 何 从 一 个 
对 象 中 抽取 出 该 对 象 的 键 。 


除了 通过 键 值 从 一 个 对 象 存储 区 中 获取 对 象 以 外 ， 可 能 还 想 要 能 够 基 
于 该 对 象 中 的 其 他 属性 值 进行 查询 。 要 实现 该 功能 ， 可 以 通过 在 对 和 象 
存储 区 上 定义 索引 。 (之 所 以 叫 "IndexedDB" 就 是 因为 可 以 在 对 象 存储 
区 上 创建 索引 ) 。 每 一 个 索引 就 等 于 是 为 存储 的 对 象 定义 了 次 键 。 这 


些 索引 通常 都 不 是 唯一 的 ， 多 个 对 象 也 可 能 匹配 一 个 键 值 。 因 此 ， 当 
通过 索引 在 对 象 存储 区 中 进行 查询 的 时 候 ， 通 常 需要 使 用 游标 
(cursor) ， 它 定义 一 个 用 于 一 次 一 个 地 获取 流 查 询 结果 的 API。 在 当 
需要 在 对 象 存储 区 〈 或 者 索引 中 ) 查询 一 定 范围 的 键 的 时 候 还 可 以 使 
用 游标 ，IndexedDB API 包 含 一 个 用 于 描述 键 值 范围 《上限 和 /或 下 限 ， 
开 区 间或 者 闭 区 间 ) 的 对 象 。 


Indexed DB 提供 原子 性 的 保证 ， 对 数据 库 的 查询 和 更 新 部 是 包含 在 一 个 
事务 (transaction) 中 ， 以 此 来 确保 这 些 操作 要 么 是 一 起 成 功 ， 要 么 是 
一 起 失败 ， 并 且 永 远 不 会 让 数据 库 出 现 更 新 到 一 半 的 情况 。IndexedDB 
后 面 会 再 次 介绍 它 
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从 概念 上 来 说 ，IndexedDB API 非 党 简单。 要 查询 或 者 更 新 数据 库 ， 首 
先 打开 该 数据 库 (通过 指定 名 字 ) 。 然 后 ， 创 建 一 个 事务 对 象 ， 并 使 
用 该 对 象 在 数据 库 中 通过 指定 名 字 查 询 对 象 存储 区 。 最 后 ， 调 用 对 象 
存储 区 的 get0 方 法 来 查询 对 象 或 者 调用 put() 方 法 来 存储 新 的 对 象 。 (或 
者 如 果 要 避免 覆盖 已 存在 对 象 的 情况 ， 可 以 调用 add() 方 法 ) 。 如 果 想 
要 查询 表示 键 值 范围 的 对 象 ， 通 过 创建 一 个 IDBRange 对 象 ， 并 将 其 传 
弟 给 对 象 存储 区 的 openCursor(0 方 法 。 或 者 ， 如 果 想 要 使 用 次 键 进行 查 
询 的 话 ， 通 过 查询 对 象 存 储 区 中 的 命名 索引 ， 然 后 调用 索引 对 象 上 的 
get(0) 方 法 或 者 openCursor(0) 方 法 。 


然而 ， 这 种 概念 简易 性 还 是 比较 复杂 的 ，IndexedDB API 必 须要 是 异步 
的 ， 这 样 能 够 实现 让 Web 应 用 使 用 这 些 API 的 同时 又 不 阳 塞 浏览 右 的 UI 
主线 程 。 (IndexedDB 标 准 定 义 了 一 个 给 Worker 线 程 使 用 的 同步 版 本 的 
API， 不过， 截至 撰写 本 书 时 ,浏览 絮 都 没有 实现 该 API， 因 此 这 里 不 
做 介绍 。) 创建 事务 以 及 查询 对 象 存储 区 和 索引 是 比较 简单 的 同步 操 
作 。 但 是 ， 打 开 数 据 库 、 通 过 put(0) 方 法 更 新 对 象 存储 区 、 通 过 get(0) 方 法 
或 openCursorO 查 询 对 象 存储 区 或 者 索引 ， 这 些 操作 都 是 异步 的 。 这 些 
异步 方法 都 会 立即 返回 一 个 request 对 象 。 当 请 求 成 功 或 者 失败 的 时 
候 ， 浏 览 器 会 在 该 request 对 象 上 出 触发 对 应 的 success 事 件 或 者 error 事 
件 ， 与 此 同时 ， 还 可 以 通过 onsuccess 属 性 和 onerror 属 性 来 定义 事件 处 
理 程序 。 在 onsuccess 处 理 程序 中 ， 可 以 通过 request 对 象 的 result 属 性 来 
获取 操作 的 结果 。 


异步 API 中 一 个 比较 方便 的 特性 吏 是 它 简 化 了 事务 管理 。 使 用 
IndexedDB API 的 时 候 ， 通 帝 是 先 打开 数据 库 。 这 古 一 个 异步 的 操作 ， 


因此 它 会 触发 onsucccess 事 件 处 理 程序 。 在 该 处 理 程序 中 ， 创 建 一 个 事 
务 对 象 ， 然 后 使 用 该 事务 对 象 来 查询 对 象 存 储 区 或 者 使 用 的 存储 区 。 
之 后 ， 调 用 该 对 象 存 储 区 上 的 get(0 方 法 和 put0 方 法 。 所 有 这 些 操作 都 是 
异步 的 ， 因 此 不 会 立马 有 结果 ， 但 是 ， 通 过 调用 get(0 方 法 和 put(0) 方 法 生 
成 的 请 求 会 目 动 和 事务 对 象 关联 。 如 果 需 要 的 话 ， 可 以 通过 调用 事务 
对 象 的 abort() 方 法 来 撤销 事务 中 所 有 挂 起 的 操作 (也 可 以 撤销 已 经 完成 
的 操作 ) 。 在 许多 其 他 的 数据 库 API 中 ， 事 务 对 象 都 需要 调用 commit(0) 
方法 来 完成 事务 。 然 而 ， 在 IndexedDB 中 ， 在 创建 该 事务 对 象 的 原始 
onsuccess 事 件 处 理 程序 退出 ， 并 上 且 浏览 器 返 回 到 事件 循环 中 以 及 事务 
中 所 有 挂 起 的 操作 都 完成 之 后 ， 就 会 提交 事务 (不 需要 在 它们 的 回调 
函数 中 开始 新 的 操作 ) 。 这 听 起 来 貌似 很 复杂 ， 事 实 上 ， 实 践 起 来 非 
常 容易。 尽管 ， 在 查询 对 象 存 储 区 的 时 候 ，IndexedDB API 强 制 要 求 创 
建 事 务 对 象 ， 但 是 ， 通 常情 况 下 ， 不 必 考 虑 太 多 事务 问题 。 


最 后 ， 还 有 一 种 特殊 的 事务 ， 它 是 IndexedDB API 中 很 重要 的 一 部 分 。 
通过 IndexedDB API 创 建 一 个 新 的 数据 库 是 很 容易 的 : 只 需要 选 个 名 字 
然后 要 求 打开 该 数据 库 。 不 过 ， 痢 的 数据 库 是 完全 衬 的 ， 除 非 将 一 个 
或 多 个 对 象 存储 区 (索引 也 可 以 ) 添加 到 该 数据 库 中 ， 否 则 该 数据 库 
只 是 摆设 ， 毫 无 用 处 。 创 建 对 象 存储 区 和 索引 只 能 在 request 对 象 的 
onsuccess 事 件 处 理 程序 中 完成 ，reqdquest 对 象 是 调用 数据 库 对 象 的 
setVersion() 方 法 返回 的 。setVersion() 方 法 用 于 指定 数据 库 的 版 本 号 一 一 
通常 都 是 这 么 用 的 ， 每 次 更 改 数据 库 结 构 的 时 候 就 更 新 该 版 本 号 。 但 
是 ， 更 重要 的 是 ， 调 用 setVersion() 方 法 会 隐 式 地 开始 一 类 特殊 的 事务 ， 
在 该 事务 中 ， 人 允许 调用 数据 库 对 象 的 createObjectStore() 方 法 和 对 象 数据 
区 的 createIndex() 方 法 。 


对 IndexedDB 有 了 一 定 认识 ， 现 在 应 该 能 够 看 懂 例 22-15 了 “。 该 例 使 用 
IndexedDB 来 创建 和 查询 一 个 数据 库 ， 该 数据 库 包 含 美 国 邮 政 编码 和 城 
市 的 映射 信息 。 它 展示 大 部 分 〈 但 非 全 部 ) IndexDB 基 础 特性 。 截 至 撰 
写本 书 上 时， 该 例 在 Firefox 4 和 Chrome 11 中 都 工作 正常 ， 但 是 ， 由 于 
IndexedDB 的 标准 也 未 稳定 ， 相 应 的 实现 也 都 是 初步 的 ， 因 此 ， 很 有 可 
能 当 你 阅读 本 书 的 时 候 ， 它 就 已 经 无 法 工作 了 。 但 是 ， 不 管 怎么 说 ， 
该 例 总 体 的 结构 还 是 很 有 用 的 。 例 22-15 代 码 很 长 ， 为 了 能 够 有 助 于 理 
解 ， 添 加 了 很 多 的 注释 。 


例 22-15: 存储 美国 邮政 编码 的 IndexedDB 数 据 库 


<!DOCTYPE html> 


<html> 


<head> 


<title>Zipcode Database</title> 


<script>//IndexedDB 的 实现 仍然 使 用 API 前 级 


var indexedDB=window.indexedDB||// 使 


标准 的 DB API 


he 


版 本 的 IndexedDB 


window.mozIndexedDB | |// 或 者 Firefox 早 基 


window.webkitIndexedDB;// 或 者 Chrome 的 早期 版 本 


// 这 两 个 API，Firefox 没 有 前 级 


var IDBTransaction=window.IDBTransaction| |window.webkitIDBTransaction; 


var IDBKeyRange=window.IDBKeyRange| |window.webkitIDBKeyRange;// 使 
录 发 生 的 数据 库 错误 


function logerr(e){ 


console.log("IndexedDB error"+e.code+":"+e.message); 


// 此 画 数 异步 地 获取 数据 库 对 象 (需要 的 时 候 ， 用 于 创建 和 初始 化 数据 库 ) ， 


// 然 后 将 其 传递 给 f( ) 画 数 


function withDB(T){ 


var request=indexedDB.open("zipcodes");// 获 取 存 储 邮政 编码 的 数据 库 


request .onerror=logerr;// 以 日 志 的 方式 记录 发 生 的 错误 


| 


request .onsuccess=function( ){// 或 者 完成 的 时 候 调用 此 


此 画 数 ， 以 


志 的 形式 记 


var db=request.result;//request 对 象 的 result 值 就 表示 该 数据 库 


// 即 便 该 数据 库 不 存在 ， 也 总 能 够 打开 它 


// 通 过 检查 版 本 号 来 确定 数据 库 是 否 已 经 创建 或 者 初始 化 


// 如 果 还 没有 ， 就 做 相应 的 创建 或 者 初始 化 的 工作 


// 如 果 db 已 经 存在 了 ， 那 么 只 需要 将 它 传递 给 回调 函数 f( ) 就 可 以 了 


if(db.version==="1")f(db);// 如 果 db 已 经 初始 化 了 ， 就 直接 将 它 传递 给 f( ) 函数 


else initdb(db,ff);// 否 则 ， 先 初始 化 db 


// 给 定 一 个 邮政 编码 ， 查 询 该 邮政 编码 属于 哪个 城市 ， 


// 并 将 该 城市 名 异步 传递 给 指定 的 回调 函数 


function lookupCity(zip,callback){ 


withDB(function(db){// 为 本 次 查询 创建 一 个 事务 对 象 


xl 


var transaction=db.transaction(["zipcodes"],// 所 需 的 对 象 存储 区 


IDBTransaction.READ_ONLY, // 没 有 更 新 


0);// 没 有 超时 


[xl 


// 从 事务 中 获取 对 象 存储 


var objects=transaction.objectStore("zipcodes");// 查 询 和 指定 的 邮政 编码 的 键 匹 配 的 对 象 


// 上 述 代 码 是 同步 的 ， 但 是 这 里 的 是 异步 的 


Var request=objects.get(zip); 


request.onerror=logerr;// 以 


志 形 式 记录 发 和 9 


E 的 错误 


request.onsuccess=function(){// 将 


//result 对 象 可 以 通 


过 request .result 属 


属性 获取 


Var object=redquest,result 


if(object )// 如 到 


查询 到 了 ， 就 将 城市 和 州 名 传递 给 


| 


callback(object.city+", "+object. state); 


else// 和 否则 ， 告 诉 


可 调 函 数 ， 失 败 了 


callback("Unknown zip code"); 


}); 


// 给 定 城市 名 ( 


x 分 大 小 写 ) ， 来 查询 对 应 的 


Bb 政 编码 


// 然 后 挨个 将 结果 异步 地 传递 给 指定 的 


I 


调 函 数 


function lookupZipcodes(city,callback){ 


有 


withDB(function(db){// 和 上 述 的 情况 一 致 ， 创 建 一 个 双 


丘 和 好 子 
J 区 


# 获 取 对 象 存 储 


义 


var transaction=db.transaction(["zipcodes"],IDBTransaction,READ_ONLY70); 


var store=transaction.objectStore("zipcodes");// 这 次 ， 从 对 象 存储 


[Ba 


FP 获取 城市 索引 


var index=store.index("cities");// 此 次 查询 可 能 会 返回 很 多 结果 ， 基 


此 ， 必 须 使 


// 要 创建 一 个 游标 ， 需 要 一 个 表示 键 值 范围 


游标 对 象 来 获取 它们 


的 range 对 象 


var range=new IDBKeyRange.only(city);// 传 递 


| 


个 


有 E 键 给 only ( ) 方 法 获取 一 个 range 对 象 


// 上 述 所 有 的 操作 都 是 同步 的 


于 


// 现 在 ， 请 求 一 个 游标 ， 它 会 以 异步 的 方式 返 


var request=index.openCursor (range);// 获 取 该 游标 


request .onerror=logerr;// 记 录 错 误 


request .onsuccess=function( ){// 将 游标 传递 给 此 画 数 


// 此 事件 处 理 程序 会 调用 多 次 ， 


3 


配 查 询 的 记录 会 调用 一 次 ， 


// 每 次 有 匹 


// 然 后 当 标 识 操作 结束 的 nu11 游 标 出 现 的 时 候 ， 也 会 调用 一 次 


var cursor=redquest,.result// 通 过 request .resulLt 获 取 游 标 


if( 1!1cursor)return;// 如 果 没 有 游标 就 说 明 没有 结果 了 


var object=cursor .value// 获 取 匹 配 的 数据 项 


callback(object );// 将 其 传递 给 回调 函数 


cursor .continue( );// 继 续 请 求 下 一 个 匹配 的 数据 项 


}; 


}); 


// 下 面 展 示 的 ，document 中 的 onchange 回 调 函 数 会 用 到 此 方法 


// 此 方法 查询 数据 


懈 示 查询 到 的 结果 


NM 
4 


function displayCity(zip){ 


lookupCity(zip,function(s){document.getElementById('city').value=s;}); 


// 这 是 下 面 的 文档 中 使 用 的 另 一 个 onchange 回 调 函 数 


// 它 查询 数据 


并 展示 查询 到 的 结果 


rt 
| 
1 
t 


function displayZipcodes(city)t{ 


var output=document .getElementById("zipcodes"); 


output ,innerHTML="Matching zipcodes:",; 


lookupZipcodes(city,function(o){ 


var div=document.createElement ("div"); 


Var text=o.zipcode+":"+0.city+","+0.state; 


div.appendchild(document.createTextNode(text)); 


output.appendchild(div); 


}); 


// 建 立 数据 库 的 结构 ， 相应 的 数 所 


// 然 后 将 该 数据 库 传递 给 f( ) 函数 


居 填 元 它 ， 


// 如 果 数 据 库 还 未 初始 化 ，withDB( ) 画 数 会 调用 此 画 数 


// 这 也 是 此 程序 中 最 巧妙 的 部 分 


function initdb(db,ff){// 第 一 次 运行 此 应 用 的 时 候 ， 


/ /下载 邮政 编码 数据 


el 


秆 它们 存储 到 数据 库 中 ， 需 要 花 一 些 时 间 


// 因 此 在 下 载 过 程 中 ， 有 必要 给 出 提示 


var Statusline=document ,createEJement("div") ， 


Statusline,Style.cSSText= 


"position:fixed;left:Opx;top:Opx;width:100%; "二 


"color:white;background-color:black;font:bold 18pt sans-serif;"+ 


"padding:10px;"; 


document .body.appendchild(statusline); 


function status(msg){statusline.innerHTML=msg.toString();}; 


status("Initializing zipcode database");// 只 有 在 setVersion 请 求 的 onsuccess 处 理 程序 中 才能 久 


义 或 者 修改 IndexedDB 数 据 库 的 结构 


人 


var request=db.setVersion("1");// 试 着 更 新 数据 库 的 版 本 号 


request .onerror=status;// 失 败 的 话 ， 显 示 状 态 


request .onsuccess=function( ){// 否 则 ， 调 用 此 函数 


[xl 


// 这 里 邮政 编码 数据 库 只 包含 一 个 对 象 存储 


// 该 存储 区 包含 如 下 形式 的 对 象 : { 


//zipcode:"02134", 


// 发 送 到 Zoom 


//city:"Allston", 


//state:"MA", 


//latitude:"42.355147", 


//longitude:"-71.13164" 


//} 


// 


// 使 用 对 象 的 "zipcode" 属 和 


辕 性 作为 数据 库 的 键 


// 同 时 ， 使 用 城市 名 来 创建 索引 


// 创 建 一 个 对 象 存储 


义 


区 ， 并 为 该 存储 区 


又 
mt 
4 


E 一 个 名 字 


// 


| 


时 也 为 包含 指定 该 存储 区 中 键 字段 属性 名 的 键 路 径 的 一 个 可 选 对 象 指定 名 字 


// (如 果 省 略 键 路 径 ，IndexedDB 会 定义 它 自 己 的 唯一 的 整 型 键 ) 


var store=db.create0bjectStore("zipcodes",// 存 储 区 名 字 


{keyPath:"zipcode"});// 通 过 城市 名 以 及 邮政 编 


码 来 索引 对 象 存储 


区 


// 使 用 此 方法 ， 表 示 键 路 径 的 字符 串 要 


接 传递 过 去 ， 


// 并 且 是 作为 必需 的 参数 而 不 是 可 选 对 象 的 一 部 分 


store.createIndex("cities", "city");// 现 有 


E， 需 要 下 载 邮政 编码 数据 


， 将 它们 解析 成 对 象 ， 


// 并 将 这 些 对 象 存 储 到 : 


前 创建 的 对 象 存 储 区 


x 
bl 
妓 


// 


// 包 含 原始 数据 的 文件 内 容 格 式 如 下 : 


// 


//02130, Jamaica Plain,MA, 42.309998, -71.11171 
//02131, Roslindale, MA, 42.284678, -71.13052 
//02132,West Roxbury,MA,42.279432, -71.1598 
//02133, Boston, MA, 42.338947, -70.919635 


//02134,Allston, MA, 42.355147, -71.13164 


// 


// 令 人 吃惊 的 是 ， 美 国 邮政 服务 居然 没有 将 这 些 数据 开放 


// 因 此 ， 这 里 使 用 了 统计 出 来 的 过 期 的 邮政 编码 数据 


// 这 些 数 据 均 来 


//http://mappinghacks.com/2008/04/28/civicspace-zip-code-database/ 


// 使 用 XMLHttpRequest 下 载 这 些 数据 


// 但 在 获取 到 数据 后 ， 使 用 新 的 XHR2 onload 事 件 和 onprogress 事 件 来 处 理 


var xhr=new XMLHttpRequest();// 下 载 数据 所 需 的 XHR 对 象 


xhr .open("GET", "zipcodes.csv");// 利 用 HTTP GET 方 法 获取 此 URL 指 定 的 内 容 


xhr .send( ) ;// 直 接 获 取 


xhr .onerror=status;// 显 示 错 误 状 态 


var lastchar=0,numlines=0;// 已 经 处 理 的 数量 


// 获 取 数 据 后 ， 批 量 处 理 数据 库 文件 


xhr .onprogress=xhr .onload=function(e){// 一 个 函数 同时 作为 两 个 事件 处 理 程序 


// 在 接收 数据 的 lastchar 和 lastNewline 之 间 处 理 数据 块 (需要 查询 newlines， 


庆 二 


// 因 此 不 需要 处 理 部 分 记录 项 ) 


Var lastNewline=xhr.responseText.JlastIndexof("\n"); 


if(lastNewline>lastchar)t 


var chunk=xhr.responseText.substring(lastCchar,1lastNewline) 


lastchar=lastNewline+1;// 记 录 下 次 从 哪里 开始 


// 将 新 的 数据 块 分 割 成 单独 的 行 


Var lines=chunk.split("\n"); 


numlines+=lines.length;// 为 了 将 邮政 编码 数据 库存 储 到 数据 


车 中 ， 


// 这 里 需要 事务 对 象 


// 在 该 此 函数 返 


// 浏 览 器 返 下 


山中 
用 


// 要 创建 事务 对 象 ， 需 要 指定 要 使 用 的 对 象 存储 


区 


// 告诉 该 对 象 存储 


区 


// 需 要 对 数据 库 进行 写 操作 而 不 只 是 读 操作 : 


Xl 


var transaction=db.transaction(["zipcodes"],// 对 象 存储 区 


IDBTransaction .READ_WRITE);// 从 事务 中 获取 对 象 存储 


区 


了 件 循 环 时 ， 向 数据 库 提交 所 有 使 用 该 对 象 进行 的 所 有 数据 库 插入 操作 


var store=transaction.objectStore("zipcodes");// 现 在 ,循环 


义 


// 为 它们 创建 相应 的 对 象 ， 并 将 对 象 添加 到 对 象 存储 区 中 


for(var i=0;i<]lines.length;i++){ 


var fields=lines[i].split(",");// 以 逗号 分 割 的 值 


var record={// 要 存储 的 对 象 


zipcode:fields[0],// 所 有 属性 都 是 字符 串 


city:fields[1], 


state:fields[2], 


latitude:fields[3], 


明码 文 借 


中 的 每 行 数 和 


longitude:fields[4] 


};//IndexedDB API 最 好 的 部 分 就 是 对 象 存 储 区 * 真 的 * 非 常 简 单 


// 下 面 就 是 在 数据 库 中 添加 一 条 记录 的 方式 : 


tr 


store.put(record);// 或 者 使 用 add( ) 方 法 避免 覆盖 


status("Initializing zipcode database:loaded" 


+numlines+"records."); 


if(e.type=="1load" ){// 如 果 这 是 最 后 的 载 入 事件 ， 


// 就 将 所 有 的 邮政 编码 数据 发 送 给 数据 库 


// 但 是 ， 由 于 刚刚 处 理 了 4 万 条 数据 ， 可 能 它 还 在 处 理 中 


// 因 此 这 里 做 个 简单 的 查询 


// 当 此 查询 成 功 时 ， 就 能 够 得 知 数据 库 已 经 就 绪 了 


// 然 后 就 可 以 将 状态 条 移 除 ， 


// 最 后 调用 此 前 传递 给 withDB( ) 函数 的 f( ) 函数 


lookupCity("02134", function(s){// 奥 尔 斯 顿 , 马萨诸塞 州 


document .body.removeChild(statusline); 


withDB(f); 


}); 


</script> 


</head> 


<body> 


<p>Enter a zip code to find its city:</p> 


Zipcode:<input onchange="displayCity(this.value)"></input> 


City:<output id="city"></output> 


</div> 


<div> 


<p>Enter a city name(case sensitive,without state)to find cities and their zipcodes: 


</p> 


City:<input onchange="displayZipcodes(this.value)"></input> 


<div id="zipcodes"></div> 


</div> 


<p><i>This example is only known to work in Firefox 4 and Chrome 11.</i></p> 


<p><i>Your first query may take a very long time to complete.</i></p> 


<p><i>You may need to start Chrome with--unlimited-quota-for-indexeddb</i></p> 


</body> 


</html> 


22.9 “Web 套 接 字 


第 18 章 介绍 过 客户 端 JavaScript 代 码 如 何 通过 网 络 进行 通信 。 该 章 中 的 
例子 都 使 用 HTTP 协 议 ， 这 也 意味 着 它们 受 限 于 HTTP 协 议 的 特性 : 它 
是 一 种 无 状态 的 协议 ， 由 客户 端 请 求 和 服务 端 响 应 组 成 。HTTP 实 际 上 
是 相对 比较 特殊 的 网 络 协议 。 大 多 数 基于 因特网 〈 或 者 局 域 网 ) 的 网 
络 连接 通常 都 包含 长 连接 和 基于 TCP 套 接 字 的 双向 消息 交换 。 让 不 信任 
的 客户 端 脚本 访问 底层 的 TCP 套 接 字 是 不 安全 的 ， 但 是 WebSocket API 
定义 了 一 种 安全 方案 : 它 允 许 客户 端 代码 在 客户 端 和 支持 WebSocket 协 
。 这 让 某 些 网 络 操作 会 变 
得 更 加 简单 。 


WebSocket 协 议 


要 通过 JavaScript 使 用 WebSocket， 只 须 了 解 这 里 要 介绍 的 WebSocket 
API。 其 中 并 没有 用 于 书写 一 个 WebSocket 服 务 器 的 服务 端 API， 但 是 
节 会 有 一 个 简单 服务 器 例子 ， 该 例子 使 用 Node ( 见 12.2 节 ) 和 第 三 方 
WebSocket 服 务 絮 库 来 实现 。 客 户 端 和 服务 絮 端 的 通信 是 通过 TCP 套 接 
字 长 连接 实现 的 ， 其 遵循 WebSocket 协 议定 义 的 规则 。 关 于 WebSocket 
协议 的 细节 这 里 不 做 详细 介绍 ， 但 是 ， 值 得 注意 的 是 ，WebScoket 是 经 
过 精心 设计 的 协议 ， 实 现 让 Web 服 务 右 能 够 很 容易 地 同时 处 理 同 一 端口 
上 的 HTTP 连接 和 WebSocket 和 连接 。 


很 多 浏览 器 提供 商都 实现 了 WebSocket。 但 是 ， 由 于 发 现 早 期 草案 版 本 
的 WebSocket 协 议 有 重要 的 安全 漏洞 ， 因 此 ， 一 直到 撰写 本 书 时 ， 有 些 
浏览 器 在 安全 版 本 的 协议 未 标准 化 之 前 ， 都 将 它们 文 持 的 WebSocket 功 
能 关闭 了 。 比 如 ， 在 Firefox 4 中 ， 要 启用 WebSocket 功 能 ， 需 要 访问 
about:config 页 面 ， 然 后 将 配置 变量 "network.websocket.override-security- 
block" 设 置 为 true。 


WebSocket API 的 使 用 非常 人 简单。 首先 ， 通 过 WebSocketO 构 造 函 数 创 建 


一 个 套 接 字 : 


Var socket=new WebSocket("ws://ws.example.com:1234/resource"); 


WebSocket0 构 造 范 数 的 参数 是 一 个 URL， 该 URL 使 用 ws:// 协 议 (或 者 
类 似 于 https:// 用 于 安全 链接 的 wss:// 协 议 ) 。 该 URL 指 定 要 连接 的 主 
机 ， 还 有 可 能 指定 端口 《WebSocket 使 用 和 HTTP 以 及 HTTPS 一 样 的 默 
认 端 口 ) 和 路 径 或 者 资源 。 


创建 了 套 接 字 之 后 ， 通 常 需要 在 上 面 注册 一 个 事件 处 理 程序 : 


口 
NE 


socket .onopen=function(e){/* 套 接 字 已 经 连接 */}， 


socket .onclose=function(e){/* 大 , 接 字 已 经 关闭 .*/}， 


socket .onerror=function(e){/* 出 错 了 */}; 


socket .onmessage=function(e)t{ 


var message=e.data;/* 服 务 器 发 送 一 条 消息 */ 


}; 


为 了 通过 套 接 字 发 送 数 据 给 服务 器， 可 以 调用 公 返 字 的 send0) 方 法 : 


socket.send("Hello, server!"); 


当前 版 本 的 WebSocket API 仅 文 持 文本 消 妃 ， 并 且 必 须 以 UTF-8 编 码 形 
式 的 字符 串 传 递 给 该 消息 。 然 而 ， 当 前 WebSocket 协 议 还 包含 对 二 进 制 
消息 的 文 持 ， 未 来 版 本 的 API 可 能 会 允许 在 客户 端 和 WebSocket 服 务 器 
端 进行 二 进 制 数据 的 交换 。 


当 完 成 和 服务 器 的 通信 之 后 ， 可 以 通过 调用 close() 方 法 来 关闭 
WebSocket ° 


WebSocket 完 全 是 双向 的 ， 并 且 一 旦 建立 了 WebSocket 连 接 ， 客 户 端 和 
服务 喜 端 都 可 以 在 任何 时 候 互 相传 送 消息 ， 与 此 同时 ， 这 种 通信 机 制 
采用 的 不 是 请 求 和 啊 应 的 形式 。 每 个 基于 WebSocket 的 服务 都 要 定义 目 
己 的 “ 子 协 议 *"， 用 于 在 客户 端 和 服务 如 端 传输 数据 。 慢 慢 的 ， 这 些 “ 子 


协议 ”也 可 能 发 生 演变 ， 可 能 最 终 要 求 客户 端 和 服务 右 端 需要 文 持 多 个 
版 本 的 子 协 议 。 和 幸运 的 是 ，WebSocket 协 议 包含 一 种 协商 机 制 ， 用 于 选 
择 客户 问 和 服务 需 站 都 能 “理解 的 子 协 议 。 可 以 传递 一 个 字符 串 数 组 
给 WebSocket0 构 造 函 效 。 服 务 融 端 会 将 该 数组 作为 客户 疹 能 够 理解 的 
子 协议 列表 。 人 然后 ， 写 会 选择 其 中 一 个 使 用 ， 并 将 它 传递 给 客户 端 。 
一 旦 连接 建立 之 后 ， 客 户 端 就 能 够 通过 套 接 字 的 protocol 属 性 检测 当前 
在 使 用 的 是 哪 种 子 协议 。 


18.3” 闻 介绍 了 EventSource API， 并 通过 一 个 在 线 聊 天 的 客户 端 和 服务 
鲁 展 示 了 了 这些 API 如 何 使 用 。 有 了 WebSocket， 写 这 类 应 用 就 变 得 更 加 
容易 了 。 例 22-16 束 是 一 个 徐 单 的 聊天 客户 端 : 它 和 例 18-5 很 像 ， 不 同 
的 是 它 采 用 了 WebSocket 来 实现 双 同 通信 ， 而 没有 使 用 EventSource 来 获 
取消 忌 以 及 XMLHttpRequest 来 发 送 消 已 。 


例 22-16: 基于 WebSocket 的 聊天 客户 端 


<script> 


window.onload=function(){// 关 心 一 些 UI 细节 


var nick=prompt("Enter your nickname");// 获 取 用 户 昵称 


var input=document .getElementById("input");// 查 找 ijnput 字 段 


input .focus();// 设 置 光标 


// 折 个 WebSocket ， 用 于 发 送 和 接收 聊天 消息 


// 假 设 下 载 的 HTTP 服 务 器 作为 NebSocket 服 务 器 运作 ， 使 用 同样 的 主机 名 和 端 


// 只 是 协议 由 htttp:// 变 成 ws:// 


var socket=new WebSocket ("ws://"+location.host+"/");// 下 面 展 示 了 如 何 通过 WebSocket 从 服务 器 
获取 消息 


socket .onmessage=function(event ){// 当 收 到 一 条 新 消息 


var msg=event .data;// 从 事件 对 象 中 获取 消息 内 容 


全 + 


var node=document .createTextNode(msg) ;// 将 它 标记 为 一 个 文本 


var div=document.createElement("div");// 创 建 一 个 <div> 


div.appendChild(node);// 将 文本 节点 添加 到 该 div 中 


document .body .insertBefore(div, input);// 在 jnput 前 添加 该 div 


input .scrollIntoView( ) ;// 确 保 输入 框 可 见 


// 下 面 展 示 了 如 何 通过 WebSocket 发 送 消息 给 服务 器 端 


党 
FEIH 
工 让 
五 


车 键 


input .onchange=function(){// 当 用 户 


var msg=nick+":"+input ,value;// 用 户 上 昵称 加 上 用 户 的 输入 


socket .send(msg) ;// 通 过 套 接 字 传 递 该 内 容 


input .value="";// 等 待 更 多 内 容 的 输入 


} 

}; 

</script> 

<!-- 聊 天 窗口 UI 很 简单 ， 一 个 宽 的 文本 输入 域 - - > 


<1-- 新 的 聊天 消息 会 插入 在 该 元 素 中 - -> 


< Input id="input"style="width:100%"/> 


例 22-17 是 一 个 基于 WebSocket 的 聊天 服务 器 ， 运 行 在 Node 中 〈 见 12.2 
节 ) 。 通 过 将 该 例 和 例 18-17 作 比较 ， 可 以 发 现 ，WebSocket 将 聊天 应 用 
的 服务 端 简化 成 和 客户 端 一 样 。 


例 22-17: 使 用 WebSocket 和 Node 的 聊天 服务 器 


DA 


* 这 是 运行 在 NodeJS 上 的 服务 器 端 JavaScript 


* 在 HTTP 服 务 器 之 上 ， 它 运行 一 个 WebSocket 服 务 器 ， 该 服务 器 使 用 来 


*https://github.com/miksago/node-websocket-server/ 的 第 三 方 WebSocket 库 实现 


* 如 果 得 到 "A" 的 一 个 HTTP 请 求 ， 则 返回 聊天 客户 端的 HTML 文 件 


* 除 此 之 外 任何 HTTP 请 求 都 返回 404 


* 通 过 WebSocket 协 议 接收 到 的 消息 都 仅 广播 给 所 有 激活 状态 的 连接 


*/ 


var http=require('http');// 使 用 Node 的 HTTP 服 务 器 API 


var ws=require('websocket-server');// 使 用 第 三 方 WebSocket 库 


// 启 动 阶段 ， 读 取 聊 天 客户 端的 资源 文件 


var clientui=require('fs').readFileSync("wschatclient.html");// 创 建 一 个 HTTP 服 务 器 


var httpserver=new http.Server();// 当 HTTP 服 务 器 获得 一 个 新 请 求 时 ， 运 行 此 函数 


httpserver.on("request",function(request,response){// 如 果 请 求 "/"， 


if(request.url==="/"){// 请 求 聊天 UI 


response.writeHead(200, {"Content-Type":"text/html"}); 


response.write(clientui); 


response.end( ); 


else{// 对 任何 其 他 的 请 求 返 回 464" 无 法 找到 "编码 


则 返 


妃 


各 


户 端 聊 天 UI 


response.writeHead(404); 


response.end( ); 


});// 在 HTTP 服 务 器 上 包装 一 个 WebSocket 服 务 器 


var wsserver=ws.createServer({server:httpserver});// 当 接收 到 一 个 新 的 连接 请 求 的 上 时候， 调用 此 画 


数 


wsserver.on("connection",function(socket){ 


socket.send("Welcome to the chat room.");// 向 新 客户 端 打招呼 


socket .on("message", function(msg){// 监 听 来 自 客户 端的 消息 


wsserver .broadcast (msg);// 并 将 它们 广播 给 每 个 人 


}); 


}) ;// 在 8900 端 口 运行 服务 器 。 启 动 WebSocket 服 务 器 的 时 候 也 会 启动 HTTP 服 务 器 


// 连 接 到 http://localhost:8000/， 始 使 用 它 


wsserver.listen(8000); 


[1]. 指 的 是 独立 线程 运行 的 代码 。 

[2]. 表 示 一 直 等 下 去 。 

[3]. 下 面 统一 称 为 容器 。 

[41.Web Workers 起 初 是 作为 HTML5 标 准 的 一 部 分 ， 但 是 后 来 独立 成 一 
份 相 近 的 标准 。 截 至 撰写 本 书 时 ， 这 份 标准 的 草案 可 以 通过 
http://dev.w3.org/html5/workers/ 和 http://whatwg.org/ww 进 行 访问 。 


[5]. 如 有 果 指 定 过 大 就 是 一 种 浪费 。 


]. 截 至 撰写 本 书 时 ，Chrome 不 要 来 权限 ， 但 是 它 要 求 局 动 的 时 候 ， 在 


[g] 
命令 行 中 市 上 --unlimited-quota-for-files 标 志 。 


第 三 部 分 JavaScript 核心 参考 


本 书 的 这 部 分 是 参考 文档 ， 包 括 JavaScript 语 言 核 心 定 义 的 类 、 方 法 和 
属性 。 该 文档 根据 类 或 者 对 象 的 名 字 ， 按 照 字 母 来 排序 : 


Arguments EvalError Number String 
Array Function Object SyntaxError 
Boolean Global RangeError TypeError 
Date JSON ReferenceError URIError 
Error Math RegExp 

类 的 方法 和 属性 都 有 参考 页 面 ， 按 照 其 全 名 的 字母 顺序 来 排列 ， 全 各 


包含 定义 该 方法 和 属性 的 类 和 名。 例如， 如 果 想 阅读 String 类 的 replace() 
方法 ， 需 要 查找 String.replace()， 而 不 只 是 replace 。 


JavaScript 核 心 定 义 了 一 些 全 局 函数 和 属性 ， 比 如 eval0 和 NaN“。 从 技术 
上 讲 ， 这 些 是 全 局 对 象 的 属性 。 但 由 于 全 局 对 象 没 有 名 字 ， 因 此 直接 
将 这 些 属性 以 其 非 限定 名 列举 在 参考 文档 中 。 为 了 查阅 方便 ， 在 名 

为 "Global" 的 特殊 参考 页 面 ， 总 结 了 JavaScript 核 心中 的 所 有 全 局 函数 和 
属性 (虽然 并 没有 名 为 "Global" 的 对 象 或 类 ) 。 


人 > 


JavaScript 核 心 参考 

arguments| | 

概要 

arguments 

搞 述 

arguments[] 数 组 只 定义 在 函数 体 中 。 在 函数 体 中 ，arguments 指 代 该 范 

数 的 Arguments 对 象 。 该 对 象 拥 有 数值 属性 ， 可 当做 数组 来 用 ， 含 有 传 
入 到 该 函数 的 所 有 参数 。arguments 标 识 符 本 质 上 是 一 个 局 部 变量 ， 在 
每 个 函数 中 会 自动 声明 并 初始 化 该 变量 。arguments 仅 在 函数 体 中 时 才 
指 代 Arguments 对 象 ， 在 全 局 代码 中 为 undefined 。 

参阅 

Arguments; 第 8 章 

Arguments 

函数 的 参数 和 其 他 属性 

Object Arguments 

概要 

arguments 

arguments[D |] 

元 素 


Arguments 对 象 只 定义 在 函数 体 中 。 从 技术 上 讲 ，Arguments 对 象 不 是 数 
组 ， 但 它 拥有 数值 属性 和 length 属 性 ， 数 值 属性 可 当做 是 数组 元 素 ， 


length 属 性 则 表示 数组 元 素 的 个 数 。 这 些 数 组 元 素 是 传递 给 该 方法 的 参 
数值 。 元 素 0 是 第 一 个 参数 ， 元 素 1 是 第 二 个 参数 ， 以 此 类 推 。 所 有 作 
为 参数 传 入 的 值 都 会 成 为 Arguments 对 象 的 数组 元 素 ， 即 便 在 函数 声明 
中 没有 指定 参数 名 。 


属性 
callee 
指 代 当 前 正在 执行 的 画 数 。 
length 


传递 给 函数 的 参数 个 数 ， 以 及 Arguments 对 象 中 数组 元 素 的 个 数 。 
搞 述 


调用 函数 时 ， 会 为 其 创建 一 个 Arguments 对 和 象 ， 并 上 自动 初始 化 局 部 变量 
arguments， 指 代 该 Arguments 对 象 。Arguments 对 和 象 的 主要 用 途 是 ， 

来 判断 有 多 少 个 参数 传 入 函数 ， 还 可 用 来 指 代 末 命 名 的 参数 。 然 而 ， 
除了 数组 元 隶 和 length 属 性 ， 还 可 通过 callee 属 性 来 指 代 匿 名 函数 目 吴 。 


大 部 分 情况 下 ， 可 以 将 Arguments 对 象 想象 成 一 个 数组 ， 并 额外 带 有 
callee 属 性 。 但 是 ，Arguments 对 象 并 不 是 Array 的 实例 ， 
Arguments.length 属 性 也 不 具有 Array.length 属 性 的 任何 特殊 行为 ， 而 且 
不 能 用 来 改变 数组 的 大 小 。 


在 非 严 格 模 式 下 ，Arguments 对 象 具有 一 个 很 不 寻 第 的 特性 。 当 函数 市 
有 命名 的 参数 时 ，Arguments 对 象 的 数组 元 聂 与 局 部 要 量 是 等 同 的 。 
Arguments 对 象 和 参数 名 为 引用 同一 个 值 提供 了 两 种 途径 。 用 参数 名 改 
变 一 个 函数 参数 的 值 ， 会 同时 影响 通过 Arguments 对 象 获 取 的 值 ， 反 
也 会 影响 通过 参数 名 
大 收 有 但 。 


参阅 


Function: 第 8 章 


Arguments.callee 


在 挛 格 模式 下 未 定义 
当前 正在 执行 的 函数 
概要 

arguments.callee 

搞 述 


arguments.callee 指 代 当 前 正在 执行 的 函数 。 通 过 它 可 以 引用 匿名 函数 自 
号 。 该 属性 只 定义 在 函数 体 中 。 


示例 


// 在 匿名 函数 内 使 用 callee 属 性 来 3 


匿名 函数 身 ， 


// 以 便 实现 递归 


Var factorial=function(x)t{ 


if(x<2)return 1; 


else return x*arguments.callee(x-1); 


} 


var y=factorial(5);// 返 回 120 


Arguments.length 
传 给 函数 的 参数 个 数 
概要 


arguments.length 


摘 述 


Arguments 对 象 的 langth 属 性 表示 传 给 当前 函数 的 参数 个 数 。 该 属性 只 
定义 在 函数 体 中 。 

注意 该 属性 表示 的 是 实际 传 入 的 参数 个 数 ， 而 不 是 声明 的 参数 个 数 。 
声明 的 参数 个 数 请 参阅 Function.length。 同 时 要 留意 该 属性 没有 任何 
Array.length 属 性 的 特殊 行为 。 


示例 


// 使 用 Arguments 对 象 来 检查 传 入 参数 个 数 的 正确 性 


function check(args){ 


var actual=args.1length;// 实 际 的 参数 个 数 


var expected=args.callee.length;// 期 待 的 参数 个 数 


if(actual!=expected){// 如 果 不 相等 ， 则 抛 出 异常 


throw new Error ("参数 个 数 有 误 : 期 望 值 : "+expected+" ;实际 值 : "+actual) ; 


// 演 示 如 何 使 用 check( ) 方 法 的 示例 函数 


function f(x,y,z){ 


check(arguments ) ; // 检 查 参 数 个 数 的 正确 性 


return x+ty+z;// 正 常 执行 该 函数 的 剩余 代码 


参阅 


Array.length ~、 Function.length 


Array 

对 数组 的 内 置 文 持 
Object =» Array 
构造 画 数 


new Array() 
new Array(Size) 


new Array(element0,element1,...,elementn) 


Sh 


数 
size 

设 定 的 数组 元 系 个 数 。 返 回 数 组 的 length 属 性 等 于 size。 
element0,...elementn 


参数 列表 ， 可 以 是 两 个 或 多 个 任意 值 !H。 当 Array() 构 造 范 数 用 这 些 参 
数 调用 时 ， 新 创建 的 数组 实例 会 用 指定 的 参数 值 来 初始 化 ， 并 将 length 
属性 设置 为 参数 个 数 。 

返回 值 

新 创建 和 初始 化 的 数组 。 当 不 带 参 数 调用 Array0 时 ， 返 回 的 数组 为 
空 ，length 属 性 为 0。 当 用 单个 数值 参数 调用 时 ， 构 造 钞 数 返 回 的 数组 
市 有 指定 个 数 的 未 定义 元 素 。 使 用 其 他 参数 调用 时 ， 构 造 画 数 会 使 用 
指定 的 参数 值 初始 化 数组 。 当 Array0 构 造 函 数 不 带 new 操 作 符 ， 直 接 当 
做 函数 调用 时 ， 其 表现 行为 与 带 有 new 操 作 符 调用 时 是 完全 一 样 的 。 


已 司 和 
二 有 


RangeError 


当 给 Array0 构 造 函 数 传 入 单个 整数 参数 size 时 ， 如 果 size 为 负数 ， 或 大 
于 23: -1 时 ， 会 抛 出 RangeError 寞 名 。 
直接 量 语法 


ECMAScript 3 规定 了 数组 的 直接 量 语法 。 可 以 将 逗号 分 隔 的 表达 式 列 
on | 来 创建 和 初始 化 一 个 数组 。 这 些 表 达 式 的 值 会 成 为 数 
组 时 元 系 。 人 例如: 


var a=[1,true,'abc']; 


var b=[a[0],a[0]*2,f(x)]; 


属性 
length 


一 个 可 读 / 写 的 整数 ， 用 来 指明 数组 中 的 元 素 个 数 。 当 数组 中 的 元 素 不 
连续 时 ，length 等 于 数组 中 最 后 一 个 元 素 的 序号 加 一 。 改 变 length 值 会 
裁减 或 扩充 数组 。 


J 
ECMAScript 5 中 新 增加 了 以 下 方法 : every() 、filter() 、forEach()、 


indexOf() ~ lastIndexOf() ~ mapQ) 、 reduce() 、 reduceRight() 和 some()。 在 
ES5 标 准 化 之 前 ， 除 耻 ， 其 他 浏览 右 已 经 实现 了 这 些 方法 。 


concat() 
把 元 素 衡 接 到 数组 中 。 

every() 

测试 断言 函数 是 否 对 每 个 数组 元 素 都 为 真 。 


filter() 


返回 满足 断言 画 数 的 数组 元 素 。 
forEach() 

为 数组 的 每 一 个 元 素 调 用 指定 画 数 。 
indexOf() 

在 数组 中 查找 匹配 元 素 。 


join() 
将 数组 的 所 有 元 素 转化 为 字符 串 ， 并 衔接 起 来 。 
lastIndexOf() 

在 数组 中 反 向 查找 。 


mapQ) 
从 数组 的 元 素 中 ， 计 算出 新 的 数组 元 素 。 


popO 
移 除数 组 最 后 一 个 元 素 。 
Push 


把 元 素 添加 到 数组 尾部 。 


reduce() 

从 数组 的 元 素 中 ， 计 算出 一 个 值 。 
reduceRight() 

从 石 到 左 缩减 数组 。 


reversel() 


在 原 数组 中 颠倒 数组 元 素 的 顺序 。 


shift() 
移 除数 组 的 第 一 个 元 了 系 。 
slice() 


返回 数组 的 一 部 分 。 


somel() 
测试 是 否 至 少 有 一 个 数组 元 素 能 让 断言 画 数 为 真 。 
sort() 


在 原 数组 中 对 数组 元 素 进 行 排序 。 


splice() 
插入 、 删 除 或 车 换 数组 元 素 。 
toLocaleString() 

将 数组 转化 为 本 地 化 字符 串 。 
toString() 

将 数组 转化 为 字符 串 。 
unshift() 

在 数组 头 部 插入 元 素 。 

接 述 


数组 是 JavaScript 的 基本 特性 ， 在 第 7 章 里 有 详细 前述 。 


参阅 


第 7 章 
Array.concat() 
衔接 数组 

概要 


array.concat(value,...) 


value,... 

任意 个 要 衔接 到 array 中 的 值 。 

返回 值 

一 个 新 数组 ， 包 含 array 的 元 素 ， 以 及 衔接 的 新 元 素 。 

摘 述 

concat() 会 将 参数 衔接 到 array 中 得 到 一 个 新 数组 并 返回 。 它 不 会 修改 
array。 如 采 传 给 concat0 的 某 个 参数 本 号 是 一 个 数组 ， 则 会 将 该 数组 的 
元 素 衡 接 到 array 中 ， 而 不 是 数组 本 里。 


示例 


var a=[1,2,3]; 


a.concat(4,5)// 返 回 [1,2,3,4,5] 


a.concat([4,5]);// 返 回 [1,2,3,4,5] 


a.concat([4,5],[6,7])// 返 回 [1,2,3,4,5,6,7] 


a.concat(4,[5,[6,7]])// 返 回 [1,2,3,4,5,[6,7]] 


参阅 

Array.join() 、 Array.push() 、 Array.splicel() 
Array.every() 

ECMAScript 5 

测试 断言 画 数 是 否 对 每 个 元 素 为 真 。 
概要 

array.every(predicate) 


array.every(predicate,o) 


predicate 

用 来 测试 数组 元 素 的 断言 国 数 。 
0 

调用 predicate 时 的 可 选 this 值 。 
返回 值 


如 果 对 array 的 每 一 个 元 素 调 用 predicate 时 都 返回 真 值 ， 则 返回 true。 如 
果 有 任何 一 个 元 素 调 用 predicate 时 返回 假 值 ， 则 返回 false 。 


摘 述 


ne 否 都 满足 某 些 条 件 。 它 会 按照 
序号 从 小 到 大 的 顺序 遍历 array 的 元 素 ， 并 对 每 个 元 素 调 用 指定 的 
predicate 函 数 。 如 采 predicate 返 回 false (或 任何 可 以 转化 为 false 的 

值 ) ， 并 立刻 返回 false 。 如 果 predicate 的 每 一 次 
调用 都 返回 true， 则 every0) 返 回 true。 当 遍历 的 数组 为 空 时 ，every0) 返 回 


true ° 


对 数组 的 每 一 个 序号 ij， 调用 predicate 时 带 有 三 个 参数 : 


predicate(array[i],i,array) 


predicate 的 返回 值 会 当做 布尔 值 解析 。true 和 所 有 真 值 表示 该 数组 元 素 
通过 了 测试 或 者 说 满足 该 函数 所 描述 的 条 件 。 如 果 返 回 值 为 false 或 假 
值 ， 则 表示 数组 元 素 没 有 通过 测试 。 

更 多 细 和 请 参考 Array.forEach0O 。 


示例 


[1,2,3].every(function(x){freturn x<5;})//=>true: 所 有 元 素 都 <5 


[1,2,3].every(function(x)f{return x<3;})//=>false: 不 是 所 有 元 素 都 <3 


[].every(function(x){return false;});//=>true:[] 总 是 返回 true 


参阅 

Array.filter() ~ Array.forEach() 、 Array.somel() 
Array.filter() 

ECMAScript 5 

返回 通过 断言 的 数组 元 又 

概要 

array.map(predicate) 


array.map(predicate,o) 


数 


Sh 


predicate 


用 来 判断 array 中 的 元 素 是 否 需 要 包含 在 返回 数组 中 的 调用 函数 。 


0 

调用 predicate 时 的 可 选 this 值 。 

返回 值 

一 个 新 数组 ， 只 包含 那些 让 predicate 返 回 真 值 的 数组 元 素 。 

描述 

filter() 会 创 建 一 个 新 数组 ， 包 含 那 些 让 predicate 函 数 返 回 真 值 的 array 的 
es filter() 方 法 不 会 修改 array 本 喘 〈 注 意 predicate 函 数 有 可 能 会 修 


filter0 按 照 序号 从 小 到 大 遍历 array， 对 每 个 元 素 仅 调用 一 次 predicate. 对 
于 序号 1， 调 用 predicate 时 带 有 三 个 参数 : 


predicate(array[I],Iivarray) 


如 果 predicate 返 回 真 值 ， 则 array 中 序号 为 i 的 元 素 会 追加 到 新 创建 的 数 
组 中 。 一 旦 filter0 测 试 完 array 中 的 每 一 个 元 素 ， 它 就 会 返回 新 创建 的 数 
组 。 

更 多 细节 请 参考 Array.forEach0O 。 


示例 
[1,2,3].filter(function(x){return x>1;});//=> [2,3] 


参阅 


Array.every() ~、 Array.forEach() 、 Array.indexOf() 、 Array.map() 、 
Array.reduce() 


Array.forEach() 

ECMAScript 5 

为 每 一 个 数组 元 系 调 用 一 个 函数 
概要 

array.forEach(f) 


array.forEach(f,o) 


Sh 
粒 


为 array 的 每 一 个 元 素 调用 的 画 数 。 
0 

调用 f 时 的 可 选 this 值 。 

返回 值 

该 方法 无 返回 值 

摘 述 


forEachO 按 照 序 号 从 小 到 大 遍历 array， 并 对 每 一 个 元 素 调 用 一 次 f。 对 
于 序号 1， 调用 f 时 带 有 三 个 参数 : 


f(array[il],i,array) 


f 的 任何 返回 值 都 会 忽略 。 注 意 forEach() 没 有 返回 值 。 特 别 注意 ， 它 不 


会 返回 array。 
数组 方法 的 细节 


下 壕 细 广 适 用 于 forEach() 方 法 ， 也 适用 于 相关 方法 : map0、fiter0、 
every() 和 lsome() ° 


所 有 这 些 方 法 部 接受 芳 数 作为 第 一 个 参数 ， 并 接受 可 移 的 第 二 个 参 
数 。 如 来 指定 了 第 二 个 参数 o， 则 调用 函数 时 ， 束 好 像 该 芳 数 是 o 的 方 
法 一 样 。 也 就 是 说 ， 在 函数 体内 ，this 值 等 于 o。 如 果 没 有 指定 第 二 个 
参数 ， 则 就 像 函 数 一 样 调用 该 画 数 (而 不 像 方法 ) ，this 值 在 非 严 格 模 
式 下 是 全 局 对 象 ， 在 挛 格 模式 下 则 为 null。 

所 有 这 些 方法 都 会 在 开始 遍历 时 就 记录 array 的 长 度 。 如 果 调 用 函数 把 
新 元 素 退 加 a 到 array 中 ， 这 些 新 添加 的 元 素 不 会 抽 历 到 。 如 采 调 用 的 函 
数 修改 了 未 过 历 到 的 已 存在 元 素 ， 则 调用 时 会 传递 修改 后 的 值 。 


当 作用 于 稀 朴 数组 时 ， 这 些 方法 不 会 在 实际 上 不 存在 元 素 的 序号 上 调 
用 画 数 。 


示例 


var a=[1,2,3]; 


a.forEach(function(x,i,a){a[i]++;});//a 现 在 是 [2, 3, 4] 


参阅 


Array.every() 、 Array.filter() ~、 Array.indexOf() 、 Array.map0O 、 
Array.reduce() 


Array.indexOf() 
ECMAScript 5 
查找 数组 


概要 
array.indexOf(value) 


array.indexOf(value, start) 


value 

要 在 array 中 查找 的 值 。 

start 

开始 查找 的 可 选 数组 序号 。 如 果 省 略 ， 则 为 0。 
返回 值 


一 个 大 于 等 于 start 的 最 小 序号 值 ， 该 序号 值 处 的 array 元 素 与 value 全 
等 。 如 采 不 存在 匹配 元 素 时 ， 则 返回 -1。 
描述 


该 方法 在 array 中 查找 等 于 value 的 元 素 ， 并 返回 找到 的 第 一 个 元 素 的 序 
号 。 查 找 的 起 始 位 置 是 start 指 定 的 数组 序号 ， 如 果 没 有 指定 ， 则 从 0 开 
始 ， 然 后 一 个 接 一 个 地 查找 ， 直 到 找到 匹配 的 元 际 或 检查 完 所 有 元 素 


为 止 。 判 断 是 否 相 等 使 用 的 十“===” 操 作 符 。 返 回 值 是 找到 的 第 一 个 匹 
配 元 素 的 序号 ， 如 果 没 找到 匹配 的 ， 则 返回 -1。 
示例 


['a', 'b','c'].indexof('b')//=>1 


['a','b','c'].indexof('d')//=>-1 


['a','b','c'].indexof('a',1)//=>-1 


参阅 

Array.lastIndexOf() ~、 String.indexOf() 
Array.join() 

将 数组 元 素 衔 接 为 字符 串 

概要 

array.join() 


array.join(separator) 


separator 


在 返回 的 字符 串 中 ， 用 来 分 隔 数 组 的 某 个 元 素 与 下 一 个 元 素 的 可 选 字 
符 或 字符 串 。 如 果 省 略 ， 默 认 是 英文 逗号 (,) 。 


返回 值 


一 个 字符 串 。 将 array 的 每 一 个 元 系 转 化 为 字符 串 ， 然 后 用 separator 字 符 
捉 分 隅 开 ， 最 后 衔接 为 返回 的 字符 串 。 


摘 述 


join0 将 数组 的 每 一 个 元 素 转换 为 字符 串 ， 并 通过 在 中 间 插 入 指定 的 
separator 字 符 串 将 它们 衔接 起 来 ， 最 后 返回 衔接 好 的 字符 串 。 


可 以 进行 相反 的 操作 一 一 将 字符 串 分 割 成 数组 元 素 一 一 使 用 String 对 象 
的 split() 方 法 即 可 。 细 市 请 参考 String.split()。 


示例 


a=new Array(1,2,3,"testing"); 


s=a.join("+");V//s 是 字符 串 "1+2+3+testing" 


参阅 

String.split() 
Array.lastIndexOf() 
ECMAScript 5 

反 疝 查找 数组 

概要 
array.lastIndexOf(value) 


arrray.lastIndexOf(value,start) 


value 

要 在 array 中 查找 的 值 。 

start 

开始 查找 的 可 选 数组 序号 。 如 果 省 略 ， 则 从 最 后 一 个 元 素 开 始 查 找 。 
返回 值 


一 个 小 于 等 于 start 的 最 大 序号 值 ， 该 序号 值 处 的 array 元 素 与 value 全 
等 。 如 果 不 存在 匹配 元 素 时 ， 则 返回 -1 。 
描述 


该 方法 在 array 中 一 个 接 一 个 地 反 回 碍 找 等 于 value 的 元 素 ， 并 返回 找到 
的 第 一 个 元 素 的 序号 。 查 找 的 起 始 位 置 是 start 指 定 的 数组 序号 ， 如 果 没 
有 指定 ， 则 从 最 后 一 个 元 聚 开 始 。 判 断 是 否 相 等 使 用 的 是 “===” 操 作 


符 。 返 回 值 是 找到 的 第 一 个 匹配 元 素 的 序号 ， 如 采 没 找到 匹配 的 ， 则 


返回 -1。 

参阅 

Array.indexOf() 、 String.lastIndexOf() 

Array.length 

数组 大 小 

概要 

array.length 

搬 述 

数组 的 length 属 性 总 是 比 该 数组 中 定义 的 序号 最 大 的 元 素 的 序号 大 一 。 
一 般 来 说 ， 数 组 都 是 “稠密 "数组 ， 拥 有 连续 的 元 素 ， 并 且 序号 从 0 开 
始 。 对 于 这 种 数组 ，lengh 属 性 表示 数组 中 的 元 素 个 数 。 


使 用 Array0 构 造 画 数 创建 数组 时 ， 会 初始 化 该 数组 的 leangth 属 性 。 把 新 
元 素 添加 到 数组 中 ， 在 有 必要 时 ， 会 更 新 length 属 性 : 


a=new Array();//a.length 初 始 化 为 0 


b=new Array(10);//b.1length 初 始 化 为 10 


c=new Array("one", "two", "three");//c.length 初 始 化 为 3 


c[3]="four";//c.length 更 新 为 4 


c[10]="blastoff";//c.length 变 成 11 


可 以 设置 length 属 性 的 值 来 改变 数组 的 大 小 。 如 果 设 置 的 length 小 于 原 
值 ， 会 裁减 数组 ， 末 尾 处 的 元 素 会 丢失 。 如 条 设置 的 leangth 大 于 原 值 ， 
数组 会 变 大 ， 新 添加 到 末尾 处 的 元 素 的 值 为 undefined 。 


Array.map() 
ECMAScript 5 

从 数组 元 素 中 计算 新 值 
概要 

array.map(f) 


array.map(f,o) 


Sh 
二 


函数 。 它 的 返回 值 会 成 为 返回 数组 的 元 


0 
f 调 用 时 的 可 选 this 值 。 

返回 值 

一 个 新 数组 ， 由 画 数 f 计 算出 的 元 素 组 成 。 
描述 


map0 会 创建 一 个 新 数组 ， 数 组 长 度 与 array 一 样 ， 数 组 元 素 通 过 将 array 
的 元 素 传递 给 函数 f 计 算得 到 。map() 按 照 从 小 到 大 的 顺序 遍历 array 的 序 
号 ， 并 为 每 一 个 元 素 调 用 f 一 次 。 对 于 序号 i， 调 用 f 时 沉 有 三 个 参数 ,ff 
的 返回 值 则 存储 在 新 创建 数组 的 序号 i 处 : 


a[i]=f(array[i],i,array) 


一 旦 map() 将 array 中 的 每 一 个 元 素 都 传递 给 {， 并 将 其 返回 值 存储 在 新 数 
组 中 后 ， 束 会 返回 该 新 数组 。 


更 多 细节 请 参考 Array.forEach0O 。 


示例 
[1,2,3].map(function(x){treturn x*x;});//=> [1,4,9] 


参阅 


Array.every() ~、 Array.f ilter() ~、 Array.forEach() 、 Array.indexOf() 、 
Array.reduce() 


Array.pop() 

移 除 并 返回 数组 的 最 后 一 个 元 素 
概要 

array.pop() 

返回 值 

array 的 最 后 一 个 元 素 。 

摘 述 


pop0O 会 移 除 array 的 最 后 一 个 元 素 ， 缩 短 数组 的 长 度 ， 并 返回 所 移 除 元 
素 的 值 。 如 果 数 组 已 经 为 宝 ，pop(0) 不 会 修改 该 数组 ， 返 回 值 是 


undefined ° 

示例 

OS 可 以 提供 先进 后 出 (FILO) 的 栈 功 能 。 例 
0: 


var stack=[];//stack:[] 


stack.push(1,2);//stack:[1,2] 返回 2 


stack.pop();//stack:[1] 返回 2 


stack.push([4,5]);//stack:[1,[4,5]] 返回 2 


stack.pop();//stack:[1] 返回 [4,5] 


stack.pop();//stack:[] 返回 1 


参阅 
Array.push() 
Array.push() 

给 数组 追加 元 素 
概要 


array.push(value,...) 


value,... 

追加 a 到 array 尾 部 的 一 个 或 多 个 值 。 

退回 值 

把 指定 值 妃 加 到 数组 后 数组 的 新 长 度 。 

搞 述 

push0 会 将 参数 按 顺 序 追 加 到 array 尾 部 。 它 会 直接 修改 array， 而 不 会 创 


新 一 个 新 数组 。push() 与 伴随 的 pop0 方 法 ， 可 以 提供 先进 后 出 
(FILO) 的 栈 功 能 。 例 子 请 参考 Array.pop()。 


参阅 

Array.pop() 

Array.reduce() 
ECMAScript 5 

从 数组 元 素 中 计算 出 一 个 值 
概要 


array.reduce 人 人 


array.reduce(finital) 


Sh 
类 


一 个 函数 ， 可 以 合并 两 个 值 (比如 两 个 数组 元 素 ) ， 并 返回 一 个 “ 缩 
减 ” 的 新 值 。 


initial 


用 来 缩减 数组 的 可 选 初始 值 。 如 果 指 定 该 参数 ，reduce0 的 行为 会 像 是 
把 该 参数 插入 array 的 头 部 一 样 。 


退回 值 
数组 的 化 和 倘 值 ， 该 值 是 最 后 一 次 调用 人 峙 的 返回 值 。 
搞 述 


reduce() 方 法 接 有 党 函数 f 作 为 第 一 个 参数 。 该 函数 的 行为 应 该 像 一 个 二 元 
操作 符 一 样 : 接受 两 个 值 ， 执 行 某 些 操作 ， 然 后 返回 结果 。 如 有 果 array 
有 n 个 元 素 ，reduce() 方 法 会 调用 n-1 次 来 将 这 些 元 素 缩减 为 一 个 合 # 

值 。 (你 可 能 已 经 熟悉 了 数组 缩减 操作 ， 在 其 他 编程 语言 中 ， 有 时 称 
为 “ 折 欠 ”或 “注入 ”。) 


第 一 次 调用 佬 传 入 的 是 array 的 前 两 个 元 素 。 接 下 来 的 调用 会 传 入 之 前 
的 计算 值 和 array 的 下 一 个 元 素 (按照 从 小 到 大 的 序号 顺序 ) 。 最 后 一 
次 调用 f 的 返回 值 会 成 为 reduce() 方 法 的 返回 值 。 


reduce0 在 调用 时 可 以 传 入 可 选 的 第 二 个 参数 : initial。 如 条 指 定 

initial ，reduce() 的 行为 会 像 是 把 该 参数 插入 array 的 头 部 一 样 (注意 ， 实 
际 上 并 没有 修改 array) 。 换 一 种 说 法 是 ， 就 像 reduce0 带 有 两 个 参数 调 
用 ， 而 initial 吏 像 是 之 前 f 的 返回 值 一 样 。 这 种 情况 下 ， 第 一 次 调用 人 

传 入 的 是 initial 和 array 的 第 一 | 元 素 o 当 指 定 initial 时 ， 要 缩减 的 元 素 有 
n+1 个 (array 的 n 个 元 素 ， 加 上 initial 值 ) ， 则 调用 ni 次 f。 


如 果 array 为 宝 ， 又 没有 指定 initial ，reduce( 会 抛 出 TypeError 异 常 。 如 果 
array 为 宇 ， 但 指定 initial， 则 reduce0 返 回 initial， 且 永远 不 调用 f。 如 果 
array 只 有 一 个 元 素 ， 且 没有 指定 initial，reduce0 不 调用 f， 会 返回 array 
的 单个 元 聚 。 

上 面 的 段落 描述 了 {f 的 两 个 参数 ， 实 际 上 reduce0 调 用 但 传人 了 4 个 参 
数 。 第 三 个 参数 是 第 二 个 参数 的 数组 序号 。 第 4 个 参数 则 是 array 自 身 。 
f 永 远 当 做 函数 调用 ， 而 不 是 方法 。 


示例 


[1,2,3,4].reduce(function(x,y){return x*y;})//=>24:((1*2)*3)*4 


参阅 

Array.forEach() 、 Array.map() ~ Array.reduceRight() 
Array.reduceRight() 

ECMAScript 5 

从 右 到 左 缩减 数组 

概要 


array.reduceRight(f) 


array.reduceRight(f,initial) 


Sh 
类 


一 个 函数 ， 可 以 合并 两 个 值 (比如 两 个 数组 元 素 ) ， 并 返回 一 个 “ 缩 
减 ” 的 痢 值 。 


initial 


用 来 缩减 数组 的 可 选 初始 值 。 如 采 指 定 该 参数 ，reduceRightO 的 行为 会 
像 是 把 该 参数 插入 array 的 尾部 一 样 。 


返回 值 

数组 的 缩减 值 ， 该 值 是 最 后 一 次 调用 f 时 的 返回 值 。 

描 壕 

reduceRight() 与 reduce() 方 法 一 样 : 调用 { 函 数 n-1 次 ， 来 将 array 的 n 个 元 
素 缩减 为 单个 值 。reduceRightO 与 reduce0 只 有 一 点 不 同 : 名 万 数组 时 是 
从 右 到 左 (从 最 大 的 序号 到 最 小 的 ) ， 而 不 是 从 左 到 右 。 细 市 请 参 
Array.reduce() ° 


示例 


[2,10,60] .reduceRight(function(x,y){return x/y;})//=>3:(60/10)/2 


参阅 
Array.reduce() 


Array.reverse() 


站 倒数 组 中 的 元 素 顺 序 


概要 

array.reverse() 

描述 

Array 对 象 的 reverse(0) 方 法 可 以 颠倒 数组 元 素 的 顺序 。 它 会 在 原 数组 中 进 
行 操作 : 重新 调整 array 中 的 元 素 ， 而 不 会 创建 一 个 新 数组 。 如 果 array 
有 多 个 引用 ， 该 数组 元 素 的 新 顺序 在 所 有 引用 中 可 见 。 


示例 


a=new Array(1,2,3);//a[0]==1,a[2]==3; 


a.reverse();// 现 在 a[0]==3,a[2]==1; 


Array.shift() 

移 除 数组 的 第 一 个 元 素 
概要 

array.shift() 

返回 值 

数组 原来 的 第 一 个 元 素 。 
搬 述 


shiftO 会 移 除 并 返回 array 的 第 一 个 元 素 ， 并 将 所 有 后 续 元 素 前 移 一 位 ， 
以 填补 数组 头 部 的 空缺 。 如 果 数 组 为 空 ，shift0 什 么 也 不 干 ， 直 接 返 回 
undefined 值 。 注 意 shift() 没 有 创建 新 数组 ， 它 会 直接 修改 array 。 


shiftO 与 ArraypopO 类 似 ， 除 了 操作 的 是 数组 的 头 部 而 不 是 尾部 。shiftO 
经 常 与 unshift() 一 起 使 用 。 


示例 


var a=[1,[2,3],4]; 


a.shift();// 返 回 1;a=[[2,3],4] 


a.shift();// 返 回 [2,3]a=[4] 


参阅 

Array.pop() ~、 Array.unshift() 
Array.slice() 

返回 数组 的 一 部 分 

概要 


array.slice(start,end) 


start 
数组 片段 开始 处 的 数组 序号 。 如 果 为 负数 ， 则 表示 从 数组 的 尾部 开始 
半 算 。 也 让 是 说 ，-1 代 表 最 后 一 个 元 素 ，-2 代 表 便 数 第 二 个 元 素 ， 以 此 


end 


数组 片段 结束 处 的 后 一 个 元 素 的 数组 序号 。 如 果 没 有 指定 ， 该 片段 会 
包含 从 start 开 始 到 数组 尾部 的 所 有 数组 元 素 。 如 果 为 负数 ， 则 表示 从 数 
组 的 尾部 开始 计算 。 


返回 值 


一 个 新 数组 ， 包 含 array 中 从 start 一 直到 end 之 间 的 所 有 元 素 (包含 start 
指定 的 元 素 ， 但 不 包 仿 end 指定 的 元 素 ) 。 
描述 


slice(0 返 回 array 的 片段 ， 或 称 为 子 数组 。 返 回 的 数组 包含 从 start 一 直到 
end 之 间 的 所 有 元 素 (包含 start 指 定 的 元 素 ， 但 不 包 仿 end 指定 的 元 
。 如 果 没 有 指定 end， 返 回 的 数组 包含 从 start 到 array 尾 部 的 所 有 元 


注意 slice() 没 有 修改 数组 。 如 果 想 要 移 除数 组 的 一 部 分 ， 请 使 用 
Array.splice() ° 


示例 


var a=[1,2,3,4,5]; 


a.Sslice(0,3);// 返 回 [1,2,3] 


a.Sslice(3);// 返 回 [4,5] 


a.Sslice(1, -1);// 返 回 [2, 3,4] 


a.Slice(-3,-2);// 返 回 [3] ;在 IE4 下 有 误 : 返回 [1,2,3] 


bug 

在 IE4 中 start 参 数 不 能 为 负数 。 在 下 的 后 续 版 本 中 已 经 修复 该 bug 。 
参阅 

Array.splice() 

Array.some() 


ECMAScript 5 


测试 是 否 有 元 又 满 足 晰 言 函 数 
概要 
array.SOme(predicate) 


array.some(predicate,o) 


predicate 

用 来 测试 数组 元 素 的 断言 国 数 。 
0 

调用 predicate 时 的 可 选 this 值 。 
返回 值 


如 有 果 array 中 有 至少 一 个 元 到 调用 predicate 时 返回 真 值 ， 则 返回 true。 如 
果 所 有 元 素 调 用 predicate 时 都 返回 假 值 ， 则 返回 false 。 


摘 述 


some(0 方 法 用 来 测试 数组 中 是 否 有 元 素 满 足 某 些 条 件 。 它 会 按照 从 小 到 
大 的 顺序 遍历 array 的 元 素 ， 并 依次 对 每 个 元 素 调 用 指定 的 predicate 范 
数 。 如 果 predicate 返 回 true (或 任何 可 以 转化 为 true 的 值 ，， 则 some0O 会 
停止 遍历 ， 并 立刻 返回 true。 如 果 predicate 的 每 一 次 调用 都 返回 false 

(或 任何 可 以 转化 为 false 的 值 ，， 则 some0O 返 回 false。 当 遍历 的 数组 为 
空 时 ，some() 返 回 false 。 


该 方法 很 类 似 every()。 更 多 细节 请 参考 Array.every(O) 和 Array.forEach()。 


示例 


3 


[1,2,3].some(function(x){return x>5;});//=>false: 没 有 元 素 >5 


[1,2,3].some(function(x)f{return x>2;});//=>true: 有 些 元 素 >3 


,Some(function(x){freturn false;});//=>false:[] 总 是 返回 false 
[] ( 


参阅 

Array.every() ~ Array.filter() ~、 Array.forEach() 
Array.sort() 

对 数组 元 素 进 行 排序 

概要 


array.sort() 


array.sort(orderfunc) 


Sh 


数 
orderfunc 
用 来 指定 如 何 排 序 的 可 选 函 数 。 
返回 值 


该 数组 的 引用 。 注 意 是 在 原 数 组 中 进行 排序 ， 没 有 新 建 数组 。 


摘 述 


sort0 方 法 在 原 数组 中 对 数组 元 素 进 行 排序 ， 没 有 创建 新 数组 。 如 有 果 在 
调用 sort0 时 不 带 参数 ， 将 按 字母 顺序 (更 精确 地 说 ， 是 字符 编码 顺 
序 ) 对 数组 中 的 元 素 进行 排序 。 要 实现 这 一 点 ， 首 先 要 把 元 素 转化 为 


字符 串 (如 果 有 必要 的 话 ) ， 以 便 进 行 比较 。 


如 采 想 按照 其 他 顺序 来 进行 排序 ， 束 必须 提供 比较 函数 ，i 
较 两 个 值 ， 然 后 返回 一 个 数字 来 表明 这 两 个 值 的 相对 顺序 。 比 较 函 数 


需要 接受 两 个 参数 a 和 b， 并 返回 如 下 值 : 


一 个 小 于 0 的 值 。 在 这 种 情况 下 ， 表 示 根 据 排序 标准 ，a 小 于 b， 在 排序 
后 的 数组 中 ，a 应 该 排列 在 b 的 前 面 。 


.0。 在 这 种 排序 下 ，a 和 b 是 相等 的 。 

一 个 大 于 0 的 值 。 在 这 种 情况 下 ，a 大 于 b。 

注意 : 数组 中 的 undefined 元 素 会 始终 排列 在 数组 未 尾 。 即 便 提 供 了 自 
定义 的 比较 函数 ， 也 是 如 此 ， 因 为 undefined 值 不 会 传递 给 提供 的 


orderfunc ° 
示例 


下 面 的 代码 展示 了 如 何 书写 一 个 比较 函数 ， 来 使 得 对 一 个 数值 数组 按 
数值 排序 ， 而 不 是 按 字母 排序 : 


// 用 于 数值 排序 的 排序 函数 


function numberorder(a,b){return a-b;} 


a=new Array(33,4,1111,222); 


a.Ssort();// 字 和 母 排序 : 1111, 222, 33,4 


a.sort(numberorder );// 数 值 排序 ，4, 33, 222, 1111 


Array.splice() 

插入 、 删 除 或 车 换 数组 元 系 

概要 

array.splice(start, deleteCount,value,...) 
参数 


开始 插入 和 (或 ) 删除 处 的 数组 元 素 的 序号 。 
deleteCount 


要 删 除 的 元 聚 个 数 ， 从 start 开 始 ， 并 包 侣 start 处 的 元 素 。 如 采 指 定 为 
0， 表 示 捅 入 元 隶 ， 而 不 用 删除 任何 元 素 。 


value,... 

要 搬入 数组 中 的 零 个 或 多 个 值 ， 从 start 序 号 处 开始 插入 。 

返回 值 

如 果 从 array 中 删除 了 元 素 ， 则 返回 一 个 新 数组 ， 包 含 这 些 删除 的 元 


力 、 


摘 述 


splice() 将 删除 从 start 开 始 (包括 start 处 ) 的 零 个 或 多 个 元 素 ， 并 且 用 参 
数列 表 中 指定 的 零 个 或 多 个 值 来 替换 掉 那 些 删 除 的 元 素 。 位 于 插入 或 
删除 的 元 素 之 后 的 数组 元 素 ， 在 有 必要 时 都 会 移动 ， 以 保持 与 数组 中 
剩余 元 素 的 连续 性 。 注 意 ， 虽 然 splice0 与 slice0 的 方法 名 类 似 ， 但 作用 
不 是 类 似 的 ，spliceO 会 直接 修改 数组 。 


示例 


通过 例子 就 很 容易 理解 splice() 的 操作 : 


Var a=[1,2,3,4,5,6,7,8]; 


a.splice(1,2);// 返 回 [2,3]; a 为 [1,4] 


a.splice(1,1);// 返 回 [4]; a 为 [1] 


a.splice(1,0,2,3);// 返 回 []; a 为 [1,2,3] 


参阅 


Array.slice() 

Array.toLocaleString() 

将 数组 转化 为 本 地 化 字符 串 

重 写 Object.toLocaleString() 

概要 

array.toLocaleString() 

返回 值 

数组 的 本 地 化 字符 串 表 示 。 

异 第 

TypeError 

调用 该 方法 时 ， 如 何 对 象 不 是 Array， 则 抛 出 该 异 浓 。 
搞 述 

数组 的 toLocaleString0) 方 法 返回 数组 的 本 地 化 字符 串 表 示 。 它 首先 调用 
所 有 数组 元 取 的 toLocaleString() 方 法 ， 然 后 使 用 地 区 特定 的 分 阳 了 字符 将 
结果 字符 串 连 接 起 来 。 

参阅 

Array.toString() ~ Object.toLocaleString() 
Array.toString() 

将 数组 转化 成 子 符 串 

重 写 Object.toString() 

概要 


array.toString() 

返回 值 

array 的 字符 串 表 示 。 

异 弟 

TypeError 

调用 该 方法 时 ， 如 有 果 对 象 不 是 Array， 则 抛 出 该 异 音 

搞 述 

数组 的 toString0) 方 法 把 数组 转化 成 字符 串 ， 并 返回 该 字符 果 。 当 数组 
用 于 字符 串 上 下 文中 时 ，JavaScript 会 调用 该 方法 将 数组 自动 转换 成 一 
个 字符 串 。 但 是 ， 在 某 些 场景 下 ， 还 是 需要 显 式 调用 toString0 方 法 。 
toString0) 在 把 数组 转化 成 字符 串 时 ， 首 先 要 将 每 个 数组 元 素 转 化 为 字 
符 串 (通过 调用 这 些 元 素 的 toString() 方 法 ) 。 一 旦 每 个 元 素 都 转化 成 
字符 吝 后 ，toString0 束 会 将 这 些 字 符 串 以 逗号 分 隔 的 列表 形式 输出 。 
返回 值 与 不 带 参数 调用 join() 方 法 返回 的 字符 串 是 一 样 的 。 


参阅 


Array.toLocaleString() 、 Object.toString() 


Array.unshift() 

在 数组 头 部 插入 元 素 
概要 
array.unshift(value,...) 
参数 

value,... 


要 插入 array 头 部 的 一 个 或 多 个 值 。 


返回 值 


数组 的 新 长 度 。 
搬 述 


unshiftO 会 把 参数 插入 array 的 头 部 ， 并 将 已 经 存在 的 元 素 顺 次 往 后 移 

动 ， 以 便 留 出 空间 。 该 方法 的 第 一 个 参数 会 成 为 数组 新 的 元 素 0， 如 有 果 
还 有 第 二 个 参数 的 话 ， 会 成 为 狐 的 元 素 1， 以 此 类 推 。 注 意 ，unshift() 
` 会 创建 新 数组 ， 而 是 直接 修改 数组 本 身 。 


示例 


unshift0) 经 常 与 shiftQ) 一 起 使 用 。 例 如 : 


var a=[];//a:[] 


a.unshift(1);//a:[i1] 返 回 : 1 


a.unshift(22);//a:[22,1] 返 回 : 2 


a.shift();//a:[i1] 返 回 : 22 


a.unshift(33,[4,5]);//a:[33,[4,5],1] 返 回 : 3 


参阅 
Array.shift() 
Boolean 

对 布尔 值 的 支持 
构造 画 数 


new Boolean(value)// 构 造 画 数 


Boolean(value )// 转 换 画 数 


参数 
value 
Boolean 对 象 存放 的 值 ， 或 要 转化 成 布尔 值 的 值 。 
返回 


作为 构造 函数 调用 ( 带 有 new 操 作 符 ) 时 ，Boolean0 会 将 参数 转换 成 布 
尔 值 ， 并 返回 一 个 包含 该 值 的 Boolean 对 象 。 当 做 函数 调用 (不 带 new 
EY 时 ，Boolean0 只 会 将 参数 转换 成 一 个 原始 的 布尔 值 ， 并 返回 
改 值 。 


0、NaN、null、 空 字符 串 "" 和 undefined 值 都 会 转换 成 false。 其 他 原始 
人 (但 包含 "false" 字 符 串 ) ， 以 及 其 他 的 对 象 和 数组 都 会 转 
true ° 


方法 

toString() 

根据 Boolean 对 象 代表 的 布尔 值 返 回 "true" 或 "false" 字 符 串 。 
valueOf() 

返回 Boolean 对 象 中 存放 的 原始 布尔 值 。 

搞 述 


在 JavaScript 中 ， 布 尔 值 是 一 种 基本 的 数据 类 型 。Boolean 对 象 是 一 个 在 

装 布尔 值 的 对 象 。Boolean 对 象 类 型 主要 提供 将 布尔 值 转换 成 字符 串 的 

toString() 方 法 。 当 调用 toString() 方 法 将 布尔 值 转换 成 字符 串 时 (通常 是 
由 JavaScript 隐 式 调用 的 ) ，JavaScript 会 在 内 部 将 这 个 布尔 值 转换 成 一 

个 临时 的 Boolean 对 象 ， 然 后 调用 这 个 对 象 的 toString() 方 法 。 


参阅 


Object 
Boolean.toString() 
将 布尔 值 转换 成 字符 串 
重 写 Object.toString() 
概要 

b.toString() 

返回 值 

根据 原始 布尔 值 或 Boolean 对 象 b 的 值 返回 "true" 或 "false" 字 符 串 。 
异 季 

TypeError 

调用 该 方法 时 ， 如 采 对 象 不 是 Boolean 类 型 ， 则 抛 出 该 异常 。 


Boolean.valueOf() 


Boolean 对 象 的 布尔 值 

重 写 Object.ValueOf() 

概要 

b.valueOf() 

返回 值 
Boolean 对 象 b 存 放 的 原始 布尔 值 。 
异常 


TypeError 


调用 该 方法 时 ， 如 果 对 象 不 是 Boolean 类 型 ， 则 抛 出 该 异常 
Date 

操作 日 期 和 时 间 

构造 画 数 


new Date() 
new Date(milliseconds) 
new Date(datestring) 


new Date(year,month, day, hours,minutes, seconds, ms) 


象 。 当 传 入 一 个 数 子 参 数 时 ， 这 个 数 子 将 当做 日 期 的 内 部 数字 表示 形 
式 ， 单 位 为 毫秒 ， 值 等 于 对 应 的 getTime() 方 法 的 返回 值 。 当 传 入 一 个 
字符 串 参 数 时 ， 它 将 当做 日 期 的 子 符 串 表示 形式 ， 格 式 为 Date.parse() 
方法 可 接受 的 格式 。 在 其 他 情况 下 ， 应 该 向 构造 钞 数 传 入 2~7 个 数 子 
参数 ， 用 于 指定 日 期 及 时 间 的 各 个 字段 。 除 了 前 两 个 参数 (指定 年 以 
及 月 的 范围 ) ， 其 余 参 数 都 是 可 选 的 。 注 意 ， 这 些 日 期 和 时 间 值 是 使 
用 本 地 时 间 指 定 的 ， 而 不 古国 际 协调 时 间 (UTC) (与 格林 尼 治 标准 
时 间 [GMT]) 类 似 ) 。 替 代 方 案 可 参阅 静态 方法 Date.UTC0。 


Date(0) 也 可 以 不 市 new 操 作答， 像 一 个 范 数 一 样 调用 。 以 这 种 方式 调用 
0 
符 吕 表示 。 


不 带 参 数 时 ，Date0 构 造 函 数 将 根据 当前 日 期 和 时 间 创 建 一 个 Date 对 


milliseconds 


需要 的 时 间 与 1970 年 1 月 1 日 午夜 (UTC) 之 间 的 毫秒 数 。 例 如 ， 传 入 
参数 5000 将 创建 一 个 表示 1970-01-01 午 夜 之 后 5 秒 钟 的 日 期 。 


datestring 


一 个 以 字符 串 形 式 定义 日 期 《以 及 时 间 ， 可 选 ) 的 参数 。 这 个 字符 串 
应 当 为 Date.parse() 可 接受 的 一 种 格式 。 


year 


年 份 ，4 位 数字 。 例 如 ，2001 代 表 2001 年 。 为 了 与 早期 实现 的 JavaScript 
兼容 ， 如 果 这 个 参数 的 值 在 0~99 之 间 ， 则 向 它 加 上 1900。 


month 
月 份 ， 介 于 0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 。 
day 


月 份 中 的 第 几 天 ， 介 于 1~31 之 间 的 一 个 整数 。 注 意 这 个 参数 使 用 1 作 
为 最 小 的 值 ， 而 其 他 参数 使 用 0 作为 最 小 的 值 。 可 选 的 。 


hours 

小 时 ，0 〈 午 夜 ) ~23 (上 晚上 11 点 ) 之 间 的 整数 。 可 选 的 。 
minutes 

小 时 中 的 分 钟 ，0~59 之 间 的 整数 。 可 选 的 。 

seconds 


分 钟 里 的 秒 数 ，0~59 之 间 的 整数 。 可 选 的 。 


ITS 
秒 中 的 毫秒 数 ，0~999 之 间 的 整数 。 可 选 的 。 
方法 


Date 对 象 没 有 可 以 直接 读 / 写 的 属性 ， 所 有 对 日 期 及 时 间 值 的 访问 都 需 
要 通过 方法 。Date 对 象 的 大 多 数 方法 分 为 两 种 形式 : 一 种 使 用 本 地 时 
间 ; 另 一 种 使 用 世界 时 间 (UTC 或 GMT) 。 如 果 一 个 方法 的 名 字 中 


有 "UTC"， 则 它 使 用 世界 时 间 进 行 操作 。 这 些 方法 对 在 下 面 一 起 列 出 
了 了。 例如， 列表 get[UTC]Day0O 同 时 代表 getDay0 和 getUTCDay0 。 


Date 的 方法 只 能 在 Date 对 象 上 调用 ， 如 果 试 图 在 其 他 类 型 的 对 象 上 调用 
它们 ， 将 抛 出 TypeError 异 常 。 


get[UTC]Date() 

返回 Date 对 象 的 月 份 中 的 日 期 值 ， 本 地 或 世界 时 间 。 
get[UTC]Day() 

返回 Date 对 象 的 一 周 中 的 日 期 值 ， 本 地 或 世界 时 间 。 
get[UTC]FullYear0) 

返回 日 期 的 年 份 ， 完 整 的 4 位 数字 的 格式 ， 本 地 或 世界 时 间 。 
get[UTC]Hours() 


返回 Date 对 象 的 小 时 值 ， 本 地 或 世界 时 间 。 
get[UTC]Milliseconds() 

返回 Date 对 象 的 毫秒 值 ， 本 地 或 世界 时 间 。 
get[UTC]Minutes() 

返回 Date 对 象 的 分 钟 值 ， 本 地 或 世界 时 间 。 
get[UTC]Month() 

返回 Date 对 象 的 月 份 值 ， 本 地 或 世界 时 间 。 
get[UTC]Seconds() 

返回 Date 对 象 的 秒 数值 ， 本 地 或 世界 时 间 。 


getTime() 


返回 Date 对 象 的 内 部 训 秒 表示 形式 。 注 意 这 个 值 与 时 区 无 关 ， 因 此 ， 
没有 一 个 单独 的 getUTCTime() 方 法 。 


getTimezoneOffset() 


返回 当前 日 期 的 本 地 表示 与 UTC 表示 之 间 相 差 的 分 钟 数 。 注 意 返 回 值 
依赖 于 指定 日 期 的 夏令 时 是 否 有 效 。 


getYear() 

返回 Date 对 象 的 年 份 值 。 这 个 方法 已 经 过 时 ， 建 议 使 用 getFullYear0 。 
set[UTC]Date() 

设置 日 期 的 月 份 的 日 期 值 ， 使 用 本 地 或 世界 时 间 。 
set[UTC]FullYear() 

设置 日 期 的 年 份 (以 及 可 选 的 月 份 及 日 期 值 ， 使 用 本 地 或 世界 时 


间 。 


set[UTC]Hours() 


设置 日 期 的 小 时 值 (以 及 可 选 的 分 钟 、 秒 以 及 毫秒 值 ) ， 使 用 本 地 或 
世界 时 间 。 


set[UTC]Milliseconds() 

设置 日 期 的 晤 秒 值 ， 使 用 本 地 或 世界 时 间 。 

set[UTC]Minutes() 

设置 日 期 的 分 钟 值 〈 以 及 可 选 的 秒 以 及 毫秒 值 ) ， 使 用 地 本 或 世界 时 


间 。 
set[UTC]Month() 
设置 日 期 的 月 份 值 (以 及 可 选 的 月 份 中 的 天 数 ) ， 使 用 本 地 或 世界 时 


间 。 


set[UTC]Seconds() 
设置 日 期 的 秒 值 《以 及 可 选 的 襄 秒 值 ) ， 使 用 本 地 或 世界 时 间 。 


setTime() 

使 用 毫秒 的 格式 ， 设 置 一 个 Date 对 象 的 值 。 

setYear() 

设置 一 个 Date 对 象 的 年 份 值 。 已 弃 用 ， 建 议 使 用 setFullYear()。 
toDateString() 

返回 一 个 表示 当前 日 期 的 日 期 部 分 的 字符 串 ， 使 用 本 地 时 区 。 
toGMTString() 


使 用 GMTH 时 区 ， 将 一 个 Date 转 换 为 一 个 字符 串 。 已 弃 用 ， 建 议 使 用 
toUTCString() ° 


toISOString() 


将 一 个 Date 转 为 字符 串 ， 使 用 ISO-8601 标 准 来 组 合 日 期 /时 间 格 式 和 
UTC 。 


toJSONO 
将 一 个 Date 对 象 JSON 序 列 化 ， 使 用 toISOString()。 
toLocaleDateString() 


返回 一 个 表示 当前 日 期 的 日 期 部 分 的 字符 串 ， 使 用 本 地 时 区 ， 本 地 时 
间 格 式 。 


toLocaleString() 
将 一 个 Date 转 换 为 字符 串 ， 使 用 本 地 时 区 以 及 本 地 时 间 格 式 。 


toLocaleTimeString() 


返回 一 个 表示 当前 日 期 的 时 间 部 分 的 字符 串 ， 使 用 本 地 时 区 以 及 本 地 
时 间 格 式 。 


toString() 
使 用 本 地 时 区 将 一 个 Date 转 换 为 字符 串 。 

toTimeString() 

返回 一 个 表示 指定 日 期 的 时 间 部 分 的 字符 串 ， 使 用 本 地 时 区 表示 。 
toUTCString() 

将 一 个 Date 转 为 字符 串 ， 使 用 世界 时 间 。 

valueOf() 

将 一 个 Date 转 为 对 应 的 内 部 毫秒 格式 。 

静态 方法 


除了 上 面 列 出 的 那些 实例 方法 ，Date 对 象 也 定义 了 三 个 表态 方法 。 
些 方法 通过 Date0 构 造 玉 数 本 身 调用 ， 而 不 是 通过 各 个 Date 对 象 。 


Sr 


Date.now!() 
返回 当前 时 间 ， 自 纪元 开始 后 的 毫秒 数 。 
Date.parsel() 


解析 一 个 日 期 及 时 间 的 字符 串 表 示 ， 返 回 该 日 期 的 内 部 暑 秒 表示 。 


Date.UTC() 
返回 指定 的 UTC 日 期 及 时 间 的 宫 秒 表示 。 
摘 述 


Date 对 象 是 JavaScript 语 言 中 内 置 的 数据 类 型 。Date 对 象 通过 上 面 描述 
的 新 DateO 语 法 创建 。 


创建 了 一 个 Date 对 象 之 后 ， 可 以 使 用 许多 方法 来 对 它 进 行 操作 。 大 多 
数 方法 只 是 简单 地 允许 使 用 本 地 或 UTC 〈 世 界 时 间 ， 或 GMT) 时 间 获 
取 或 设置 这 个 对 象 的 年 、 月、 日 、 小 时 、 分 钟 、 秒 以 及 毫秒 值 。 
toString(0) 方 法 以 及 它 的 变 体 则 将 日 期 转换 为 人 类 可 读 的 字符 串 。 
getTime() 及 setTime() 则 获取 或 设置 该 Date 对 象 的 内 部 表示 一 一 自 1970 年 
1 月 1 日 午夜 (GMT) 以 来 的 毫秒 数 。 在 这 个 标准 的 毫秒 格式 中 ， 日 期 
及 时 间 都 由 一 个 单独 的 整数 表示 ， 这 使 得 对 日 期 的 算术 操作 特别 简 
单 。ECMAScript 标 准 要 求 Date 对 象 能 以 毫秒 的 精度 ， 表 示 1970-01-01 之 
前 及 之 后 1 亿 天 的 日 期 及 时 间 。 这 是 一 个 加 上 或 减 去 273 785 年 的 区 间 
也 就 是 说 ， 直 到 275 755 年 ，JavaScript 的 时 钟 才 会 走 到 头 。 


示例 


创建 一 个 Date 对 象 后 ， 有 若干 方法 可 以 用 来 操作 它 : 


d=new Date( );// 取 得 当前 日 期 及 时 间 


document .write('Today is:"+d.toLocaleDateString()+'.');// 显 示 日 期 


document .write('The time is:'+d.toLocaleTimeString());// 显 示 时 间 


var day0fweek=d.getDay();// 星 期 儿 ? 


var weekend=(day0fweek==0)||(day0fweek==6);// 是 周末 吗 ? 


Date 对 象 的 男 一 个 常用 方法 是 从 当前 时 间 的 毫秒 表示 中 减 去 其 他 的 时 
间 ， 以 便 判断 两 个 时 间 之 间 的 靶 。 下 面 的 客户 闻 代 码 示 例 显示 了 两 种 
这 样 的 用 法 : 


<script language="Javascript"> 


today=new Date();// 记 下 当天 的 日 期 


份 的 日 期 


christmas=new Date();// 取 得 当前 4 


christmas .setMonth(11);// 将 月 份 设置 为 12 月 


christmas.setDate(25);// 以 及 将 天 设置 为 25 


// 如 果 圣 诞 节 还 没有 过 ， 计 算 现在 与 圣诞 节 之 间 的 毫秒 数 ， 


// 然 后 将 它 转 为 天 数 并 输出 一 条 消息 


if(today.getTime()<christmas.getTime()){ 


difference=christmas.getTime()-today.getTime(); 


difference=Math.floor(difference/(1000*60*60*24)); 


document ,write(' 距 圣诞 万 只 有 '+difference+' 天 了 ! <p>'); 


</script>//…. 这 儿 是 其 他 的 HTML 文 档 …. 


<script language="JavaScript">// 这 儿 使 用 Date 对 象 来 计时 


// 通 过 除 以 1000 来 将 毫秒 转 为 秒 


now=new Date( ) ， 


document .write('<p> 加载 本 页 花费 了 '+ 
(now.getTime()-today.getTime())/1000+ 
' 秒 。'); 


</script> 


参阅 

Date.parse() 、 Date.UTC() 
Date.getDate() 

返回 一 个 Date 对 象 的 月 份 中 的 日 期 值 


概要 

date ,getDate() 
返回 
nn 使 用 本 地 时 间 。 返 回 值 在 1~31 
卓 

Date.getDay() 

返回 一 个 Date 对 象 的 一 周 中 的 日 期 值 。 

概要 

date.getDay() 

返回 


给 定 Date 对 象 date 的 一 周 中 的 日 期 值 ， 使 用 本 地 时 间 。 返 回 值 介 于 0 
(星期 天 ) ~6 (星期 一 ) 之 间 。 


Date.getFull Year() 

返回 一 个 Date 对 象 的 年 份 值 。 
概要 

date.getFullYear() 

返回 


date 以 本 地 时 间 表 示 时 的 年 份 值 。 返 回 值 是 一 个 完整 的 4 位 数字 的 年 
份 ， 包 含 世 纪 ， 而 不 古 一 个 两 位 数字 的 缩写 。 


Date.getHours() 


返回 一 个 Date 对 象 的 小 时 值 。 
概要 

date.getHours() 

返回 


指定 的 Date 对 象 date 以 本 地 时 间 表 示 时 的 小 时 值 。 返 回 值 在 0 (午夜 ) 
~-23 (晚上 上 11 点) 之 间 。 


Date.getMilliseconds() 

返回 一 个 Date 对 象 的 毫秒 值 

概要 

date.getMilliseconds() 

返回 

指定 的 date 以 本 地 时 间 表 示 时 的 旱 秒 值 。 
Date.getMinutes() 

返回 一 个 Date 对 象 的 分 钟 值 

概要 

date.getMinutes() 

返回 

指定 Date 对 象 date 以 本 地 时 间 表 示 时 的 分 钟 值 。 返 回 值 在 0~59 之 间 。 
Date.get Month() 

返回 一 个 Date 对 象 的 月 份 值 


概要 
date.get Month() 
返回 


指定 Date 对 和 象 date 以 本 地 时 间 表 示 的 月 份 值 。 返 回 值 在 0 (1 月 ) ~11 
(12 月 ) 之 间 。 


Date.getSeconds() 

返回 一 个 Date 对 象 的 秒 钟 值 

概要 

date.getSeconds() 

返回 

指定 Date 对 象 date 以 本 地 时 间 表 示 的 秒 钟 值 。 返 回 值 在 0 一 59 之 间 。 
Date.getTime() 

将 一 个 Date 对 象 以 训 秒 形式 返回 

概要 

date.getTime() 

返回 

指定 的 Date 对 象 date 的 毫秒 表示 形式 ， 即 1970-1-01 午 夜 (GMT) 到 指 
定 日 期 之 间 的 晕 秒 数 。 

搞 述 


getTime() 将 日 期 和 时 间 转 换 为 一 个 单独 的 整数 。 在 比较 两 个 Date 对 象 或 
判断 两 个 日 期 之 间 的 时 间 差 时 ， 这 个 方法 很 有 用 。 注 意 ， 一 个 日 期 的 
蜡 秒 表示 形式 与 时 区 无 关 ， 所 以 这 个 方法 不 存在 对 应 的 getUTCTime0 


方法 。 不 要 把 这 个 getTime() 方 法 与 getDay( 和 getDate() 方 法 混淆 ， 后 两 
者 分 别 返 回 一 周 中 的 日 期 值 和 一 月 中 的 日 期 值 。 


Date.parse0 和 Date.UTC(0) 方 法 可 以 在 不 创建 Date 对 象 的 情况 下 将 一 个 日 
期 或 时 间 转 换 为 室 秒 表示 形式 。 


参阅 

Date ~ Date.parse() ~ Date.setTime() 、 Date.UTCO) 
Date.getTimezoneOffset() 

取得 与 GMT 时 间 之 间 的 差 

概要 

date.getTimezoneOffset() 

返回 

GMT 时 间 与 本 地 时 间 的 差 ， 用 分 钟表 示 。 

搞 述 

getTimezoneOffset() 以 分 钟 为 单位 返回 GMT 或 UTC 时 间 与 本 地 时 间 的 
差 。 实 际 上 ， 这 个 函数 告诉 你 当前 JavaScript 代 码 运行 在 哪个 时 区 ， 以 
及 给 定 的 日 期 是 否 处 于 夏令 时 状态 。 


返回 人 的 单位 是 分 钟 ， 而 不 是 小 时 ， 因 为 有 些 国家 的 时 区 不 是 以 小 
为 间隔 。 


Date.getUTCDate() 
返回 一 个 Date 对 象 的 一 月 中 的 日 期 值 (全 球 时 间 ) 
概要 


date.getUTCDate() 


返回 


以 全 球 时 间 表示 的 date 的 一 月 中 的 日 期 值 ( 介 于 1~31 之 间 ) 。 


Date.getUTCDay() 

返回 一 个 Date 对 象 的 一 周 中 的 日 期 值 (全 球 时 间 ) 
概要 

date.getUTCDay() 

返回 


以 全 球 时 间 表 示 的 date 一 周 中 的 日 期 值 。 返 回 值 在 0 (星期 天 ) 一 6 


期 六 ) 之 间 。 

Date.getUTCFullYear() 
返回 一 个 Date 对 和 象 的 年 份 值 (全 球 时 间 ) 
概要 

date.getUTCFullYear() 

返回 


以 全 球 时 间 表 示 的 date 的 年 份 值 。 返 回 值 是 一 个 完整 的 4 位 数字 的 年 


份 ， 而 不 是 两 位 数字 的 缩写 。 
Date.getUTCHours() 

返回 一 个 Date 对 象 的 小 时 值 (全 球 时 间 ) 
概要 

date.getUTCHours() 

返回 


性 


以 全 球 时 间 表 示 的 date 的 小 时 值 。 返 回 值 是 0〈 午 夜 ) 一 23 〈 晚 上 11 
点 ) 之 间 的 一 个 整数 。 


Date.getUTCMilliseconds() 

返回 一 个 Date 对 象 的 毫秒 值 (全 球 时 间 ) 

概要 

date.getUTCMilliseconds() 

返回 

以 全 球 时 间 表 示 的 date 的 蝇 秒 值 。 
Date.getUTCMinutes() 

返回 一 个 Date 对 象 的 分 钟 值 (全 球 时 间 ) 

概要 

date.getUTCMinutes() 

返回 

以 全 球 时 间 表 示 的 date 的 分 钟 值 。 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 
Date.getUTCMonth() 

返回 一 个 Date 对 象 的 一 年 中 的 月 份 值 (全 球 时 间 ) 
概要 

date.getUTCMonth() 

返回 


以 全 球 时 间 表 示 的 date 的 一 年 中 的 月 份 值 。 返 回 值 是 0 (1 月 ) 一 11 (12 
月 ) 之 间 的 一 个 整数 。 注 意 ，Date 对 象 用 1 表示 一 个 月 中 的 第 一 天 ， 但 


用 0 表示 一 年 中 的 第 一 个 月 。 

Date.getUTCSeconds() 

返回 一 个 Date 的 秒 数值 (全球 时 间 ) 

概要 

date.getUTCSeconds() 

返回 

以 全 球 时 间 表 示 的 date 的 秒 数值 。 返 回 值 是 0 一 59 之 间 的 一 个 整数 。 
Date.getYear() 

返回 一 个 Date 对 象 的 年 份 值 

概要 

date.getYear() 

返回 

给 定 Date 对 象 的 年 份 值 减 去 1900。 

搞 述 

getYear0 返 回 给 定 Date 对 象 date 的 年 份 值 减 去 1900。 目 ECMAScript 第 3 


版 开始 ，JavaScript 已 不 再 要 求实 现 这 个 方法 ;可 使 用 getFullYear0 来 代 


蔡 它 。 


Date.now() 
以 色 秒 的 形式 返回 当前 时 间 
概要 


Date.now!() 


返回 
从 1970-01-01 午 夜 (GMT) 到 现在 的 时 间 ， 以 训 秒 表示 。 
搞 述 


在 ECMAScript 5 之 前 ， 可 以 像 下 面 这 样 实现 这 个 方法 : 


Date.now=function(){return(new Date()).getTime();} 


参阅 

Date ~、 Date.getTime() 
Date.parse() 

解析 一 个 日 期 /时 间 子 符 串 
概要 


Date.parse(date) 


一 个 包含 待 解 析 的 日 期 和 时 间 的 字符 串 。 

返回 

从 1970-01-01 午 夜 (GMT) 到 给 定 日 期 之 间 的 县 秒 数 。 
描述 


Date.parse(0 是 Date 的 一 个 静态 方法 。 它 返回 从 纪元 开始 到 给 定 字符 串 参 
数 所 指定 的 日 期 之 间 的 毫秒 数 。 返 回 值 可 以 直接 用 于 创建 一 个 新 的 


Date 对 象 ， 或 用 于 通过 Date.setTime0 设 置 一 个 已 存在 的 Date 对 和 象 的 日 
期 。 


ECMAScript 5 要 求 这 个 方法 可 以 解析 由 Date.toISOString() 方 法 返回 的 字 
和 从 串 。 在 ECMAScript 5 以 及 之 前 的 版 本 中 ， 还 要 求 这 个 方法 能 解析 由 
toUTCString0 和 toString() 方 法 返回 的 依赖 于 具体 实现 环境 的 字符 串 。 
参阅 

Date ~、 Date.setTime() ~ Date.toISOString() 、 Date.toString() 
Date.SetDate() 

设置 一 个 Date 对 象 的 一 月 中 的 日 期 值 


概要 


date.setDate(day_of_month) 


Sh 


数 
day_of _ month 


131 之 间 的 一 人 本数 ， 将 用 做 date 的 对 应 月 中 的 日 期 值 ( 本 地 时 
间 ) 。 


返回 


调整 后 的 日 期 的 又 秒表 示 形 式 。 在 有 ECMAScript 标 准 之 前 ， 这 个 方法 
什么 也 不 返回 。 


Date.setFullYear() 
设置 一 个 Date 的 年 份 值 ， 以 及 可 远 的 月 份 值 和 日 期 值 
概要 


date.setFullYear(year) 
date.setFullYear(year,month) 


date.setFullYear(year,month,day) 


year 


d at e 中 待 设置 的 年 份 值 ， 本 地 时 间 形 式 。 这 个 参数 应 该 是 一 个 包含 世 
纪 的 整数 ， 如 1999; 它 不 能 是 缩写 ， 如 99 。 


month 

0~-11 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 月 份 值 (本 地 时 间 ) 。 
day 

1~31 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 对 应 月 中 的 日 期 值 〈 本 地 时 


间 ) 。 

返回 

调整 后 的 日 期 的 内 部 量 秒 表示 形式 。 
Date.setHours() 

设置 一 个 Date 的 小 时 、 分 钟 、 秒 以 及 毫秒 值 
概要 

date.setHours(hours) 
date.setHours(hours,minutes) 
date.setHours(hours,minutes,seconds) 


date.setHours(hours,minutes,seconds,millis) 


hours 


0 (午夜 ) 一 23 (晚上 11 点 ) 之 间 的 一 个 整数 ， 将 用 做 date 的 新 的 小 时 
值 (本 地 时 间 ) 。 


minutes 


0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 的 分 钟 值 (本 地 时 间 ) 。 
在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


seconds 


0~59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 的 秒 钟 值 (本 地 时 间 ) 。 
在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


millis 


0~999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 的 宫 秒 值 (本 地 时 间 ) 。 
在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


返回 


调整 过 后 的 时 间 的 晕 秒 表示 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方 
法 什么 也 不 返回 。 


Date.setMilliseconds() 
设置 一 个 日 期 的 毫秒 值 
概要 


date.setMilliseconds(millis) 


将 用 于 date 以 本 地 时 间 表 示 的 毫秒 值 。 这 个 参数 应 该 是 0~999 之 间 的 一 
个 整数 。 


返回 

调整 后 的 日 期 的 毫秒 表示 形式 。 
Date.setMinutes() 
设置 一 个 Date 的 分 钟 、 秒 钟 以 及 旱 秒 值 
概要 

date.setMinutes(minutes) 
date.setMinutes(minutes,seconds) 
date.setMinutes(minutes,seconds,millis) 
数 

minutes 


0~59 之 间 的 一 个 整数 ， 将 用 做 Date 对 象 date 的 分 钟 值 (本 地 时 间 ) 


Sh 


seconds 


0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 秒 钟 值 (本 地 时 间 ) 。 在 
ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


millis 


0~-999 之 间 的 一 个 可 选 整 数 ， 将 用 做 date 的 训 秒 值 (本 地 时 间 ) 。 在 
ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


返回 


调整 过 后 的 日 期 的 过 秒表 示 形 式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方 
法 什么 也 不 返回 。 


Date.set Month() 
设置 一 个 Date 的 月 份 及 日 期 值 
概要 

date.setMonth(month) 


date.set Month(month, day) 


month 


0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 ， 将 用 做 该 Date 对 象 date 的 新 月 
份 值 (本 地 时 间 ) 。 注 意 月 份 从 0 开始 ， 而 1 月 中 的 日 期 从 1 开始 。 


day 


1~31 之 间 的 一 个 可 选 整 数 ， 将 用 做 该 date 的 对 应 月 份 中 的 日 期 值 (本 
地 时 间 ) 。 在 ECMAScript 标 准 化 之 前 ， 不 支持 这 个 参数 。 


返回 


调整 后 的 日 期 的 宣 秒 表现 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方法 
什么 也 不 返回 。 


Date.setSeconds() 

设置 一 个 Date 的 秒 钟 及 上 毫秒 值 
概要 

date.setSeconds(seconds) 


date.setSeconds(seconds,millis) 


数 


Sh 


Seconds 
0~59 之 间 的 一 个 整数 ， 将 用 做 Date 对 象 date 的 秒 钟 值 。 
millis 


0~-999 之 间 的 一 个 可 选 整数 ， 将 用 做 该 date 的 新 毫秒 值 (本 地 时 间 ) 。 
在 ECMAScript 标 准 化 之 前 ， 不 文 持 这 个 参数 。 


返回 


调整 过 后 的 日 期 的 毫秒 表现 值 。 在 ECMAScript 标 准 化 之 前 ， 这 个 参数 
什么 也 不 返回 。 


Date.setTime() 
使 用 室 秒 值 设置 一 个 时 间 
概要 


date.setTime(milliseconds) 


milliseconds 


需要 的 日 期 及 时 间 与 1970-01-01 午 夜 (GMT) 之 间 的 毫秒 数 。 这 种 类 
型 的 过 秒 值 也 可 以 传人 Date0 构 造 画 数 ， 还 可 以 通过 调用 Date.UTCO 和 
Sn 。 将 日 期 转换 为 这 种 翅 秒 格式 后 ， 它 将 与 时 区 无 


返回 


milliseconds 参 数 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方法 什么 也 不 返 
加 | o 


Date.SetUTCDate() 
设置 一 个 Date 的 对 应 月 中 的 日 期 值 (全 球 时 间 ) 


概要 


date.SetUTCDate(day_of month) 


day_of_ month 


将 用 做 date 的 对 应 月 中 的 日 期 值 ， 以 全 球 时 间 表 示 。 这 个 参数 应 该 是 1 
一 31 之 间 的 一 个 整数 。 


返回 

调整 后 的 日 期 的 内 部 晕 秒 表示 形式 。 
Date.setUTCFulljYear() 

设置 一 个 Date 的 年 份 、 月 份 以 及 日 期 值 (全球 时 间 ) 
概要 

date.setUTCFullYear(year) 
date.setSeconds(seconds,millis) 


date.setUTCFullYear(year,month,day) 


year 


将 用 做 dat e 的 以 全 球 时 间 表示 的 年 份 值 。 这 个 参数 应 该 是 一 个 包含 世 
纪 的 整数 ， 如 1999， 不 能 是 缩写 ， 如 99。 


month 


0~11 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 月 份 值 〈 全 球 时 间 ) 。 注 意 
月 份 是 以 0 开始 的 数字 ， 而 月 份 中 的 日 期 则 以 1 开始 。 


1 


day 


将 用 做 date 的 对 应 月 中 的 新 日 期 值 全球 
时 间 ) 。 


返回 

调整 后 的 时 间 的 又 秒表 示 形 式 。 
Date.setUTCHours() 

设置 一 个 Date 的 小 时 、 分 钟 、 秒 钟 以 及 时 秒 值 
概要 

date.setUTCHours(hours) 
date.setUTCHours(hours,minutes) 
date.setUTCHours(hours,minutes,seconds) 


date.setUTCHours(hours,minutes,seconds,millis) 


hours 


将 用 做 date 的 以 全 球 时 间 表示 的 小 时 值 。 这 个 参数 应 该 为 0 (午夜 ) ~ 
23 (晚上 11 点 ) 之 间 的 一 个 整数 。 


minutes 

0 一 59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 分 钟 值 (全 球 时 间 ) 
seconds 

0~59 之 间 的 一 个 可 选 整 数 ， 将 用 做 date 的 痢 秒 钟 值 (全 球 时 间 ) 
millis 


0 一 999 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 新 毫秒 值 〈 全 球 时 间 ) 


返回 

调整 后 的 日 期 的 晤 秒 表示 形式 。 
Date.setUTCMilliseconds() 
设置 一 个 Date 的 毫秒 值 (全 球 时 间 ) 
概要 


date.setUTCMilliseconds(millis) 


millis 


将 用 做 date 的 以 全 球 时 间 表 示 的 过 秒 值 。 这 个 参数 应 该 为 0~999 之 间 的 
一 个 整数 。 


返回 

调整 后 的 日 期 的 又 秒 表示 形式 。 
Date.setUTCMinutes() 

设置 一 个 Date 的 分 钟 、 秒 钟 以 及 毫秒 值 (全 球 时 间 ) 
概要 

date.setUTCMinutes(minutes) 
date.setUTCMinutes(minutes,seconds) 


date.setUTCMinutes(minutes,seconds,millis) 


将 用 做 date 的 以 全 球 时 间 表 示 的 分 钟 值 。 这 个 参数 应 该 为 0~-59 之 间 的 
个 整数 。 


seconds 

0~59 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 秒 钟 值 (全 球 时 间 ) 。 
millis 

0~999 之 间 的 一 个 可 选 整 数 ， 将 用 做 date 的 毫秒 值 (全 球 时 间 ) 。 
返回 

调整 后 的 日 期 的 又 秒表 示 形 式 。 

Date.setUTCMonth() 

设置 一 个 Date 的 月 份 值 及 日 期 值 (全 球 时 间 ) 

概要 

date.setUTCMonth(month) 


date.setUTCMonth(month,day) 


month 


将 用 做 date 的 以 全 球 时 间 表示 的 月 份 值 。 这 个 参数 应 该 是 0 (1 月 ) 一 11 
(12 月 ) 之 间 的 一 个 整数 。 注 意 月 份 值 是 从 0 开始 的 数字 ， 一 个 月 中 的 
日 期 值 则 是 从 1 开始 。 


day 
1~31 之 间 的 一 个 可 选 整数 ， 将 用 做 date 的 对 应 月 中 的 日 期 值 (全 球 时 


间 ) 


返回 


调整 后 的 日 期 的 又 秒 表示 形式 。 
Date.setUTCSeconds() 

设置 一 个 Date 的 秒 钟 及 毫秒 值 (全 球 时 间 ) 
概要 

date.setUTCSeconds(seconds) 
date.setUTCSeconds(seconds,millis) 

数 

seconds 


将 用 做 date 的 以 全 球 时 间 表 示 的 秘 钟 值 。 这 个 参数 应 该 为 0~59 之 间 且 


一 个 整数 


Sh 


millis 

0 一 999 之 间 的 一 个 可 选 整 数 ， 将 用 做 date 的 毫秒 值 (全 球 时 间 ) 
返回 

调整 后 的 日 期 的 过 秒表 示 形 式 。 

Date.setYear() 

设置 一 个 Date 的 年 份 值 

概要 


date.setYear(year) 


一 个 将 用 做 该 Date 对 象 date 的 年 份 值 (全 球 时 间 ) 的 整数 。 如 果 这 个 值 

， 它 将 会 加 上 1900， 以 便 把 它 当 做 1900~1999 之 间 的 年 份 
理 。 

返回 


调整 后 的 日 期 的 训 秒 表示 形式 。 在 ECMAScript 标 准 化 之 前 ， 这 个 方法 
什么 也 不 返回 。 


摘 述 


setYear0 设 置 给 定 Date 对 象 的 年 份 值 ， 其 中 1900~1999 之 间 的 年 份 的 行 
为 有 些 特 别 。 


根据 ECMAScript 第 3 版 ，JavaScript 实 现 中 已 不 再 对 这 个 函数 做 要 求 ， 
建议 使 用 setFullYear0 来 代替 它 。 


Date.toDateString() 

以 字符 串 的 形式 返回 一 个 Date 的 日 期 部 分 
概要 

date.toDateString() 

返回 


某 个 date 的 日 期 部 分 的 一 个 与 具体 实现 相关 的 、 人 类 可 读 的 字符 串 表 示 
形式 。 以 本 地 时 区 表示 。 


参阅 

Date.toString() 
Date.toTimeString() 
Date.toGMTString() 
已 弃 用 


将 一 个 Date 转 换 为 全 球 时 间 表 示 的 一 个 字符 串 
概要 

date.toGMTString() 

返回 


由 Date 对 象 date 定 义 的 日 期 及 时 间 的 一 个 字符 串 表示 形式 。 在 转换 为 字 
符 串 之 前 ， 日 期 将 先 从 本 地 时 区 转换 为 GMT 时 区 。 


描述 
toGMTString0) 已 弃 用 ， 建 议 使 用 功能 相同 的 Date.toUTCString()。 


根据 ECMAScript 第 3 版 ，JavaScript 的 具体 实现 已 不 要 对 这 个 方法 做 要 
求 ， 建 议 使 用 toUTCString() 来 代替 。 


参阅 

Date.toUTCString() 

Date.toISOString() 

ECMAScript 5 

将 一 个 Date 转 换 为 1SO-8601 格 式 的 字符 串 

概要 

date.toISOString() 

返回 

date 的 一 个 字符 串 表 示 形 式 ， 以 ISO-8601 标 准 以 及 时 区 为 "Z" 的 UTC 时 
间 表 示 形 式 ， 包 含 日 期 和 时 间 的 完整 精度 。 返 回 的 字符 串 格式 形 如 : 


yyyy-mm-ddThh:mm:ss.sssZz 


参阅 

Date.parse() 、 Date.toString() 
Date.toJSON 

ECMAScript 5 

JSON 序 列 化 一 个 Date 对 象 
概要 


date.toJSON(key) 


JSON.stringify0O 会 传递 这 个 参数 ， 但 是 toJSON 方 法 会 忽略 它 。 

返回 

date 的 一 个 字符 串 表 示 形 式 ， 值 为 调用 它 的 toISOString() 方 法 的 结果 。 
描述 


JSON.stringify0 使 用 该 方法 将 一 个 Date 对 象 转换 为 一 个 字符 串 。 它 不 是 
一 个 通用 的 方法 。 


参阅 

Date.toISOString() ~ JSON .stringify() 
Date.toLocaleDateString() 

以 本 地 格式 的 字符 串 形式 返回 一 个 Date 的 日 期 部 分 
概要 


date.toLocaleDateString() 
返回 


date 的 日 期 部 分 的 一 个 与 具体 实现 相关 的 、 人 类 可 读 的 字 从 串 表 示 形 
式 ， 使 用 本 地 时 区 以 及 本 地 习惯 格式 。 


参阅 


Date.toDateString() ~、 Date.toLocaleString() 、 Date.toLocaleTimeString() 、 
Date.toString() 、 Date.toTimeString() 


Date.toLocaleString() 

将 一 个 Date 转 换 为 一 个 本 地 格式 的 字符 串 

概要 

date.toLocaleString() 

返回 

由 date 指 定 的 日 期 与 时 间 的 一 个 字符 串 表示 形式 。 日 期 与 时 间 使 用 本 地 
时 区 以 及 本 地 的 习惯 表示 。 

用 法 


toLocaleString() 使 用 本 地 时 区 ， 将 一 个 日 期 转换 为 一 个 字符 串 。 这 个 方 
法 也 使 用 本 地 习惯 来 格式 化 日 期 及 时 间 ， 所 以 在 不 同 的 国家 或 平台 

上 ， 格 式 可 能 会 不 一 样 。toLocaleString() 一 般 返 回 的 是 用 户 首 选 的 日 期 
及 时 间 格 式 。 


参阅 


Date.toISOString() 、 Date.toLocaleDateString() 、 
Date.toLocaleTimeString() 、 Date.toString() 、 Date.toUTCString() 


Date.toLocaleTimeString() 


返回 使 用 本 地 格式 表示 的 Date 的 时 间 部 分 
概要 

date.toLocaleTimeString() 

返回 


一 个 与 实现 相关 的 、 人 类 可 读 的 表示 date 的 时 间 部 分 的 子 符 串 ， 使 用 本 
地 时 区 以 及 本 地 习惯 格式 。 


参阅 


Date.toDateString() ~、 Date.toLocaleDateString() ~、 Date.toLocaleString()、 
Date.toString() ~、 Date.toTimeString() 


Date.toString() 

将 一 个 Date 转 换 为 一 个 字符 串 

概要 

date.toString() 

返回 

date 的 一 个 人 类 可 读 的 字符 串 表示 形式 ， 使 用 本 地 时 区 。 

描述 

toStringO0 返 回 date 的 一 个 人 类 可 读 的 、 与 实现 相关 的 字符 串 表 示 形 式 。 
和 toUTCString0 不 同 ，toStringO 使 用 本 地 时 区 。 与 toLocaleString0) 不 
同 ，toString() 可 能 不 使 用 本 地 特定 的 格式 来 表示 日 期 及 时 间 。 

参阅 

Date.parsel() 


Date.toDateString() 


Date.toISOString() 

Date.toLocaleString() 
Date.toTimeString() 

Date.toUTCString() 
Date.toTimeString() 

以 字符 串 形式 返回 一 个 Date 的 时 间 部 分 
概要 

date.toTimeString() 

返回 


一 个 与 实现 相关 的 、 人 类 可 读 的 表示 date 的 时 间 部 分 的 字符 串 ， 使 用 本 
地 时 区 表示 。 


参阅 

Date.toString() ~ Date.toDateString() 、 Date.toLocaleTimeString() 
Date.toUTCString() 

将 一 个 Date 转 换 为 字符 串 (全 球 时 间 ) 

概要 

date.toUTCString() 

返回 

date 的 一 个 人 类 可 读 的 以 全 球 时 间 表 示 的 字符 串 。 

搞 述 


toUTCString(0) 返 回 date 的 以 全 球 时 间 表示 的 与 实现 相关 的 子 符 串 。 


参阅 

Date.toISOString() 、 Date.toLocaleString() 、 Date.toString() 
Date.UTC() 

将 一 个 Date 说 明 转 为 营 秒 形式 

概要 


Date.UTC(year,month,day,hours,minutes,seconds,ms) 


year 


以 4 位 数 格式 表示 的 年 份 。 如 果 这 个 参数 在 0~99 之 间 (包括 0 和 99) ， 
则 它 将 加 上 1900， 当 做 1900~-1999 之 间 的 年 份 处 理 。 


month 
月 份 ， 指 定 为 0 (1 月 ) ~11 (12 月 ) 之 间 的 一 个 整数 。 
day 


对 应 月 中 的 日 期 值 ， 指 定 为 1 一 31 之 间 的 一 个 整数 。 注 意 这 个 参数 的 最 
小 值 为 1， 而 其 他 参数 的 最 小 值 是 0。 这 个 参数 是 可 选 的 。 


hours 


小 时 ， 指 定 为 0〈 午 夜 ) 一 23 (晚上 11 点 ) 之 间 的 一 个 整数 。 这 个 参数 
是 可 选 的 。 


minutes 
小 时 中 的 分 钟 值 ， 指 定 为 0 一 59 之 间 的 一 个 整数 。 这 个 参数 是 可 选 的 。 
seconds 


分 钟 中 的 秒 钟 值 ， 指 定 为 0~59 之 则 的 一 个 整数 。 这 个 参数 是 可 移 的 。 


ITS 


毫秒 值 ， 指 定 为 0~999 之 间 的 一 个 整数 。 这 个 参数 是 可 选 的 ， 在 
ECMAScript 标 准 化 之 前 ， 这 个 参数 会 被 忽略 。 


返回 


指定 的 全 球 时 间 的 毫秒 表示 形式 。 也 就 是 说 ， 这 个 方法 返回 1970-01-01 
午夜 (GMT) 与 指定 时 间 的 毫秒 数 。 


摘 述 


Date.UTC0 是 一 个 静态 方法 ; 须 通 过 Date0 构 造 范 数 调用 它 ， 而 不 是 通 
过 具体 的 Date 对 象 调用 。 

Date.UTCO 的 参数 指定 一 个 日 期 及 时 间 ， 将 当做 UTC 解析 ; 使 用 GMT 
时 区 。 指 定 的 UTC 时 间 将 转换 为 蝶 秒 格式 ， 可 用 于 Date() 构 造 函 数 方法 
和 Date.setTime() 方 法 。 

Date0 构 造 男 数 方法 和 Date.UTCO 所 能 接受 的 日 期 及 时 间 参 数 完 全 相 

同 。 不 同 之 处 在 于 ，Date(0) 构 造 函 数 使 用 本 地 时 间 ， 而 Date.UTCO 使 用 


全 球 时 间 (GMT) 。 可 以 使 用 类 似 下 面 的 代码 使 用 UTC 定义 来 创建 一 
个 Date 对 和 象 : 


d=new Date(Date.UTC(1996,4,8,16,30)); 


参阅 

Date ~、 Date.parse() 、 Date.setTime() 
Date.valueOf() 

将 一 个 Date 转 为 蝇 秒 表示 形式 

重 写 Object.valueOf() 

概要 


date.valueOf() 

返回 

date 的 晕 秒 表示 形式 。 返 回 值 握 Date.getTime0 的 返回 值 相同 。 
decodeURI() 

解码 一 个 URI 中 的 字符 

概要 


decodeURI(uri) 


一 个 包含 已 编码 的 URI 或 其 他 竺 解码 的 文本 的 字符 串 。 
返回 
uri 的 一 个 副本 ， 其 中 所 有 十 六 进 制 转 义 序列 都 已 替换 为 它们 代表 的 字 


URIError 
表示 uri 中 的 一 个 或 多 个 转 义 序列 格式 有 误 ， 不 能 正确 解码 。 
描述 


decodeURIO 是 一 个 全 局 函数 ， 返 回 它 的 uri 参 数 的 一 份 解 码 后 的 副本 。 
它 是 encodeURIO 的 赣 操 作 ， 更 多 细 和 可 参阅 该 函数 的 参考 页 面 。 


参阅 


decodeURIComponent() 、 encodeURI() 、 encodeURIComponent() 、 
escape() 、 unescapel() 


decodeURIComponent() 
解码 一 个 URI 组 件 中 的 字符 
概要 


decodeURI(s) 


一 个 包含 已 编码 的 URI 组 件 或 其 他 待 解码 的 文本 的 字符 种。 
返回 


5 的 一 个 副本 ， 其 中 所 有 的 十 六 进 制 转 义 序列 都 已 蔡 换 为 它们 所 代表 的 
字符 。 


异常 

URIError 

表示 s 中 的 一 个 或 多 个 转 义 序列 格式 有 误 ， 不 能 正确 地 解码 。 

描述 

decodeURIComponentO 是 一 个 全 局 函数 ， 返 回 它 的 参数 的 一 个 已 解码 
的 副本 。 它 是 encodeURIComponent0 的 揽 操 作 ， 更 多 细 和 可 参阅 该 函 
数 的 参考 页 面 。 

参阅 


decodeURI() 、 encodeURI() 、 encodeURIComponent() 、 escape() 、 
unescape() 


encodeURI() 


转 义 一 个 URI 中 的 字符 


概要 


encodeURI(uri) 


一 个 包含 URI 或 其 他 每 编码 的 文本 的 子 符 串 。 
返回 
ui 的 一 个 副本 ， 其 中 某 些 字符 已 被 奉 换 为 十 六 进 制 转 义 序列 。 


己 A 
天 吊 


URIError 
表示 wri 包含 非法 的 Unicode 代 理 项 对 ， 不 能 编码 。 
摘 述 


encodeURIO 是 一 个 全 局 函数 ， 返 回 它 的 uri 参 数 的 一 个 编码 后 的 副本 。 
ASCII 字 母 和 数字 以 及 下 面 的 ASCII 标 点 字符 将 不 会 编码 : 


-_ .~*!() 


由 于 encodeURIO 的 意图 是 编码 完整 的 URI， 因 此 下 面 这 些 在 URI 中 有 特 
殊 含义 的 ASCII 标 点 字符 也 不 会 被 转 义 : 


;/?:@%=+$,# 


uri 中 的 其 他 字符 将 被 转换 为 对 应 的 UTF-8 编 码 ， 并 将 结果 的 一 、 二 或 三 
个 字 刷 编码 为 一 个 %xx 格 式 的 十 六 进 制 转 义 序列 。 在 这 种 编码 机 制 中 ， 
ASCII 字 符 将 被 砍 换 为 一 个 单独 的 %xx 转 义 序列 ， 编 码 在 \u0080~Au07ff 


之 间 的 字符 将 被 奉 换 为 两 个 转 义 序列 ， 其 他 所 有 的 十 六 位 的 Unicode 字 
符 则 将 被 蔡 换 为 三 个 转 义 序列 。 


使 用 这 个 方法 来 编码 URI 时 ， 必 须 确 保 该 URI 的 组 件 〈 如 查询 字符 串 ) 
都 不 包含 如 “? 和 "“#" 等 的 URI 分 隅 字符 。 如 果 这 些 组 件 必 须 包 含 这 类 字 
符 ， 则 应 该 使 用 encodeURIComponent() 来 对 每 个 组 件 进行 单独 编码 。 
decodeURIO 是 这 个 方法 的 逆 方 法 。 在 EFCMAScript 第 3 版 之 前 ， 可 以 使 
人 (现在 这 两 个 方法 已 弃 用 ) 来 执行 类 似 的 编 
码 和 解码 。 


示例 


// 返 回 http://www.isp.com/app.cgi?arg1=1&arg2=hello%2Qworld 


encodeURI("http://www.isp.com/app.cgi?arg1=1&arg2=hello world"); 


encodeURI("N\u90a9" ) ; // 版 权 字符 将 编码 为 6C2%A9 


参阅 


decodeURI() 、 decodeURIComponent() 、 encodeURIComponent() 、 
escape() 、 unescapel() 


encodeURIComponent() 
转 义 URI 组 件 中 的 字符 
概要 


encodeURIComponent(s) 


一 个 包含 URI 一 部 分 或 其 他 待 编码 文本 的 字符 串 。 


返回 

s 的 一 个 副本 ， 某 些 字符 已 替换 为 十 六 进 制 转 义 序列 。 
异 凶 

URIError 

表示 s 包 含 非法 的 Unicode 代 理 项 对 ， 不 能 编码 。 

搞 述 


encodeURIComponent() 是 一 个 全 局 钞 数 ， 返 回 它 的 参数 6 的 一 个 编码 后 
的 副本 。ASCII 字 母 和 数字 以 及 下 面 这 些 ASCII 标 点 字符 将 不 会 编码 ; 


Se 


所 有 其 他 字符 ， 包 括 如 “2*、“:” 以 及 佑 *” 等 用 于 分 隔 URI 的 多 个 组 件 的 标 
点 字符 ， 都 将 被 殖 换 为 一 个 或 多 个 十 六 进 制 的 转 义 序列 。 关 于 编码 机 
制 的 描述 可 参阅 encodeURIO 。 


注意 encodeURIComponent() 和 encodeURI() 之 间 的 差别 : 
encodeURIComponent() 假 设 它 的 参数 是 URI 的 一 部 分 (如 协议 、 主 机 
名 、 路 径 或 查询 字符 串 ) 。 因 此 ， 它 将 那些 用 于 分 隔 URI 不 同 部 分 的 标 
点 字符 也 转 义 了 。 


示例 


encodeURIComponent("he11o wor1d?") ;// 返 回 he11o%20wor1d%3F 


参阅 


decodeURI() 、 decodeURIComponent() 、 encodeURI() 、 escape() 、 
unescape() 


Error 

一 个 一 般 性 的 异常 
对 象 - 错 误 

构造 函数 

new Error() 


new Error(message) 


message 

一 条 可 选 的 销 误 消 息 ， 用 于 提供 关于 该 异常 的 细 ;m 。 

返回 

一 个 新 构建 的 Error 对 象 。 如 果 指 定 message 参 数 ， 则 该 Error 对 象 将 把 它 
用 做 它 的 message 属 性 的 值 ， 其 他 情况 下 ， 它 将 使 用 一 个 预定 义 的 默认 
字符 串 作为 该 属性 的 值 。 当 不 使 用 new 操 作答 ， 直 接 将 Error() 构 造 印 数 
像 一 个 男 数 一 样 调用 时 ， 它 的 行为 和 融 new 操 作 符 调 用 时 一 样 。 

属性 

message 


提供 关于 该 异常 的 细 广 的 一 条 蚀 误 消 尽 。 这 个 属性 的 值 为 传 给 构造 丽 
数 的 字符 串 或 一 个 预定 义 的 默认 子 符 囊 。 


name 


一 个 指定 该 异常 的 类 型 的 字符 串 。 对 Error 类 和 它 所 有 的 子 类 而 言 ， 这 
个 属性 指定 了 用 于 创建 该 实例 的 构造 丁 数 的 名 字 。 


方法 


toString() 


返回 一 个 表示 该 Error 对 象 的 预定 义 字 符 串 。 
摘 述 


Error 类 的 实例 表示 的 错误 或 异常 通常 与 hrow 和 try/catch 语 句 一 起 使 
用 。name 属 性 指明 该 异常 的 类 型 ，message 属 性 则 提供 了 关于 该 异常 的 
人 类 可 读 的 细节 。 


JavaScript 解 释 器 永远 不 会 直接 抛 出 Error 对 象 ， 它 只 会 抛 出 Error 的 某 个 
子 类 的 实例 ， 如 SyntaxError 或 RangeError°。 在 自己 的 代码 中 ， 抛 出 Error 
对 象 来 发 出 异常 信号 可 能 更 方便 ， 或 者 可 以 简单 地 使 用 一 个 原始 字符 
串 或 数值 来 抛 出 一 条 错误 消 轧 或 一 个 错误 代码 。 


注意 ， 虽 然 ECMAScript 标 准 为 Error 类 定义 一 个 toString0 方 法 (并 且 
Error 的 所 有 子 类 都 继承 了 这 个 方法 ) ， 但 它 并 不 要 求 这 个 toString() 方 
法 返回 的 字符 串 包 含 message 属 性 的 内 容 。 因 此 ， 不 要 期 望 toString() 方 
法 会 将 一 个 Error 对 象 转换 为 一 个 有 意义 的 、 人 类 可 读 的 字符 串 。 疝 用 
户 显示 错误 消息 时 ， 应 该 显 式 地 使 用 该 Error 对 象 的 name 及 message 属 


示例 


可 以 像 下 面 这 样 发 出 异 前 信和 号: 


function factorial(x){ 

if(x<0)throw new Error("factorial:x must be>=0"); 
if(x<=1)return 1;else return x*factorial(x-1); 

} 


如 果 捕 获 一 个 异常 ， 则 可 以 使 用 类 似 下 面 的 代码 向 用 户 显 示 (这 儿 使 
用 客户 端的 Window.alert(0) 方 法 ) : 


try{f&*( 色 /* 这 儿 将 抛 出 一 个 异常 */]} 


catch(e){ 


if(e instanceof Error){// 它 是 Error 或 其 子 类 的 实例 吗 ? 
alert(e.namet+":"+e.message); 
} 


上 


参阅 


EvalError 、 RangeError ~、 ReferenceError ~ SyntaxError ~ TypeError 、 
URIError 


Error.message 
人 类 可 读 的 错误 消 县 
概要 


eIror.message 
搞 述 


Error 对 象 (或 Error 的 任何 子 类 的 实例 ) 的 message 属 性 用 于 包含 一 个 人 
类 可 读 的 字符 串 ， 提 供 了 关于 发 生 的 错误 或 异常 的 细节 。 如 果 向 Error() 
构造 函数 传 和 message 参数 ， 则 该 参数 将 会 是 这 个 message 属 性 的 值 。 如 
果 没 有 传 入 message 参 数 ， 则 Error 对 象 的 这 个 属性 将 继承 预定 义 的 默认 
值 (可 能 是 空 字符 串 ) 。 


Error.name 
错误 的 类 型 
概要 


eITOr.Name 


描述 

Error 对 象 《或 Error 的 任何 子 类 的 实例 ) 的 name 属 性 定义 发 生 的 错误 或 
异常 的 类 型 。 所 有 Error 对 象 都 从 它们 的 构造 函数 继承 这 个 属性 。 这 个 
属性 的 值 和 它们 的 构造 国 数 的 名 字 相 同 。 也 残 是 说 ，SyntaxError 对 象 
的 name 属 性 为 "SyntaxError"，EvalError 对 象 的 name 属 性 为 "EvalError"。 
Error.toString() 

将 一 个 Error 对 象 转 为 字符 串 

重 写 Object.toString() 

概要 

error.toString() 

返回 

一 个 根据 实现 预定 义 的 字符 串 。 除 了 它 应 该 是 一 个 字符 捉 外 ， 


ECMAScript 标 准 化 没有 指定 这 个 方法 的 返回 值 的 任何 信息 。 值 得 注意 
的 是 ， 返 回 的 字符 串 并 不 要 求 包含 错误 名 或 错误 消 明 。 


escapel() 

已 莽 用 
编码 一 个 字符 串 
概要 


escape(s) 


待 “ 转 义 ”或 编码 的 字符 串 。 


返回 

s 的 一 个 编码 后 的 副本 ， 其 中 某 些 字符 已 奉 换 为 十 六 进 制 转 义 序列 。 
搞 述 

escape0 征 一 个 全 局 函数 。 它 返回 一 个 包含 s 的 一 个 已 编码 版 本 的 者 字符 
串 。 字 符 串 s 本 吴 并 未 修改 。 


在 escape0 返 回 的 字符 串 中 ，s 中 非 ASCII 宇 母 、 数 字 以 及 标点 字符 @、 
*、、+、-、. 和 /的 所 有 字符 都 已 替换 为 9xx 或 96u xxxx (其 中 x 为 一 个 
上 六 进 制 数字 ) 格式 的 转 义 序列 。\u0000~Au00ff 的 Unicode 字 符 替 换 

为 %xXX 转 义 序 列 ， 其 他 Unicode 字 符 则 将 蔡 换 为 %u xxxx 序 列 。 

可 使 用 unescapeO 函 数 来 解码 由 escape0 编 码 的 字符 串 。 

虽然 escape() 范 数 在 第 1 版 ECMAScript 中 成 为 标准 ， 但 在 第 3 版 
ECMAScript 中 弃 用 并 移 除 它 。ECMAScript 的 各 种 实现 大 多 还 支持 这 个 
方法 ， 但 这 并 不 是 必需 的 。 建 议 使 用 encodeURI() 和 
encodeURIComponentO 来 代替 escape(O) 。 


示例 


escape("Hello Wor1dl");V// 返 回 "HeL1o%20wWor1d%21" 


参阅 

encodeURI() 、encodeURIComponent() 
eval() 

执行 一 段子 符 串 中 的 JavaScript 代 码 
概要 


eval(code) 


code 

包含 竺 求 值 的 JavaScript 表 达 式 或 竺 执行 的 JavaScript 语 句 的 字符 串 。 
返回 

求 值 后 的 代码 的 值 ， 如 采 存 在 对 应 的 值 的 话 。 

异常 


如 果 code 不 是 合法 的 JavaScript 代 码 ， 则 eval() 将 抛 出 一 个 SyntaxError 。 
如 果 在 对 code 求 值 的 过 程 中 发 生 了 错误 ， 则 eval() 将 传播 这 个 错误 。 


摘 述 


eval0 是 一 个 用 于 执行 一 段 JavaScript 代 码 字 符 串 的 全 局 方法 。 如 果 code 
包含 一 个 表达 式 ， 则 eval() 将 对 该 表达 式 求 值 并 返回 这 个 值 。 (一 些 表 
达 式 (如 看 起 来 像 语句 的 对 象 和 函数 直接 量 ) 在 传 入 eval0 时 必须 包含 
在 圆 括号 中 以 消除 多 义 性 。) 如 果 code 包 含 一 条 或 多 条 JavaScript 语 
句 ， 则 eval0 将 执行 这 些 语句 ， 并 由 最 后 一 个 语句 返回 对 应 值 。 如 果 
code 不 返回 任何 值 ， 则 eval0) 将 返回 undefined。 最 后 ， 如 果 code 抛 出 异 
常 ， 则 eval0) 将 把 这 个 异常 传递 给 调用 函数 。 


在 ECMAScript 3 和 ECMAScript 5 中 ，eval0 的 行为 不 同 ， 甚 至 在 
ECMAScript 5 中 ， 在 严格 和 非 严 格 模式 下 它 的 行为 也 不 相同 ， 为 了 解 
释 这 些 差 异 ， 需 要 一 个 小 的 额外 话题 。 如 果 一 门 编程 语言 将 eval0) 定 义 
为 一 个 操作 符 而 不 是 一 个 函数 ， 那 么 实现 高 效 的 解释 器 会 容易 很 多 。 
JavaScript 的 eval0 是 一 个 函数 ， 出 于 殖 率 的 考虑 ， 它 在 直接 、 类 似 操作 
符 一 样 调用 和 非 直接 调用 eval0 之 间 做 了 区 分 。 直 接 调 用 是 指 直 接 使 用 
标识 符 eval0)， 如 果 去 抒 圆 括号 ， 看 起 来 eval0 就 像 一 个 操作 符 。 其 他 形 
式 的 eval0 的 调用 都 是 非 直接 调用 。 如 果 将 eval0 国 数 赋值 给 一 个 名 字 不 
同 的 变量 ， 并 通过 该 变量 调用 它 ， 这 也 是 一 种 非 直接 调用 。 类 似 地 ， 
人 它 也 是 一 种 非 直接 调 


根据 直接 和 非 直 接 调 用 的 差别 ， 可 以 将 eval0 的 行为 归纳 如 下 : 


直接 调用 ，ES3 及 ES5 非 严格 模式 


eval(0 在 当前 词法 作用 域内 对 code 求 值 。 如 果 code 包 含 变量 或 函数 声 
明 ， 则 将 在 本 地 作用 域 中 定义 它们 。 这 是 eval0 的 普通 用 例 。 


非 直接 调用 ，ES3 


ECMAScript 3 标准 化 允许 解释 右 对 任何 eval0 的 非 直接 调用 抛 出 一 个 
EvalError。ES3 的 实现 实际 上 一 般 没 有 这 么 做 ， 但 应 该 避免 非 直接 调 
用 o 


非 直接 调用 ，ES5 


ECMAScript 5 中 ， 对 eval0 的 非 直接 调用 不 再 抛 出 EvalError， 但 code 必 
须 在 全 局 作用 域 中 求 值 ， 当 前 词法 作用 域内 的 任何 本 地 变量 都 将 名 

略 。 在 ES5 中 ， 可 以 这 样 赋值 : "var geval=eval:"， 然 后 使 用 geval() 来 在 
全 局 作用 域 中 对 code 求 值 。 


直接 或 非 直 接 调 用 ， 产 格 模 式 


在 严格 模式 中 ，c ode 中 定义 的 变量 和 函数 将 在 一 个 私有 作用 域 中 定 
义 ， 这 个 私有 作用 域 仅 在 调用 该 eval0 期 间 有 效 。 这 意味 着 ， 在 严格 模 
式 下 直接 调用 eval0 将 不 能 改变 词法 作用 域 ， 在 严格 模式 下 的 非 直接 调 
用 不 能 更 改 全 局 作用 域 。 当 对 eval0 的 调用 在 严格 模式 下 ， 或 者 如 果 
code 以 "use strict" 指 令 开 始 时 ， 这 些 规则 将 生效 。 


在 JavaScript 文 门 语言 中 eval0 提 供 了 非常 强大 的 功能 ， 但 实际 项 目 中 它 
使 用 的 不 多 。 利用 的 场景 包括 编写 作为 递归 的 JavaScript 解 释 需 的 程 
序 ， 以 及 编写 动态 生成 并 判断 JavaScript 代 码 的 程序 。 


对 于 大 多 数 期 望 参数 传 入 字符 串 参 数 的 画 数 来 讲 ， 在 执行 真正 的 逻辑 
时 ， 不 管 传 入 的 参数 是 什么 类 型 都 会 站 先 转换 为 子 符 串 。eval() 则 不 会 
这 样 ， 如 琳 传 入 的 参数 不 古 字 符 串 原始 值 ， 它 会 直接 返回 这 个 值 。 
此 ， 当 传 入 一 个 字符 串 对 象 给 eval0 时 就 需要 非常 小 心 了 ， 这 时 应 当 传 
入 一 个 字符 串 原 始 值 才 对 。 


示例 


eval("1+2" ) ; // 返 回 3 


// 这 段 代码 使 用 客户 端 JavaScript 方 法 来 提示 用 户 输 入 一 个 表达 式 ， 


// 然 后 向 用 户 显示 它 的 求 值 结 果 


// 更 多 细节 可 参阅 客户 端 方法 Window.alert() 和 window.prompt() 


try{ 


alert(" 结 果 : "+eval(prompt ("请 输入 一 个 表达 式 : ",，""))); 


catch(exception)t 


alert(exception); 


EvalError 

当 eval0 使 用 错误 时 抛 出 
对 象 一 错误 一 EvalError 

构造 画 数 

new EvalError() 

new EvalError(message) 

数 


message 


Sh 


一 条 可 选 的 错误 消息 ， 提 供 了 关于 该 异常 的 细 广 。 如 果 指 是 ， 这 个 


数 将 用 做 这 个 EvalError 对 象 的 message 属 性 的 值 。 


Gn 
从 


返回 

一 个 新 构造 的 EvalError 对 象 。 如 果 指 定 message 人 参数 ， 则 Error 对 象 将 把 
它 用 做 其 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 预定 义 的 默认 字 
符 串 作为 该 属性 的 值 。 当 不 市 new 操 作 符 ， 像 一 个 函数 一 样 调用 
EvalError0 构 造 函 数 时 ， 它 的 行为 和 囊 new 操 作 符 调用 时 一 样 。 

属性 


message 


一 条 提供 该 民间 的 细 世 的 错误 消息 。 这 个 属性 的 值 为 传 入 构造 函数 的 
字符 串 或 者 目 定义 实现 的 默认 字符 串 。 更 多 细节 可 参阅 Errormessage 。 


name 


一 个 指定 该 异常 类 型 的 字符 串 。 所 有 EvalError 对 和 象 的 这 个 属性 都 继承 
目 值 "EvalError" 。 


描述 

当 全 局 函数 eval(0 以 任意 其 他 名 字 调 用 时 ， 可 能 会 抛 出 EvalError 类 的 一 
个 实例 。 关 于 如 何 调用 这 个 函数 的 限制 ， 可 参阅 eval0。 关 于 异常 的 抛 
出 和 捕获 的 细节 ， 可 参阅 Error 。 


参阅 


Error 、 Error.message 、 Error.name 
Function 

JavaScript 芳 数 

对 象 一 函数 

概要 


function functionname(argument_name_1ist)// 函 数 定义 语句 


body 


function(argument_name_1ist){fbody}y// 匿 名 函数 直接 


functionname(argument_value_1list )// 玉 数 调用 


new Function(argument_names...,body) 


任意 多 个 字符 串 参 数 ， 每 个 字符 串 命 名 要 创建 的 Function 对 象 的 一 个 或 
多 个 参半 
多 修 参 你 。 


body 

指定 函数 体 的 字符 串 。 它 可 以 含有 任意 多 条 JavaScript 语 句 ， 这 些 语句 
之 间 用 分 号 隔 开 ， 并 且 可 以 引用 任意 参数 名 ， 这 些 参数 名 由 前 面 提 到 
的 传 给 构造 琅 数 的 参数 指定 。 

返回 


新 创建 的 Function 对 象 。 调 用 该 函数 会 执行 由 body 指 定 的 JavaScript 代 
码 。 


已 A 
天 吊 


SyntaxError 


表示 在 body 人 参数 或 某 个 argument_names 人 参数 中 存在 JavaScript 语 法 错 
Ne| 
天 5 


属性 

arguments[ | 

传递 给 函数 的 参数 数组 。 不 推荐 使 用 。 
caller 


调用 该 函数 的 Function 对 象 的 3 引用。 如果 是 全 局 调用 ， 则 该 属性 为 
null。 不 推荐 使 用 。 


length 
声明 函数 时 指定 的 形 参 个 数 。 
prototype 


一 个 给 构造 画 数 用 的 对 象 。 用 构造 画 数 创建 的 所 有 对 象 会 共享 prototype 
对 象 定义 的 属性 和 方法 。 


方法 
apply0O 
将 函数 作为 指定 对 象 的 方法 来 调用 。 传 递 给 它 的 是 指定 的 参数 数组 。 
bind() 


0 函数 。 通 过 可 选 的 指定 参数 ， 作 为 指定 对 象 的 方法 调用 该 
| 


call() 
将 函数 作为 指定 对 象 的 方法 来 调用 。 传 递 给 它 的 是 指定 的 参数 。 


toString() 


返回 函数 的 字符 串 表 示 。 


函数 是 JavaScript 的 一 种 基本 数据 类 型 。 第 8 半 解 释 了 如 何 定义 和 使 用 范 
数 。 第 9 章 介 绍 了 方法 、 构 造 函 数 以 及 函数 的 prototype 属 性 等 相关 主 
题 。 要 了 解 详细 情况 ， 请 阅读 这 两 草 。 注 意 ， 虽然 可 以 使 用 这 里 介绍 
的 Function() 构 造 函 数 来 创建 函数 对 象 ， 但 这 样 做 效率 不 高 。 在 大 部 分 
情况 下 ， 推 荐 使 用 函数 定义 语句 或 钞 数 直 接 量 来 定义 国 数 。 


在 JavaScript 1.1 及 后 续 版 本 中 ， 函 数 体会 目 动 定义 一 个 局 部 变量 
arguments， 指 代 Arguments 对 象 。 该 对 象 是 一 个 值 数组 ， 元 素 是 传递 给 
函数 的 参数 值 。 不 要 将 这 一 属性 与 上 面 介绍 的 弃 用 的 arguments[] 属 性 相 
混 清 。 详 见 Arguments 的 参考 页 。 


参阅 

Arguments、 第 8 章 、 第 9 章 
Function.apply() 

将 函数 作为 一 个 对 象 的 方法 调用 
概要 


function.apply(thisobj,args) 


thisob}j 


调用 function 的 对 象 。 在 函数 体 中 ，thisobj 是 关键 字 this 的 值 。 如 果 这 个 
参数 为 null， 则 使 用 全 局 对 象 。 


args 
一 个 值 数 组 。 它 的 元 素 是 传递 给 function 的 参数 值 。 
退回 


调用 函数 function 的 返回 值 。 
异 季 
TypeError 


如 宁 调 用 该 函数 的 对 象 不 是 函数 ， 或 者 参数 args 不 是 数组 和 Arguments 
对 象 ， 则 抛 出 该 异常 。 


摘 述 


apply0 将 指定 的 函数 function 作 为 对 象 thisobj 的 方法 来 调用 ， 并 传 入 在 
args 数 组 中 包含 的 参数 。 它 返回 的 是 调用 function 的 返回 值 。 在 函数 体 
内 ， 关 键 字 this 指 代 thisobj 对 象 。args 人 参数 必须 是 数组 或 Arguments 对 
象 。 如 果 想 单独 指定 传递 给 函数 的 参数 ， 而 不 是 通过 数组 元 素来 指定 
参数 ， 可 以 使 用 Function.call(0) 方 法 。 


示例 


// 将 默认 的 0bject ,toString() 应 用 在 一 个 对 象 上 ， 


// 以 便 覆 盖 该 对 象 上 的 toString( ) 方 法 。 注 意 没 传 参数 


0bject .prototype.tostring.apply(0);// 用 apply( ) 调 用 Math .max( ) 方 法 来 查找 数组 中 的 最 大 元 素 


// 注 意 在 这 种 情况 下 ， 第 一 个 参数 无 所 请 


var data=[1,2,3,4,5,6,7,8]; 


Max.max.apply(null, data); 
参阅 
Function.call() 


Function.arguments|] 


已 弃 用 

传递 给 男 数 的 参数 

概要 

function.arguments[i] 

function.arguments.length 

搞 述 

Function 对 象 的 arguments 属 性 是 一 个 参数 数组 ， 它 的 元 妈 是 传递 给 函数 
它 只 在 函数 执行 时 才 定 义 。arugments.length 表 示 数 组 中 的 元 


不 推荐 使 用 该 属性 ， 锡 成 使 用 Arguments 对 象 。 在 新 的 JavaScript 代 码 
中 ， 永 远 不 要 使 用 它 。 


参阅 

Arguments 

Function.bind() 

ECMAScript 5 

返回 一 个 作为 方法 调用 的 函数 
概要 

function.bind(o) 


function.bind(o,args.…) 


要 绑 定 到 函数 上 的 对 象 。 


args... 
要 绑 定 到 函数 上 的 零 个 或 多 个 参数 值 。 

返回 

一 个 新 函数 。 该 函数 会 当做 o 的 方法 来 调用 ， 并 向 它 传 入 args 参 数 。 
搬 述 

bind() 方 法 返回 一 个 新 函数 ， 该 函数 会 当做 对 象 o 的 方法 来 调用 。 传 递 
给 该 男 效 的 参数 由 两 部 分 组 成 ， 一 部 分 征 传递 给 bind0 的 args 数 组 指定 
的 参数 ， 剩 下 的 是 传 给 这 个 新 函数 的 所 有 值 。 

示例 

假设 { 是 一 个 函数 ， 我 们 像 下面 这 样 调用 bind() 方 法 : 


var g=f.bind(o,1,2); 


这 样 ，g 束 一 个 新 函数 了 。 调 用 g(3) 等 价 于 : 


f.,call(o,1,2,3); 


参阅 
Function.applyO0、EFunction.callO0、8.7.4 节 
Function.call() 

将 函数 作为 对 象 的 方法 调用 

概要 


function.call(thisobj,args...) 


Sh 


数 
thisob}j 


调用 function 的 对 象 。 在 函数 体 中 ，thisobj 是 关键 字 this 的 值 。 如 果 这 个 
参数 为 null， 则 使 用 全 局 对 象 。 


args... 
任意 多 个 参数 ， 它 们 会 作为 参数 传递 给 function 。 

返回 

调用 函数 function 的 返回 值 。 

异常 

TypeError 

如 果 调 用 该 函数 的 对 象 不 是 函数 ， 则 抛 出 该 异常 。 

描述 

call() 将 指定 的 函数 function 作 为 对 象 thisobj 的 方法 来 调用 ， 并 传 入 参数 
列表 中 thisobj 之 后 的 参数 。 返 回 的 是 调用 function 的 返回 值 。 在 函数 体 
内 ， 关 键 字 this 指 代 thisobj 对 象 ， 如 果 thisobj 为 null， 则 使 用 全 局 对 象 。 
如 果 想 用 数组 来 指定 传递 给 函数 的 参数 ， 请 使 用 Function.apply0 方 法 。 
示例 


// 将 默认 的 0bject .toString( ) 应 用 在 一 个 对 象 上 


// 以 便 覆 盖 该 对 象 上 的 tostring( ) 方 法 。 注 意 没 传 参数 


Object.prototype.tostring().call(o); 


参阅 


Function.apply() 
Function.caller() 

已 弃 用 ; 在 严格 模式 下 未 定义 
调用 当前 函数 的 函数 

概要 

function.caller 

搬 述 


在 JavaScript 的 早期 版 本 中 ，Function 对 和 象 的 caller 属 性 是 对 调用 当前 函 
数 的 函数 的 引用 。 


如 果 函 数 是 在 JavaScript 程 序 的 全 局 作用 域 中 调用 的 ， 则 caller 的 值 为 
null 。 i 。 ( 即 ， 只 有 在 执行 钞 数 时 ， 才 定义 
caller 必 性 。 


Function.caller 属 性 不 属于 ECMAScript 标 准 ， 在 遵守 该 标准 的 实现 中 ， 
该 属性 不 是 必需 的 。 不 应 该 再 使 用 它 。 


Function.length() 

声明 的 参数 的 个 数 

概要 

function.length 

搬 述 

函数 的 length 属 性 指定 定义 函数 时 所 声明 的 形 参 的 个 数 。 实 际 调用 函数 
时 ， 传 入 的 参数 个 数 可 以 比 函 数 的 langth 属 性 多 ， 也 可 以 比 它 少 。 不 要 


将 Function 对 象 和 和 Arguments 对 象 的 length 属 性 混淆 ， 后 者 指定 的 是 实际 
传递 给 函数 的 参数 个 数 。 示 例 请 阅读 Arguments.length 参 考 页 。 


参阅 

Arguments.length 

Function.prototypel() 

对 和 象 类 的 原型 

概要 

function.prototype 

搬 述 

prototype 属 性 会 在 函数 作为 构造 画 数 时 使 用 。 它 指 代 作为 整个 对 象 类 的 
原型 对 象 。 用 构造 函数 创建 的 任何 对 象 都 会 继承 prototype 对 象 引 用 的 对 
象 的 所 有 属性 。 


构造 画 数 、prototype 属 性 和 Javascript 中 的 类 定义 ， 请 阅读 第 9 章 中 的 完 
整 讨论 。 


参阅 

第 9 对 
Function.toString() 
将 函数 转换 成 字符 串 
概要 


function.toString() 


返回 


TypeError 

如 果 调 用 该 函数 的 对 象 不 是 函数 ， 则 抛 出 该 异常 

描述 

Function 对 象 的 toString() 方 法 能 将 函数 转换 为 字符 串 ， 但 其 功能 与 具体 
实现 相关 。 在 大 部 分 实现 中 ， 比 如 Firefox 和 正中 的 实现 ， 该 方法 返回 
的 字符 串 是 有 效 的 JavaScript 代 码 一 包含 关键 字 function、 参 数列 表 和 
函数 体 的 完整 代码 等 。 在 这 些 实现 中 ，toString() 方 法 的 输出 是 全 局 
eval(0 函 数 的 有 效 输入 。 然 而 ， 该 规范 并 不 需要 这 一 行为 ， 因 此 要 避免 
依赖 该 方法 。 

Global 

全 局 对 象 

对 象 ~ 全 局 

概要 

this 

全 局 属性 

全 局 对 象 不 是 一 个 类 ， 所 以 下 面 列 举 的 全 局 属性 在 自己 名 称 下 有 独立 
的 参考 页 。 也 职 是 说 ， 在 "undefined" 名 称 下 可 以 找到 undefined 属 性 的 详 


细 人 信息， 而 不 是 在 "Global.undefined" 下 寻找 。 注 意 ， 所 有 全 局 变量 也 都 
是 全 局 对 象 的 属性 : 


Infinity 

表示 正 无 穷 大 的 数值 。 
NaN 
表示 不 是 数值 的 值 。 


undefined 


undefind 值 。 

全 局 函数 

全 局 对 象 是 一 个 对 象 ， 不 是 类 。 下 面 列举 的 全 局 函数 不 是 任何 对 象 的 
方法 ， 它 们 的 参考 页 出 现在 各 自 的 函数 名 下 。 例 如 ， 在 "parseInt0" 下 可 
以 找到 parseIntO 函 数 的 详细 信息 ， 而 不 是 到 "GlobalparseInt(" 下 查找 : 
decodeURIO 

解码 使 用 encodeURIO 转 义 的 字符 串 。 

decodeURIComponent() 

解码 使 用 encodeURIComponent() 转 义 的 字符 串 。 

encodeURIO 


通过 转 义 特定 字符 对 URI 编 码 。 


encodeURIComponent() 
通过 转 义 特定 字符 对 URI 的 组 成 部 分 编码 。 


escape() 

用 转 义 序列 替换 特定 字符 来 对 字符 串 编 码 。 
eval() 

执行 JavaScript 代 码 字符 串 ， 返 回 结果 。 
isFinite() 

判断 一 个 值 是 否 无 穷 大 。 

isNaN() 


判断 一 个 值 是 否 是 非 数 值 。 


parseFloat() 
从 字符 串 中 解析 数值 。 

parseInt() 

从 字符 串 中 解析 整数 。 
unescape() 

解码 使 用 escape0 编 码 的 字符 串 。 
全 局 对 象 


除了 上 面 列举 的 全 局 属性 和 全 局 图 数 ， 全 局 对 象 还 定义 一 些 属性 ， 用 
人 其 他 对 象 。 这 些 属性 大 部 分 都 是 构造 画 


Array 
Array() 构 造 画 数 。 
Boolean 
Boolean() 构 造 玉 数 。 
Date 

Date() 构 造 琅 数 。 
Error 
Error() 构 造 画 数 。 
EvalError 
EvalError() 构 造 琴 数 。 


Function 


Function0 构 造 范 数 。 

JSON 

引用 一 个 对 象 ， 该 对 象 定 义 了 解析 和 序列 化 JSON 的 函数 。 
Math 

引用 一 个 对 象 ， 该 对 象 定 义 了 数学 函数 。 
Number 

Number0 构 造 函 数 。 

Object 

Object0 构 造 钞 数 。 

RangeError 

RangeError() 构 造 玉 数 。 

ReferenceError 

ReferenceError() 构 造 玉 数 。 

RegExp 

RegExp(O 构 造 范 数 。 

String 

String0 构 造 函 效 。 

SyntaxError 

SyntaxError() 构 造 印 数 。 


TypeError 


TypeError() 构 造 印 数 。 
URIError 
URIError(0 构 造 函 数 。 
搞 述 


全 局 对 象 是 一 个 预定 义 对 象 ， 用 做 JavaScript 中 全 局 属性 和 全 局 函数 的 
占 位 符 。 通 过 全 局 对 象 ， 可 以 访问 所 有 其 他 预定 义 的 对 象 、 函 数 和 属 
性 。 全 局 对 象 不 是 任何 对 象 的 属性 ， 因 此 它 没有 名 字 (之 所 以 选择 
Global 作为 该 参考 页 的 标题 ， 只 是 为 了 方便 组 织 ， 并 不 是 说 全 局 对 象 的 
名 字 为 Global) 。 在 全 局 JavaScript 代 码 中 ， 可 以 用 关键 字 this 来 引用 全 
局 对 象 。 但 通常 不 必用 这 种 方式 来 引用 全 局 对 象 ， 因 为 全 局 对 象 是 作 
用 域 链 的 头 ， 这 意味 着 所 有 不 合格 的 变量 和 函数 名 都 会 作为 全局 对 象 
的 属性 来 查询 。 例 如 ， 当 JavaScript 代 码 引 用 parseInt(0) 函 数 时 ， 它 引用 
的 就 是 全 局 对 象 的 parseInt 属 性 。 全 局 对 象 是 作用 域 链 的 头 ， 还 意味 着 
在 全 局 JavaScript 代 码 中 声明 的 所 有 变量 都 将 成 为 全 局 对 象 的 属性 。 


全 局 对 象 只 古 一 个 对 象 ， 而 不 是 类 。 不 存在 Global0) 构 造 画 数 ， 也 就 无 
法 实例 化 一 个 新 的 全 局 对 象 。 


当 JavaScript 代 码 艇 入 一 个 特定 环境 时 ， 全 局 对 象 通用 具有 与 该 特定 环 
境 相关 的 额外 属性 。 实 际 上 ，ECMAScript 标 准 没 有 规定 全 局 对 象 的 类 
型 ，JavaScript 的 实现 或 艇 入 环境 可 以 使 用 任意 类 型 的 对 象 来 作为 全 局 
对 象 ， 只 要 该 对 象 定义 了 这 里 列举 的 基本 属性 和 方法 。 


例如 ， 在 客户 端 JavaScript 中 ， 全 局 对 象 是 Window 对 象 ， 表 示 运 行 
JavaScript 代 码 的 Web 浏 览 器 窗口 。 


示例 


在 核心 JavaScript 中 ， 全 局 对 象 的 预定 义 属 性 都 是 不 可 枚 举 的 ， 因 此 可 
以 用 for/in 循 环 来 列 出 所 有 隐 式 或 显 式 声明 的 全 局 变量 ， 代 码 如 下 : 


Var variables="",; 


for(var name in this){ 


variables+=name+"\n",; 


} 


参阅 

第 四 部 分 的 Window; 第 3 章 

Infinity 

表示 无 穷 大 的 数值 属性 

概要 

Infinity 

描述 

Infinity 是 一 个 全 局 属性 ， 用 来 存放 表示 正 无 穷 大 的 特殊 数值 。 用 for/in 
循环 不 可 枚 举 Infinity 属 性 ， 用 delete 操 作 符 也 无 法 删除 它 。 注 意 ， 


Infinity 不 是 常量 ， 它 可 以 设置 为 任意 值 ， 有 时 你 得 特别 留意 这 一 点 。 
(然而 Number POSITIVE INEFINITY 是 常量 。) 


参阅 

isFinite() ~、 NaN ~、 Number.POSITIVE_INFINITY 
isFinite() 

判断 数值 是 否 有 限 

概要 


isFinite(n) 


要 检测 的 数组 。 
返回 


如 果 n 是 有 限 数 (或 者 可 以 转换 成 有 限 数 ) ， 那 么 返回 true。 如 果 n 是 
NaN ( 非 数 值 ) 或 是 正 / 负 无 穷 大 ， 则 返回 false。 


参阅 


Infinity ~ isNaN() 、 NaN ~、 Number.NaN 、 
Number.NEGTIVE_INFINITY ~ Number.POSITIVE_INFINITY 


isNaN() 
分 查 是 否 非 数值 
概要 


isNaN(x) 


要 检测 的 值 。 

返回 

如 果 x 不 是 数值 ， 或 者 是 NaN 这 个 特殊 数值 时 ， 返 回 true。 如 果 x 征 其 他 
任何 数值 ， 则 返回 false 。 

描述 


"NaN" 是 "notra-number" (不 是 数值 ) 的 缩写 。 全 局 变量 NaN 保 存 的 是 一 
个 特殊 数值 〈 即 NaN) ， 代 表 无 效 数 值 〈 比 如 0/0) 。isNaNO 检 测 其 参 
数 是 否 不 是 数值 。 如 宁 x 是 数值 ， 或 者 可 以 转换 为 数值 ， 但 不 是 NaN， 
和 或 者 不 可 转换 为 数值 ， 或 者 等 于 NaN， 
则 返回 true。 


NaN 有 一 个 独特 的 特性 : 它 不 等 于 任何 值 ， 也 不 等 于 目 己 。 因 此 ， 如 
果 想 专门 测试 一 个 值 是 不 是 NaN (不 是 普通 意义 上 的 非 数 值 ) ， 不 要 
使 用 x===NaN: 这 会 永远 为 false。 而 应 该 使 用 x!==x: 只 有 当 x 是 NaN 
上 时， 该 表达 式 才 为 true 。 


使 用 isNaN0O 的 常见 场景 是 用 来 检测 parseFloat() 和 parseInt() 的 结果 ， 以 
判断 它们 是 否 为 有 效 数 值 。 


示例 


isNaN(0);//=>false 
isNaN(0/0);//=>true 
isNaN(parseInt("3"));//=>false 
isNaN(parseInt("hello"));//=>true 
isNaN("3");//=>false 
isNaN("hello");//=>true 
isNaN(true);//=>false 


isNaN(undefined);//=>true 


参阅 

isFinite() ~、 NaN ~、 Number.NaN 、 parseFloat() ~、 parselInt() 
JSON 

ECMAScript 5 

JSON 解 析 与 字符 串 化 


摘 述 


JSON 是 一 个 简单 对 象 ， 用 做 ECMAScript 5 中 全 局 函数 JSON.parseO) 与 
JSON.stringify() 的 命名 空间 。JSON 不 是 构造 函数 。 在 ECMAScript 5 之 
前 ，JSON 解 析 与 序列 化 函数 的 兼容 版 本 可 以 从 这 里 下 载 ; 
http://json.org/json2.js ° 


"JSON" 表 示 JavaScript Object Notation (JavaScript 对 象 标 记 ) 。JSON 是 
一 种 数据 序列 化 格式 ， 基 于 JavaScript 的 直接 量 ， 可 以 表示 null 值 、 布 尔 
值 true 和 false、 浮 点 数 (使 用 JavaScript 数 值 直 接 量 ) 、 字 符 串 (使 用 
JavaScript 字 符 串 直接 量 ) 、 数 组 值 (使 用 JavaScript 数 组 直接 量 语法 ) 
以 及 字符 串 到 值 的 映射 〈 使 用 JavaScript 对 象 直接 量 语法 ) 。JSON 里 不 
能 表示 原始 值 undefined、 数 值 NaN 和 Infinity。JavaScript 函 数 、 日 期 、 
正则 表达 式 和 异常 错误 在 JSON 中 也 不 支持 。 


示例 


// 深 拷贝 可 被 JSON 序 列 化 的 对 象 或 数组 


function deepcopy(o){return JSON.parse(JSON.stringify(o));} 


参阅 

JSON.parse() ~ JSON.stringify() 、 6.977 、 http://json.org 
JSON.parsel() 

ECMAScript 5 

解析 JSON 格 式 的 字符 串 

概要 

JSON.parse(S) 


JSON.parse(S,reviver) 
数 


Sh 


s 
要 解析 的 字符 串 

reviver 

用 来 转换 解析 值 的 可 选 画 数 。 

返回 

一 个 对 象 、 数 组 或 原始 值 。 该 返回 值 从 是 s 中 解析 的 (有 可 能 还 被 


reviver 修 改过 ) 。 
摘 述 


JSON.parse0) 是 一 个 全 局 钞 数 ， 用 来 解析 JSON 格 式 的 字符 串 。 通 第 ， 会 
传 入 一 个 字符 串 参 数 ，JSON.parse0 则 返回 该 字符 串 参 数 表 示 的 
JavaScript 值 。 


可 以 使 用 可 选 参数 reviver， 在 返回 解析 值 前 ， 对 其 进行 过 滤 或 后 期 处 
理 。 如 果 指 定 了 reviver 函 数 ， 该 男 数 会 为 从 s 中 解析 的 每 一 个 原始 值 
(不 是 包含 这 些 原 始 值 的 对 象 或 数组 ) 调用 一 次 。 调 用 reviver 时 带 有 两 
个 参数 。 第 一 个 参数 是 属性 名 对 象 的 属性 名 或 转换 成 字符 串 的 数 
组 序号 。 第 二 个 参数 是 对 象 属性 或 数组 元 素 的 原始 值 。reviver 会 作为 包 
含 原始 值 的 对 象 或 数组 的 方法 来 调用 。 在 特殊 情况 下 ， 如 采 字 符 串 s 表 
示 的 是 原始 值 而 不 是 更 常见 的 对 象 或 数组 时 ， 那 么 该 原始 值 会 存放 在 
一 个 新 创建 对 象 的 属性 中 ， 属 性 名 是 空 字符 串 。 在 这 种 情况 下 ，reviver 
会 在 这 个 新 创建 的 对 象 上 调用 一 次 ， 第 一 个 参数 是 空 字符 串 ， 第 二 个 
参数 则 是 该 原始 值 。 
reviver 国 数 的 返回 值 会 成 为 属性 的 新 值 。 如 果 reviver 返 回 第 二 个 参数 ， 
而 该 属性 保持 不 变 。 如 果 reviver 返 回 undefined (或 根本 没有 返回 任何 
值 ) ， 则 会 从 对 象 或 数组 中 删除 该 属性 ， 处 理 完 后 才 会 由 JSON.parse0) 
返回 给 用 户 。 
示例 


JSON.parse() 的 大 部 分 使 用 场景 都 很 寻常 : 


var data=JSON.parse(text ) ， 


JSON.stringify() 芳 数 会 把 Date 对 象 转换 成 字符 串 ， 可 以 使 用 reviver 芳 数 
再 反 辣 转换 回来 。 下 面 这 个 例子 还 过 滤 属 性 名 ， 并 通过 返回 undefined 
来 从 结果 对 象 中 移 除 某 些 特定 属性 : 


var data JSON.parse(text,function(name,value){// 移 除 掉 所 有 属性 名 以 下 划 线 开头 的 属性 


if(name[0]=='_')return undefined;// 如 果 value 是 1S0-8601 日 期 格式 的 字符 串 ， 则 把 它 转 换 为 Date 


if(typeof value==="string"&& 


/r\d\d\d\d-\d\d-\d\dT\d\d:\d\d:\d\d.\d\d\dZz$/.test(value)) 


return new Date(value);// 否 则 的 话 ， 就 原样 返 臣 


return value 


}); 


参阅 
JSON.stringify()、6.9 节 
JSON .stringify() 
序列 化 对 象 、 数 组 或 原始 值 
概要 

JSON .stringify(0) 
JSON.stringify(o,flter) 


JSON .stringify(o,flter,indent) 


Sh 
i 


0 
要 转换 成 JSON 字 符 串 的 对 象 、 数 组 或 原始 值 。 
filter 


可 以 是 一 个 可 选 画 数 ， 用 来 在 字符 串 化 前 对 值 做 一 些 奉 换 。 也 可 以 是 
一 个 数组 ， 包 含 那 些 需 要 字符 串 化 的 属性 名 。 


indent 


可 选 参数 。 需 要 输出 格式 化 的 可 阅读 代码 时 ， 使 用 indent 参 数 可 以 指定 
缩 进 字符 串 或 用 来 缩 进 的 空格 个 效 。 如 有 省 略 该 参数 ， 返 回 的 字符 串 
将 不 带 任 何 额外 的 空格 ， 这 是 给 编译 器 看 的 ， 很 难 直 接 阅 读 。 


返回 


JSON 格 去 的 字符 串 ， 代 表 o 的 值 ， 同 时 通过 了 filter 的 过 滤 ， 以 及 根据 
indent 进 行 了 格式 化 。 


摘 述 


JSON.stringify0 将 原始 值 、 对 象 或 数组 转换 成 一 个 JSON 格 式 的 字符 
串 ， 该 字符 串 随后 可 以 被 JSON.parse0) 解 析 。 通 常 ， 调 用 该 函数 时 只 带 
一 个 参数 ， 并 返回 相应 字符 串 。 


当 带 一 个 参数 调用 JSON.stringifyO 时 ， 且 该 参数 值 仅 包含 对 象 、 数 组 、 
字符 串 、 数 值 、 布 尔 值 和 null 值 时 ， 字 符 串 化 的 过 程 很 直接 明了 “。 然 
而 ， 当 需要 字符 串 化 的 值 包 含 类 的 实例 对 象 时 ， 字 符 串 化 的 过 程 就 比 
较 复 杂 了 。 当 JSON.stringify0 亿 到 带 有 名 为 toJSON() 的 方法 的 对 象 (或 
数组 ) 时 ， 它 会 调用 该 对 象 上 的 toJSON0O 方 法 ， 并 使 用 该 方法 的 返回 值 
而 不 是 该 对 象 本 身 来 进行 字符 串 化 。 调 用 toJSONO 时 会 传 入 一 个 字符 串 
参数 ， 该 参数 是 对 象 的 属性 名 或 数组 序号 。Date 类 定义 了 一 个 toJSON0O 
方法 ， 使 用 Date.toISOString0) 方 法 来 将 Date 转 换 成 字符 串 。JavaScript 的 
其 他 内 置 对 象 都 没有 定义 toJSON0O 方 法 ， 不 过 可 以 为 自己 的 类 定义 对 应 
方法 。 注 意 ， 昌 然 toJSON0 的 方法 名 有 将 对 象 转换 为 JSON 的 含义 ， 但 


实际 上 toJSON(U) 方 法 可 以 不 转换 调用 对 象 : 它 的 作用 仅仅 是 返回 一 个 
值 ， 用 来 在 字符 串 化 的 过 程 中 ， 堆 换 原始 对 象 。 


JSON.stringify() 的 第 二 个 参数 使 得 可 以 在 字符 串 化 的 过 程 中 添加 过 滤 操 
作 。 该 可 选 参数 可 以 是 函数 或 数组 ， 这 两 种 情况 提供 了 完全 不 同 的 过 
滤 功 能 。 如 果 该 参数 是 函数 ， 则 写 是 一 个 replacer 函 数 ， 与 上 面 描述 的 
toJSON(U0) 方 法 有 点 类 似 。 如 果 指 定 replacer 函 数 ， 该 函数 会 在 每 一 个 需 
要 字符 串 化 的 值 上 调用 。this 指 向 定义 该 值 的 对 象 或 数组 。replacer 函 数 
的 第 一 个 参数 是 该 对 象 中 的 对 象 属性 名 或 数组 序号 ， 第 二 个 参数 则 是 
值 本 身 。replacer 函 数 的 返回 值 会 替换 掉 需 要 字符 串 化 的 值 。 如 果 
replacer 函 数 返 回 undefined 或 没有 任何 返回 值 ， 则 会 在 字符 串 化 时 忽略 
该 值 (以 及 它 的 数组 元 素 或 对 象 属性 ) 。 


如 有 果 JSON.stringify() 的 第 二 个 参数 是 一 个 字符 串 数组 (或 数值 数组 一 一 
数值 会 转换 为 字符 串 ) ， 该 数组 会 作为 对 象 属性 名 。 属 性 名 不 在 该 数 
组 中 的 任何 对 象 属性 在 字符 串 化 时 都 会 名 略 掉 。 此 外 ， 返 回 的 字符 串 
中 属性 的 顺序 ， 会 与 该 数组 中 的 属性 名 顺序 一 致 。 


JSON.stringify0 返 回 的 通常 是 不 带 任 何 空 格 或 换行 符 的 给 机 器 阅读 的 字 
符 串 。 如 果 想 输出 可 读 性 更 好 的 字符 串 ， 需 要 指定 第 三 个 参数 。 如 果 
指定 的 第 三 个 参数 古 介 于 1~10 之 间 的 数值 ， 则 JSON .stringify0 会 在 每 
一 “层级 ”的 输出 插入 换行 符 和 指定 个 数 的 空格 。 如 果 指 定 的 是 非 空 字 
符 串 ， 则 JSON.stringify0 会 插入 换行 符 和 该 字符 串 (只 取 前 10 个 字符) 
来 缩 进 层 级 。 


示例 


// 基 本 序列 化 


var text=JSON,stringify(data);// 精 确 指定 要 序列 化 的 字段 


var text=JSON.stringify(address,["city","state", "country"]);// 指 定 replacer 函 数 ， 以 使 得 可 
序列 化 RegExp 对 象 


Var text=JSON.stringify(patterns,function(key,value)t{ 


if(value.constructor===RegExp)return value.toSstring(); 


return Value ， 


】) ;// 或 使 用 下 面 这 种 方式 来 实现 同样 的 奉 换 : 


RegExp.prototype.toJSON=function(){return this.tostring();} 


参阅 

JSON.parse() 、 6.9T 
Math 

数学 函数 和 香 量 
概要 

Math.constant 
Math.function() 

常量 

Math.E 

常量 e， 自 然 对 数 的 底数 。 
Math.LN10 

10 的 目 然 对 数 。 
Math.LN2 

2 的 目 然 对 数 。 
Math.LOG10E 

e 以 10 为 改 的 对 数 。 


Math.LOG2E 


e 以 2 为 确 的 对 数 。 
Math.PI 

常量 nt 。 
Math.SQRT1 2 

2 的 平方 根 的 倒数 。 
Math.SQRIT2 

2 的 平方 根 。 
Math.abs() 

计算 绝对 值 。 
Math.acos() 
计算 反 余弦 值 。 
Math.asin() 

计算 反正 弦 值 。 
Math.atan() 

计算 反正 切 值 。 
Math.atan2() 

计算 从 X 轴 到 指定 点 的 角度 。 
Math.ceil() 

对 一 个 数字 向 上 取 整 。 


Math.cos() 

计算 余弦 值 。 
Math.exp() 
计算 e 的 乘 方 。 
Math.floor() 

对 一 个 数字 向 下 取 整 。 
Math.log() 
计算 目 然 对 数 。 
Math.max() 

返回 两 个 数 中 较 大 的 那个 。 
Math.min() 
返回 两 个 数 中 较 小 的 那个 。 
Math.pow() 

计算 xy。 
Math.random() 
计算 一 个 随机 数 。 
Math.round() 

四 舍 五 入 。 
Math.sin() 

计算 正弦 值 。 


Math.sqrt() 
计算 平方 根 。 
Math.tan() 
计算 正切 值 。 
描述 


Math 是 一 个 对 象 ， 其 属性 为 在 二 有 用 的 函数 和 第 量 。 这 些 国 数 和 篆 量 
的 引用 语法 如 下 : 


y=Math. sin(x); 
area=radius*radius*Math.PI; 

和 Date、String 人 不同，Math 丰 是 对 象 的 类 。 没 有 Math() 构 造 画 数 ， 类 似 
于 Math.sin(0 这 样 的 函数 只 是 简单 的 函数 ， 而 不 是 对 某 个 对 象 进行 操作 
的 方法 

参阅 

Number 

Math.abs() 

计算 绝对 值 

概要 


Math.abs(x) 


任意 数值 。 
返回 

x 的 绝对 值 。 
Math.acos() 
计算 反 余弦 值 
概要 


Math.acos(X) 


-1.0 一 1.0 之 间 的 一 个 数字 。 

返回 

指定 值 x 的 反 余弦 值 。 返 回 值 将 介 于 0~n 弧 度 之 间 。 
Math.asin() 

计算 反正 弦 值 。 

概要 


Math.asin(x) 


-1.0~1.0 之 间 的 一 个 数字 。 


返回 


指定 值 x 的 反正 弦 值 。 返 回 值 将 介 于 -mw2~m2 弧 度 之 间 。 
Math.atan() 

计算 反正 切 值 

概要 


Math.atan(x) 


任意 数值 。 

返回 

指定 值 x 的 反正 切 值 。 返 回 值 将 介 于 -mW2~rV2 弧 度 之 间 。 
Math.atan2() 

计算 从 X 轴 到 指定 点 的 角度 

概要 

Math.atan2(y,x) 

数 


Sh 


y 
指定 点 的 了 坐标 。 
X 
指定 点 的 X 坐 标 。 


返回 值 


指定 点 (Xx,y) 之 间 沿 逆 时 针 方 向 的 夹 角 ， 值 介 于 -n~n 弧 度 
| 四。 


接 述 

Math.atan2() 函 数 计 算 y/x 的 反正 切 值 。 可 以 将 参数 y 看 做 一 个 点 的 Y 坐 
标 ， 将 参数 x 看 做 该 点 的 X 坐 标 。 注 意 本 函数 中 参数 的 顺序 : Y 坐 标 在 又 
坐标 前 面 。 

Math.ceil() 

对 一 个 数字 同上 取 整 

概要 


Math.ceil(x) 


任意 数值 或 表达 式 。 

返回 

大 于 或 等 于 x 的 最 接近 的 整数 。 

搬 述 

Math.ceil() 执 行 加 上 取 整 运 滤 ， 也 束 是 说 ， 它 返回 大 于 或 等 于 函数 参数 
的 最 接近 的 整数 。Math.ceil0 和 Math.round0 不 同 ， 前 者 总 是 向 上 取 整 ， 
后 者 则 是 向 上 或 向 下 取 整 到 最 接近 的 整数 。 也 要 注意 ，Math.ceil0 不 会 
将 负数 变 成 绝对 值 更 大 的 人 负数， 而 是 将 它们 癌 0 的 方 同 取 整 。 

例 


a=Math.ceil(1.99);// 结 果 为 2.0 


b=Math.ceil(1.01);// 结 果 为 2.0 


c=Math.ceil(1.0);// 结 果 为 1.0 


d=Math.ceil(-1.99);// 结 果 为 -1.0 


Math.cos() 
计算 余弦 值 
概要 


Math.cos(x) 


一 个 以 弧度 制度 量 的 角度 。 如 果 想 将 角度 制 转 为 弧度 制 ， 可 以 将 角度 
制 的 值 乘 以 0.017 453 293(2m/360)。 


返回 

指定 值 x 的 余弦 值 。 返 回 值 将 介 于 -1.0~~1.0 之 间 。 

Math.E 

数学 弟 数 e 

概要 

Math.E 

接 述 

Math.E 是 数学 稼 数 e， 目 然 对 数 的 瓜 数 ， 近 似 值 为 2.718 28。 


Math.exp() 


计算 ex 
概要 


Math.exp(X) 


用 做 指数 的 数值 或 表达 式 。 

返回 

ex ，e 的 x 次 方 ，e 为 自然 对 数 的 底数 ， 近 似 值 为 2.718 28。 
Math.floor() 

对 一 个 数字 向 下 取 整 

概要 


Math.floor(X) 


任意 数值 或 表达 式 。 
返回 
最 接近 并 且 小 于 或 等 于 x 的 整数 。 
描述 


Math floor0) 执 行 向 下 取 整 操作 ， 换 句 话 说 ， 它 返回 最 接近 并 且 小 于 或 
等 于 画 数 参数 的 整数 值 。 


Math.floor() 将 一 个 浮 点 数 辐 下 取 整 到 最 接近 的 整数 。 它 与 Math.round0) 
不 同 ， 后 者 会 同上 或 向 下 取 整 到 最 接近 的 整数 。 也 要 注意 Math.floor(0) 
和 (就 是 说 ， 数 字 将 更 小 ) 取 整 ， 而 不 是 向 上 (更 靠近 

0 O 


例 


a=Math.floor (1.99);// 结 果 为 1.0 


b=Math.floor (1.01);// 结 果 为 1.0 


c=Math .floor (1.0);// 结 果 为 1.0 


d=Math.floor(-1.01);// 结 果 为 -2.0 


Math.LN10 

数学 常数 log .10 〈 即 ln10) 
概要 

Math.LN10 

描述 


Math.LN10 即 log .10，10 的 目 然 对 数 。 这 个 常量 的 近似 值 为 2.302 585 
092 994 045 9011。 


Math.LN2 
数学 常量 log 。2 
概要 
Math.LN2 


摘 述 


Math.LN2 即 log .2，2 的 目 然 对 数 。 这 个 营 量 的 近似 值 为 0.693 147 180 
559 945 286 23 。 


Math.log0) 
计算 目 然 对 数 
概要 


Math.log(x) 


任何 大 于 0 的 数值 或 表达 式 。 

返回 

x 的 自然 对 数 。 

描述 

Mathlog0 计 算 log .x， 它 的 参数 的 自然 对 数 。 参 数 必须 大 于 0 。 
可 以 按 下 面 的 公式 计算 以 10 为 底 或 以 2 为 底 的 对 数 。 


logiox = logio€e 1ogex 


10E5X = ]0856 ”DBX 


这 两 个 公式 可 翻译 为 下 面 的 JavaScript 函 数 : 


function log1i0(x){return Math.LOG10E*Math.1log(x);} 


function log2(x){return Math.LOG2E*Math.1log(x);} 


Math.LOG10E 
数学 常量 log ve 
概要 
Math.LOG10E 
描述 


Math.LOG10E 是 log 10e 的 值 ， 即 常数 e 的 以 10 为 的 的 对 数 。 它 的 近似 值 
为 


0.434 294 481 903 251 816 67. 
Math.LOG2E 

数学 常量 log ,e 

概要 

Math.LOG2E 

摘 述 
Math.LOG2E 是 log ye 的 值 ， 即 常数 e 以 2 为 底 的 对 数 。 它 的 近似 值 为 
1.442 695 040 888 963 387。 
Math.max() 
返回 最 大 的 参数 

概要 


Math.max(args...) 


args... 
0 个 或 多 个 值 
返回 


参数 中 最 大 的 值 。 如 果 没 有 参数 则 返回 -Infinity 。 如 果 任 意 一 个 参数 是 
NaN 或 不 可 转换 为 数字 ， 则 返回 NaN 。 


Math.min() 
返回 最 小 的 参数 
概要 
Math.min(args...) 
参数 

args... 

任意 数量 的 参数 。 
返回 


给 定 参数 中 最 小 的 值 。 如 果 没 有 参数 则 返回 Infinity。 如 果 任 意 一 个 参 
数 古 NaN 或 不 可 转换 为 数 子 ， 则 返回 NaN 。 


Math.PI 
数学 弟 量 n 
概要 
Math.PI 


摘 述 


Math.PI 是 常量 fr， 圆周 长 与 直径 的 比 。 它 的 近似 值 为 3.141 592 653 589 
79 。 


Math.pow!() 
计算 xy 
概要 


Math.pow(X,y) 


乘 方 的 底数 。 

4 

乘 方 的 指数 。 

返回 

X 的 y 次 方 ，xy 。 

搞 述 

Math.pow() 计 算 x 的 y 次 方 。 可 以 同 Math.pow0 传 递 任何 值 。 不 过 ， 如 末 
结果 为 虚数 或 复数 ， 则 Math.pow0 将 返回 NaN。 实 践 中 ， 这 意味 着 如 果 
x 是 负数 ， 则 y 应 该 是 正 的 或 负 的 整数 。 同 样 ， 也 不 要 起 记过 大 的 指数 
很 容易 导致 浮 扣 洲 出 并 返回 一 个 Infinity 值 。 

Math.random() 

返回 一 个 仿 随 机 数 

概要 


Math.random() 


返回 

一 个 大 于 等 于 0.0 并 小 于 1.0 的 伪 随 机 数 。 
Math.round() 

四 人 铭 五 入 

概要 


Math.round(x) 


任意 数字 。 

返回 

最 接近 x 的 整数 。 
搬 述 


Math.round() 将 它 的 参数 同上 或 同 下 取 整 到 最 接近 的 整数 。 它 将 0.5 同 上 
取 整 。 例 如 ， 它 将 2.5 取 整 为 3， 将 -2.5 取 整 为 -2。 


Math.sin() 
计算 正弦 值 
概要 


Math.sin(x) 


一 个 角度 ， 单 位 为 弧度 制 。 可 以 通过 乘 以 0.017 453 293(2m360) 的 方 
式 ， 将 角度 转换 为 弧度 。 


返回 

x 的 正弦 值 。 返 回 值 将 介 于 -1.0~1.0 之 间 。 
Math.sqrt() 

计算 平方 根 

概要 


Math.sqrt(x) 


一 个 大 于 等 于 0 的 数值 。 

返回 

x 的 平方 根 。 如 采 x 小 于 0 则 返回 NaN 。 
描述 


Math.sqrtO0 计 算 给 定数 字 的 平方 根 。 注 意 ， 然 而 ， 也 可 以 使 用 
Math.pow() 来 计算 某 个 数字 的 任意 根 。 比 如 : 


Math.cuberoot=function(x){return Math.pow(x,1/3);} 


Math.cuberoot(8);// 返 回 2 


Math.SQRT1 2 


/ 


数学 常量 1/N2 


概要 

Math.SQRT1_2 

描述 

Math.SQRT1_2 是 1A 2 的 值 ，2 的 平方 根 的 倒数 。 这 个 常数 的 近似 值 为 
0.707 106 781 186 547 6。 


Math.SQRT2 


数学 常量 V2 


概要 

Math.SQRT2 

描述 

Math.SQRT2 是 常量 ~2 ， 即 2 的 平方 根 。 这 个 常量 的 近似 值 为 1.414 213 
562 373 095。 

Math.tan() 

计算 正切 值 

概要 


Math.tan(x) 


一 个 角度 ， 单 位 为 弧度 制 。 可 以 通过 乘 以 0.017 453 293(2m360) 的 方 
式 ， 将 角度 转换 为 弧度 。 


非 数字 属性 

概要 

NaN 

摘 述 

NaN 是 一 个 全 局 属性 ， 指 同一 个 特殊 的 非 数字 值 。NaN 属 性 不 可 用 
forvin 循 环 枚 举 ， 也 不 能 用 delete 操 作 符 删除 。 注 意 ，NaN 不 是 常量 ， 不 
可 将 它 设 置 为 任何 其 他 值 ， 有 些 操作 应 谣 慎 地 避免 。 


要 检查 一 个 值 是 否 为 数字 ， 可 使 用 isNaNO， 因 为 NaN 总 是 与 其 他 值 不 
相等 ， 甚 至 与 它 目 身 也 不 相等 。 


参阅 


Infinity ~ isNaN() 、 Number.NaN 
Number 

数字 

对 象 - 数 字 

构造 函数 

new Number(value) 


Number(value) 


数 


Sh 


value 

正在 创建 的 Number 对 象 的 数值 ， 或 将 转换 为 一 个 数字 的 值 。 

返回 

当 Number(O 使 用 new 操 作 符 用 做 构造 国 数 时 ， 它 将 返回 一 个 新 构造 的 
Number 对 象 。 当 Number0 当 做 函数 调用 而 没有 new 操 作 符 时 ， 它 将 传 入 
0 (如 果 转 换 失 败 则 返回 
常量 

NumberMAX_VALUE 

能 表示 的 最 大 数字 。 

NumberMIN_VALUE 

能 表示 的 最 小 数字 。 

NumberNaN 

非 数字 值 。 

Number.NEGATIVE_INFINITY 

负 无 和 穷 ， 当 次 出 时 返回 。 

NumberPOSITIVE_INFINITY 

正 无 穷 ， 当 洪 出 时 返回 。 

为 甘 

toString() 

使 用 指定 的 进 制 ， 将 一 个 数字 转换 为 字符 串 。 


toLocaleString() 


将 一 个 数字 转换 为 本 地 数字 格式 的 字符 串 。 

toFixed() 

将 一 个 数字 转换 为 包含 指定 小 数位 数 的 字符 串 。 
toExponential() 

将 一 个 数字 转换 为 指数 记 数 法 ， 在 小 数 点 后 有 指定 位 数 。 
toPrecision() 


将 一 个 数字 转换 为 字符 串 ， 使 用 指定 数目 的 有 效 数 字 。 根 据 数字 的 大 
小 以 及 指定 的 有 效 数 字 位 数 ， 可 能 会 采用 指数 或 浮 点 记 数 法 。 


valueOf() 
返回 一 个 Number 对 象 的 原始 值 。 
摘 述 


数字 是 JavaScript 中 基本 的 原始 数据 类 型 。JavaScript 也 文 持 Number 对 
象 ， 它 是 一 个 原始 数值 的 包装 对 象 。 在 需要 时 ，JavaScript 会 自动 在 原 
形式 和 对 象形 式 之 间 转 换 。 可 以 通过 Number() 构 造 芳 数 来 显 式 地 创 
建 一 个 Number 对 象 ， 虽 然 很 少 需要 这 样 做 。 


Number0 构 造 画 数 也 可 以 不 带 new 操 作 符 使 用 ， 此 时 它 将 作为 一 个 转换 
畏 数 。 以 这 种 方式 调用 时 ， 它 将 芝 试 将 传 入 的 参数 转换 为 一 个 数字 ， 
并 返回 转换 结果 〈 一 个 原始 数值 或 NaN) 。 


Number0 构 造 画 数 也 用 做 5 个 常用 的 数字 常量 的 占 位 符 ， 可 表示 的 最 大 
及 最 小 的 数字 ， 正 、 负 无 穷 大 ， 以 及 特殊 的 NaN 值 。 注 意 ， 这 些 值 是 
Number0 构 造 函 数 本 身 的 属性 ， 而 不 是 各 个 数字 对 象 的 属性 。 例 如 ， 
可 以 像 下 面 这 样 使 用 MAX_VALUE 属 性 : 


var biggest=Number .MAX_VALUE 


但 不 可 以 这 样 : 


var n=new Number(2); 


var biggest=n.MAX_VALUE 
但 除 此 之 外 ，Number 对 象 的 toString0 和 其 他 方法 也 是 每 个 Number 对 和 象 
的 方法 ， 而 不 是 Number(0 构 造 画 数 的 方法 。 上 面 提 到 过 ， 在 需要 时 


JavaScript 会 自动 将 原始 数值 转换 为 Number 对 象 ， 这 就 是 说 ， 可 以 对 于 
原始 数值 以 及 Number 对 象 使 用 Number 方 法 。 


Var value=1234; 


var binary_Vvalue=n,toString(2) 


参阅 

Infinity ~、 Math 、 NaN 
Number. MAX_ VALUE 
最 大 的 数值 

概要 
Number. MAX_ VALUE 
搞 述 


NumberMAX_VALUE 是 JavaScript 中 可 以 表示 的 最 大 的 数 。 它 的 值 约 为 
1.79E+308 。 


NumberMIN_VALUE 
最 小 的 数值 


概要 

NumberMIN_VALUE 

描述 

NumberMIN_VALUE 是 JavaScript 中 可 以 表示 的 最 小 的 数 ( 指 非常 接近 
于 0， 而 不 是 最 大 的 负数 ) 。 它 的 值 约 为 5E-324。 

NumberNaN 

特殊 的 非 数字 值 

概要 

NumberNaN 

描述 


NumberNaN 是 一 个 特殊 的 值 ， 表 示 某 些 数学 操作 (如 对 负数 取 平 方 
根 ) 的 结果 不 是 一 个 数字 。parseInt0 和 parseFloat(O 在 不 能 解析 指定 的 字 
符 串 时 也 会 返回 这 个 值 ， 类 似 地 ， 可 以 在 那些 正常 情况 下 返回 有 效 数 
字 的 函数 中 返回 NumberNaN 来 报告 一 个 错误 。 


JavaScript 将 NumberNaN 值 输出 为 NaN。 注 意 ，NaN 值 与 任意 其 他 数字 
总 是 不 等 ， 包 括 NaN 本 喘 。 因 此 ， 不 能 通过 与 NumberNaN 比 较 的 方法 
来 检查 某 个 值 是 否 为 非 数字 值 ， 而 应 该 使 用 isNaNO 函 数 代替 。 在 
ECMAScript v1 及 后 续 的 版 本 中 ， 也 可 以 使 用 预定 义 的 全 局 属性 NaN 来 
代替 NumberNaN。 


参阅 

isNaN() 、 NaN 
Number.NEGATIVE_INFINITY 
人 负 无 穷 

概要 


Number.NEGATIVE_INFINITY 
摘 述 


Number.NEGATIVE_INFINITY 是 一 个 特殊 的 数值 ， 当 一 个 算术 操作 或 
数学 函数 产生 了 一 个 绝对 值 比 JavaScript 中 能 表示 的 最 大 的 数 还 要 大 
(也 就 是 说 ， 比 -NumberMAX_VALUE 还 要 小 ) 的 负数 时 返回 该 值 。 


JavaScript 将 NEGATIVE_INFINTY 值 显示 为 -Infinity。 这 个 值 在 数学 上 
表现 得 就 像 无 穷 大 一 样 ， 例 如 ， 任 何 数字 乘 以 无 穷 大 仍然 是 无 穷 大 ， 
同时 任何 数字 除 以 无 穷 大 将 得 到 0。 在 ECMAScript v1 及 之 后 的 版 本 
中 ， 也 可 以 使 用 -Infinity 来 代替 Number.NEGATIVE_INFINITY 。 


参阅 

Infinity、isFiniteO 

Number.POSITIVE_INFINITY 

无轨 大 

概要 

NumberPOSITIVE_INFINITY 

描述 

Number POSITIVE_INFINITY 是 一 个 特殊 的 数值 ， 当 一 个 算术 操作 或 数 
学 函数 产生 了 一 个 比 JavaScript 中 所 能 表示 的 最 大 的 数 还 要 大 (也 就 是 
说 ， 比 NumberMAX_VALUE 还 要 大 ) 的 值 时 返回 该 值 。 注 意 ， 如 果 数 
字 “ 下 湾 ”， 或 者 说 比 NumberMIN_VALUE 还 要 小 时 ，JavaScript 将 把 它 
转换 为 0。 

JavaScript 将 POSITIVE_INFINITY 显 示 为 Infinity。 这 个 值 在 数学 上 表现 
得 束 像 无 穷 大 一 样 ， 例 如 ， 任 何 数字 乘 以 无 穷 大 仍然 是 无 穷 大 ， 同 时 
任何 数字 除 以 无 穷 大 将 得 到 0。 在 ECMAScript v1 及 之 后 的 版 本 中 ， 也 


可 以 使 用 预定 义 的 全 局 属性 Infinity 来 代替 
NumberPOSITIVE_INFINITY 。 


参阅 

Infinity 、 isFinite() 
NumbertoExponential() 

使 用 指数 记 数 法 格式 化 一 个 数字 
概要 


number.toExponential(digits) 


digits 

小 数 点 之 后 出 现 的 数 子 的 数目 。 值 可 能 在 0~20 之 间 ， 包 括 0 及 20。 不 
同 的 实现 环境 可 能 会 文 持 范 围 更 大 的 值 。 如 采 省 略 这 个 参数 ， 则 需要 
多 少数 字 将 显示 多 少数 字 。 

返回 

以 指数 记 数 法 表示 的 一 个 数 子 的 字符 囊 格 式 ， 小 数 点 前 有 一 个 数 子 ， 


小 数 点 后 面 有 digits 个 数字 。 数 字 的 小 数 部 分 将 根据 需要 四 舍 五 入 或 补 
0， 以 便 与 指定 的 长 度 相符 。 


已 A 
天 吊 


RangeError 


digits 参 数 太 小 或 太 大 。0~20 之 间 的 值 (包括 0O 和 20) 不 会 产生 
RangeError。 丰 过， 不同 的 实现 环境 可 能 会 文 持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
示例 


var n=12345.6789 


n.toExponential(1);// 返 回 1.2e+4 


n.toExponential(5);// 返 回 1.23457e+4 


n.toExponential(10);// 返 回 1.2345678900e+4 


n.toExponential();// 返 回 1.23456789e+4 


参阅 


Number.toFixed() 、 Number.toLocaleString() 、 Number.toPrecision()、 
Number.toString() 


Number.toFixed() 

使 用 定点 记 数 法 格式 化 一 个 数字 
概要 

numbertoFixed(digits) 

参数 

digits 


小 数 后 之 后 要 显示 的 数字 的 数量 ， 值 可 能 在 0~20 之 间 ， 包 括 0 和 20， 
0 。 如 采 省 略 这 个 参数 ， 则 相 
和 


返回 


一 个 数字 的 字符 品格 式 ， 不 使 用 指数 记 数 法 ， 在 小 数 点 后 有 指定 的 
digits 个 数字 。 根 据 需 要 ， 这 个 数字 将 四 舍 五 入 ， 或 者 小 数 部 分 补 0， 以 
便 符合 指定 的 长 度 。 如 果 数 字 大 于 le+21， 则 这 个 方法 将 简单 地 调用 
NumbertoString0 并 返回 一 个 指数 记 数 法 格式 的 字符 串 。 


异 凶 
RangeError 


digits 参 数 太 小 或 太 大 。0~-20 之 间 的 值 (包括 0O 和 20) 不 会 产生 
RangeError。 不 过 ， 不 同 的 实现 环境 可 能 会 支持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
示例 


var n=12345.6789 


n,toFixed();// 返 回 12346: 注意 四 舍 五 入 ， 没 有 小 数 部 分 


n.toFixed(1);// 返 回 12345.7: 注意 四 舍 五 入 


n.toFixed(6);// 返 回 12345.678900: 注意 末尾 添加 的 0 


(1.23e+20) .toFixed(2) ;// 返 回 123000000000000000000.09 


(1.23e-10) .toFixed(2)// 返 回 0.00 


参阅 


Number.toExponential() ~、 Number.toLocaleString()、 
Number.toPrecision() ~、 Number.toString() 


Number.toLocaleString() 
将 一 个 数字 转换 为 本 地 格式 的 字符 串 
概要 


number.toLocaleString() 


返回 


根据 本 地 惯例 格式 化 当前 数字 为 一 个 字符 串 ， 与 具体 的 实现 有 关 ， 例 
如 可 能 会 影响 小 数 点 使 用 的 标点 符号 或 者 千 位 分 隔 符 。 


异 凶 
TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 


参阅 


Number.toExponential() ~ Number.toFixed() 、 Number.toPrecision()、 
Number.toString() 


Number.toPrecision() 
格式 化 一 个 数字 的 有 效 数 字 
概要 


number.toPrecision(precision) 


precision 


返回 的 字符 串 中 包含 的 有 效 数 字 位 数 。 值 可 能 在 1~21 之 间 ， 包 括 1 和 
21。 不 同 的 实现 环境 可 能 支持 更 大 或 更 小 的 精度 值 。 如 果 省 略 这 个 参 
数 ， 则 将 调用 toString() 方 法 来 将 当前 数 子 转换 为 一 个 十 进 制 的 值 。 


返回 


一 个 包含 precision 位 有 效 数 字 的 数字 字符 串 。 如 果 precision 足 够 大 ， 包 
括 当 前 数字 的 所 有 整数 部 分 ， 则 返回 值 将 使 用 定点 记 数 法 表示 。 其 他 
情况 下 ， 将 使 用 指数 记 数 法 ， 小 数 点 之 前 有 一 个 数字 ， 人 小数点 之 后 有 
precision-1 个 数字 。 根 据 需 要 ， 这 个 数字 将 四 舍 五 入 或 来 尾 补 0。 


异 凶 
RangeError 


precision 参 数 太 小 或 太 大 。1~21 之 间 的 值 ， 包 括 1 和 21， 不 会 产生 
RangeError。 不 过 ， 不 同 的 实现 环境 可 能 文 持 更 大 或 更 小 的 值 。 


TypeError 
这 个 方法 在 一 个 非 Number 对 象 上 调用 。 
示例 


var n=12345.6789 


n.toPrecision(1);// 返 回 1e+4 


n.toPrecision(3);// 返 回 1.23e+4 


n.toPrecision(5);// 返 回 12346: 注意 四 售 五 入 


n.toPrecision(10);// 返 回 12345.67890: 注意 末尾 补 的 9 


参阅 


Number.toExponential() ~ Number.toFixed() 、 Number.toLocaleString() 、 
Number.toString() 


Number.toString() 
将 一 个 数字 转换 为 字符 串 
概要 


number.toString(radix) 


数 


Sh 


radix 


可 选 参数 ， 指 定数 字 转 换 后 的 进 制 。 如 果 省 略 ， 将 使 用 10。 不 过 需要 
注意 ， 如 果 指 定 了 这 个 参数 ， 并 且 值 不 是 10， 那 么 ECMAScript 标 准 允 
许 返 回 任意 值 。 

返回 

当前 数字 在 指定 进 制 下 的 字符 串 形式 。 


己 属 和 
开 了 而 


TypeError 

这 个 方法 在 一 个 非 Number 对 象 上 调用 。 

描述 

Number 对 象 的 toString() 方 法 将 一 个 数字 转换 为 字符 串 。 当 radix 参 数 省 
略 或 值 为 10 时 ， 数 字 将 转换 为 一 个 十 进 制 的 数字 字符 串 。 虽 然 
ECMAScript 标 准 不 要 求实 现 处 理 radix 的 其 他 值 ， 但 常用 的 所 有 实现 都 
可 以 接受 2~36 之 间 的 值 。 


参阅 


Number.toExponential() ~ Number.toFixed() 、 Number.toLocaleString() 、 
Number.toPrecision() 


Number.valueOf() 
返回 原始 的 数 子 值 
重 写 Object.valueOf() 
概要 


number.valueOf() 


返回 


当前 Number 对 象 的 原始 数字 值 。 很 少 需要 显 式 地 调用 这 个 方法 。 
异 凶 

TypeError 

这 个 方法 在 一 个 非 Number 对 象 上 调用 。 


参阅 


Object.valueOf() 

Object 

包含 所 有 JavaScript 对 象 的 特性 的 超 类 
构 千 函数 

new Object() 


new Object(value) 


value 


这 个 可 选 的 参数 指定 一 个 原始 的 JavaScript 值 一 一 一 个 数字 、 布 尔 值 或 
字符 串 ， 这 些 值 将 分 别 转换 为 一 个 Number、Boolean 或 String 对 象 。 


返回 


如 果 没 有 传 入 value 参 数 ， 则 这 个 构造 函数 将 返回 一 个 新 创建 的 Object 实 
例 。 如 果 传 入 一 个 原始 value 值 ， 则 构造 函数 将 创建 并 返回 一 个 原始 值 
的 Number、Boolean 或 String 对 象 封装。 如 采 不 市 new 操 作 符 ， 将 
ee ， 则 它 的 行为 将 和 使 用 new 操 作 符 时 


属性 


constructor 


引用 当前 对 象 的 构造 画 数 〈 一 个 JavaScript 函 数 ) 

i 

hasOwnProperty() 

检查 对 象 是 否 拥有 一 个 指定 名 字 的 本 地 定义 (而 不 是 继承 ) 的 属性 。 
isPrototypeOf() 

检查 当前 对 象 是 不 是 指定 对 象 的 原型 。 

propertyIsEnumerable() 


检查 指定 名 字 的 属性 是 否 存在 并 且 可 以 用 forin 循 环 枚 举 。 


toLocaleString() 


回 该 对 象 的 一 个 本 地 化 的 字符 串 表示 。 这 个 方法 的 默认 实现 只 是 简 
单 地 调用 toString0， 不 过 子 类 可 以 覆 兰 它 ， 以 便 提 供 本 地 化 实现 。 


toString() 


返回 该 对 象 的 一 个 字符 串 表 示 。Object 类 实现 的 这 个 方法 非常 宽泛 ， 不 
能 提供 很 多 有 用 的 信息 。Object 的 于 类 通 弟 会 通过 目 定 义 的 toString0 方 
法 来 将 它 覆 过 ， 以 便 提 供 更 多 有 用 的 输出 信息 。 


valueOf() 


返回 当前 对 象 的 原始 值 ， 如 果 存 在 原始 值 的 话 。 对 类 型 为 Object 的 对 象 
来 说 ， 这 个 方法 只 是 简单 地 返回 该 对 象 本 身 。Object 的 子 类 (如 
人 以 便 返 回 与 该 对 象 相 关 的 原始 


静态 方法 
在 ECMAScript 5 中 ，Object 构 造 函 数 也 为 以 下 全 局 函数 提供 了 命令 衬 


间 : 


由 


Object.create() 


使 用 指定 的 原型 及 属性 创建 一 个 新 的 对 象 。 
Object.defineProperties() 

创建 或 配置 指定 对 象 的 一 个 或 多 个 属性 。 
Object.defineProperty() 

创建 或 配置 指定 对 象 的 某 个 属性 。 
Object.freeze() 

将 指定 对 象 设置 为 不 可 改变 。 
Object.getOwnPropertyDescriptor() 

查询 指定 对 象 的 指定 属性 的 特性 。 
Object.getOwnPropertyNames() 

0 


Object.getPrototypeOf() 
返回 指定 对 象 的 原型 。 
Object.isExtensibje() 

检查 当前 对 象 是 否 能 添加 到 新 的 属性 中 。 
Object.isFrozen() 

检查 当前 对 象 是 否 已 冻结 。 
Object.isSealed() 

检查 指定 对 象 是 否 为 封闭 的 (sealed) 。 


Object.keys() 


返回 一 个 包含 指定 对 象 的 所 有 非 继承 可 枚 举 属性 名 的 数组 。 
Object.preventExtensions() 


阻止 癌 指 定 对 象 添加 新 的 属性 。 


Object.seal() 
阻止 向 指定 对 象 添加 新 属性 或 删除 现 有 属性 。 
摘 述 


Object 类 是 JavaScript 语 言 的 内 置 数据 类 型 。 它 是 所 有 其 他 JavaScript 寺 
象 的 超 类 ， 因 此 ，Object 类 的 所 有 方法 和 行为 都 被 其 他 对 象 继 承 了 。 
JavaScript 中 对 象 的 基本 行为 的 讲解 在 第 6 章 。 


除了 上 面 显 示 的 ObjectO 构 造 画 数 ， 也 可 以 用 6.1 世 介绍 的 Object 直接 量 
语法 来 创建 并 初始 化 对 象 。 


参阅 


Array 、 Boolean 、 Function 、 Function.prototype、 Number、String、 第 6 
ee 
章 


Object.constructor 

对 象 的 构造 画 数 

概要 

object.constructor 

搞 述 

所 有 对 象 的 constructor 属 性 都 指向 用 做 当前 对 象 的 构造 函数 的 那个 画 
数 。 例 如 ， 如 果 使 用 Array0 构 造 画 数 创建 一 个 数组 a， 则 a.constructor 是 


一 个 Array: 


a=new Array(1,2,3);// 创 建 一 个 对 象 


a.constructor==Array// 值 为 true 


constructor 属 性 经 常用 于 检测 未 知 对 象 的 类 型 。 给 定 一 个 未 知 的 值 ， 可 
以 使 用 typeof 操 作 符 来 检查 它 是 一 个 原始 值 还 是 一 个 对 象 。 如 果 它 是 一 
个 对 象 ， 则 可 以 使 用 constructor 属 性 来 检查 对 象 的 类 型 。 例 如 ， 下 面 的 
函数 用 于 检查 给 定 的 值 是 否 是 一 个 数组 : 


function isArray(x){ 


return((typeof x=="object")&&(x.constructor==Array)); 


} 


不 过 ， 需 要 注意 ， 这 个 技术 只 对 核心 JavaScript 中 的 内 置 对 象 有 效 ， 对 
那些 答 主 对 象 《如 客户 端 JavaScript 的 Window 对 象 等 ) 而 言 则 未 必 有 
效 。Object.toString(0) 方 法 提供 了 另外 一 种 判断 未 知 对 象 类 型 的 方法 。 


参阅 


Object.toString() 

Object.create() 

使 用 指定 的 原型 和 属性 来 创建 一 个 对 象 
概要 

Object.create(proto) 


Object.create(proto,descriptors) 


新 创建 对 象 的 原型 ， 可 为 null 。 


descriptors 
一 个 可 选 对 象 ， 把 属性 名 映射 到 属性 描述 符 。 
返回 


一 个 新 创建 的 对 象 ， 继 承 自 proto， 同 时 拥有 descriptors 所 描述 的 属性 。 
异 第 
TypeError 


如 果 proto 不 是 对 象 也 不 是 null， 或 者 指定 descriptors 但 它 引 发 
Object.defineProperties() 抛 出 了 一 个 TypeError 。 


摘 述 


Object.create0) 创 建 并 返回 一 个 新 的 以 proto 为 原型 的 对 象 。 这 意味 着 新 
对 象 将 继承 proto 的 属性 。 


如 果 指 定 可 碗 的 descriptors 参 数 ， 则 Objects.create0) 将 把 它 指 定 的 属性 添 


加 到 新 对 象 中 ， 等 同 于 调用 Object.defineProperties()。 使 用 两 个 参数 调 
用 Obiectoreae(d 同 于 : 


Object.definePproperties(Object.create(p),d); 


关于 descriptors 参 数 的 更 多 细节 可 参考 Object.defineProperties()， 关 于 属 
性 描述 符 对 象 的 更 多 解释 可 参阅 Object.getOwnPropertyDescriptor(O) 。 


注意 ，Object.create() 不 是 在 具体 的 对 象 上 调用 的 方法 : 它 是 一 个 全 局 
函数 ， 需 要 传 入 一 个 对 象 


示例 


// 创 建 一 个 对 象 ， 有 x、y 属 性 ， 同 时 继承 属性 


[到 
N 


Var p=0bject.create({z:0},{ 
x:{value:1,writable:false,enumerable:true,configurable:true}, 
y:{value:2,writable:false,enumerable:true,configurable:true}, 


}); 


参阅 


Object.defineProperty() 、 Object.defineProperties() 、 
Object.getOwnPropertyDescriptor()、 6.1P、6.7 廊 


Object.defineProperties() 
创建 或 配置 对 象 的 多 个 属性 
概要 


Object.defineProperties(o,descriptors) 


Sh 
类 


要 在 其 上 创建 或 配置 属性 的 对 象 。 


descriptors 
将 属性 名 映射 到 属性 描述 符 的 对 象 。 
返回 

对 象 o。 


已 总 和 
开 了 而 


TypeError 


如 有 果 o 不 是 一 个 对 象 ， 或 不 能 创建 或 配置 某 个 指定 的 属性 ， 就 抛 出 该 异 
常 。 这 个 函数 不 是 原子 性 的 : 它 可 能 在 创建 或 配置 几 个 属性 之 后 ， 同 
时 还 有 别 的 属性 未 创建 或 配置 时 抛 出 异常 。 关 于 可 能 导致 TypeError 的 
属性 配置 错误 可 参阅 6.7 广 。 


描述 
Object.defineProperties() 在 对 象 o 上 创建 或 配置 由 descriptors 指 定 及 描述 


的 属性 。descriptors 中 的 属性 名 也 束 是 要 在 o 上 创建 或 配置 的 属性 名 ， 
同时 指定 对 应 的 属性 的 值 。 


Object.defineProperties() 的 行为 非常 类 似 Object.defineProperty()， 可 参阅 


这 个 函数 以 便 了 解 更 多 细节 。 关 于 描述 符 对 象 的 更 多 细节 可 参阅 
Object.getOwnPropertyDescriptor()。 


示例 


// 把 只 读 忆 


性 x 和 y 添 加 到 新 创建 的 对 象 中 


画 


Var p=0bject.defineProperties({},{ 
x:{value:0,writable:false,enumerable:true,configurable:true}, 
y:{value:1,writable:false,enumerable:true,configurable:true}, 


}); 


参阅 


Object.create() ~、 Object.defineProperty() 、 
Object.getOwnPropertyDescriptor()、6.7T 


Object.defineProperty() 
创建 或 配置 对 象 的 一 个 属性 


概要 


Object.defineProperty(o,name,desc) 


Sh 
i 


将 在 其 上 创建 或 配置 属性 的 对 象 。 

name 

将 创建 或 配置 的 属性 的 名 字 。 

desc 

一 个 属性 描述 符 对 象 ， 描 述 要 创建 的 新 属性 或 对 现 有 属性 的 修改 。 
返回 

对 和 象 0。 

异常 

TypeError 

如 果 o 不 是 一 个 对 象 ， 或 者 指定 属性 不 能 创建 (比如 o 不 可 扩展 ) 或 配 
置 (比如 该 属性 已 经 存在 ， 并 且 不 可 配置 ) 。 关 于 可 能 导致 这 个 函数 
抛 出 TypeError 的 属性 配置 错误 列表 可 参阅 6.7 节 。 

描述 

Object.definePropertyO 使 用 属性 描述 符 desc 来 创建 或 配置 对 象 o 中 名 为 
name 的 属性 。 关 于 属性 描述 符 对 象 的 描述 ， 可 参阅 
Object.getOwnPropertyDescriptor() ° 

如 果 o 还 不 存在 名 为 name 的 属性 ， 则 这 个 函数 将 简单 地 使 用 desc 中 指定 


的 属性 和 值 来 创建 一 个 新 的 属性 。 对 于 desc 中 未 指定 的 属性 ， 对 应 的 属 
性 值 将 设置 为 false 或 null。 


如 有 果 name 为 o 中 一 个 已 经 存在 的 属性 名 ， 则 Object.defineProperty() 将 通 
过 改变 它 的 值 或 属性 来 配置 这 个 属性 。 在 这 种 情况 下 ，desc 只 需要 包含 
要 改变 的 属性 ， 不 包含 的 属性 将 不 会 改变 。 


注意 这 不 是 在 具体 的 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 
太一 个 对 过 :3 


示例 


function constant(o,n,v){// 定 义 一 个 值 为 v 的 常量 o.n 
Object.defineproperty(o,n, {value:v,writable:false 
enumerable:true,configurable:false}); 


} 


参阅 


Object.create() ~、 Object.defineProperties() 、 
Object.getOwnPropertyDescriptor()、6.7T 


Object.freezel() 
将 一 个 对 象 设置 为 不 可 改变 
概要 


Object.freeze(o) 


要 冻结 的 对 象 
返回 


现在 处 于 冻结 状态 的 参数 对 象 o。 
搞 述 


Object.freeze() 将 o 设 置 为 不 可 扩展 (参阅 Object.preventExtensions()) ， 
同时 吏 像 Object.seal0 那 样 ， 将 它 的 所 有 目 有 属性 设置 为 不 可 配置 。 除 
此 之 外 ， 它 也 将 所 有 非 继 承 的 数据 属性 设置 为 只 读 。 这 意味 着 不 能 向 o 
添加 新 属性 ， 同 时 已 有 的 属性 也 不 能 设置 或 删除 。 冻 结对 象 是 一 个 永 
久 性 的 操作 ， 一 旦 冻结 ， 就 不 能 解冻 。 


注意 ，Object.freezeO) 只 设置 数据 属性 的 可 写 特性 ， 那 些 有 对 应 setter 函 
数 的 属性 不 会 受到 有 影响。 还 要 注意 ，Object.freeze(O) 不 会 影响 继承 属 
性 。 


注意 这 个 方法 不 可 以 在 具体 的 对 象 上 调用 ， 它 是 一 个 全 局 函数 ， 必 须 
全 入 二 人 刘 苗 ， 


参阅 


Object.defineProperty() ~、 Object.isFrozen() ~、 Object.preventExtensions() 、 
Object.seal() 、 6.8.317 


Object.getOwnPropertyDescriptor() 
查询 一 个 属性 的 特性 


概要 
Object.getOwnPropertyDescriptor(o,name) 
参数 

0 

竺 查询 其 属性 特性 的 对 象 。 

name 


待 查询 的 属性 名 (或 数组 元 素 的 索引 ) 


返回 


指定 对 象 指定 属性 的 一 个 属性 描述 符 对 象 ， 如 果 不 存 在 指定 属性 则 返 
回 undefined 。 


摘 述 


Object.getOwnPrepertyDescriptorO 返 回 指定 对 象 指 定 属性 的 一 个 属性 描 
述 符 。 属 性 描述 符 是 一 个 对 象 ， 描 述 该 属性 的 特性 和 值 。 细 万 可 参阅 
下 面 的 小 节 。 注 意 ， 这 个 方法 不 可 以 在 具体 的 对 象 上 调用 ， 它 是 一 个 
全 局 函数 ， 必 须 传 入 一 个 对 象 。 


属性 描述 符 


属性 描述 符 是 一 个 普通 的 JavaScript 对 象 ， 描 述 某 个 属性 的 特性 (有 了 时 
也 包括 值 ) 。 有 两 种 JavaScript 属 性 。 数 据 属性 有 一 个 值 以 及 三 个 性 
质 : 可 枚 举 性 (enumerable) 、 可 写 性 (writable) 以 及 可 配置 性 

(configurable) 。 访 问 器 属性 (accessor property) 有 一 个 getter 和 /或 
setter 方 法 ， 以 及 可 枚 举 性 和 可 配置 性 。 


数据 属性 的 摘 述 符 类 似 这 样 : 


{ 


value:/* 任 意 JavaScript 值 */ 
writable:/*true 或 false*/ 
enumerable:/*true 或 false*/ 
configurable:/*true 或 false*/ 


} 


访问 需 属 性 的 朱 述 符 类 似 这 样 : 


{ 


get:/*function 或 undefined: 替换 属性 值 */， 


set:/*function 或 undefined: 替换 可 写 性 */， 
enumerable:/*true 或 false*/， 
configurable:/*true 或 false*/ 


} 


参阅 

Object.defineProperty()、 6.7 节 
Object.getOwnPropertyNames() 
返回 非 继承 属性 的 名 字 

概要 


Object.getOwnPropertyNames(o) 


一 个 对 象 。 
返回 
I 非 继承 属性 的 名 字 的 数组 ， 包 括 那 些 不 可 枚 举 的 属 


摘 述 


Object.getOwnPropertyNames() 返 回 一 个 包含 o 的 所 有 非 继 承 属性 的 名 字 
的 数组 ， 包 括 那 些 不 可 枚 举 的 属性 。 关 于 只 返回 可 枚 举 属性 的 名 字 的 


路 


方法 可 参考 Objects.keys()。 


注意 ， 这 个 方法 不 可 在 对 象 上 调用 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 一 
个 对 象 。 


示例 


Object .getownpPropertyNames([])//=>["length"]:"length" 不 可 枚 举 


参阅 

Object.keys()、6.5 节 
Object.getPrototypeOf() 
返回 一 个 对 象 的 原型 
概要 


Object.getPrototypeOf(o) 


一 个 对 象 。 
返回 

0 的 原型 对 象 。 
搞 述 


Object.getPrototypeOfO 返 回 它 的 参数 的 原型 。 注 意 这 是 一 个 全 局 函数 ， 
必须 传 入 一 个 对 象 。 它 不 是 在 对 象 上 调用 的 方法 。 


示例 


var p= 人 ;// 一 个 原始 对 象 


Object.getPprototypeof(p)//=>0bject.prototype 


var 0=0bject.create(p)// 一 个 继承 自 p 的 对 象 


Object .getPrototypeof(o)//=>p 


参阅 

Object.create0)、 第 6 章 
Object.hasOwnProperty() 
仿 查 一 个 属性 是 否 是 继承 的 
概要 


object.hasOwnProperty(propname) 


propname 
包含 对 象 的 属性 名 的 字符 串 。 

返回 

如 有 果 对 象 有 一 个 指定 名 字 的 非 继承 的 属性 则 返回 true; 如 有 果 该 对 象 没 有 
人 或 者 这 个 属性 是 从 它 的 原型 对 象 继承 而 来 的 ， 则 返 
摘 述 

如 同 第 9 章 描述 的 ，JavaScript 对 象 可 以 有 上 自己 的 属性 ， 也 可 以 从 它们 的 


原型 对 象 那 儿 继承 属性 。hasOwnProperty() 方 法 提供 一 个 识别 继承 属性 
和 非 继承 的 本 地 属性 的 方法 。 


示例 


var o=new 0bject();// 创 建 一 个 对 象 


0.X=3.14;// 定 义 一 个 非 继 承 的 本 地 属性 


0.hasownProperty("x");// 返 回 true: x 是 0 的 本 地 属性 


0.hasownProperty("y");// 返 回 false: 0 没有 属性 y 


0.hasownProperty("toString");// 返 回 false: toString 属 性 是 继承 属性 


参阅 
Function.prototype、Object.propertyIsEnumerable0、 第 9 章 
Object.isExtensible() 

ECMAScript 5 

判断 某 个 对 象 上 是 否 可 以 添加 新 属性 

概要 


Object.isExtensible(o) 


待 检查 可 扩展 性 的 对 象 。 


高 
回 


如 果 可 以 同 该 对 象 添 加 新 属性 则 返回 true;， 否 则 返回 false 。 


摘 述 


如 果 可 以 同一 个 对 象 添 加 新 的 属性 ， 则 称 它 为 可 扩展 的 。 所 有 对 象 在 
创建 后 都 是 可 扩展 的 ， 直 到 它们 被 传 入 Object.preventExtensions()、 
Object.seal() 或 Object.freeze()。 

注意 这 不 是 对 象 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 一 个 对 象 。 


示例 


var o={};// 新 创建 一 个 对 象 


Object .isExtensible(0)//=>true: 它 是 可 扩展 的 


0bject .preventExtensions(0);// 将 它 设 置 为 不 可 扩展 


Object .isExtensible(0)//=>false: 现在 它 不 可 扩展 了 


参阅 


Object.isFrozen() ~ Object.isSealed() 、 Object.preventExtensions() 、 6.8.3 
节 


Object.isFrozen() 
判断 对 象 是 否 不 可 改变 
概要 

Object.isFrozen(o) 

参数 

0 


待 检测 的 对 象 。 
返回 


如 果 o 已 冻结 并 不 改变 则 为 true; 否则 为 false。 
摘 述 


如 果 一 个 对 象 的 所 有 非 继承 属性 (除了 那些 带 setter 方 法 的 ) 都 为 只 
读 ， 或 者 它 是 封闭 的 (sealed) ， 则 它 处 于 冻结 状态 。 如 果 可 以 同一 个 
对 和 象 添 加 新 的 〈 非 继承 的 ) 属性 ， 并 且 不 可 删除 现 有 的 〈 非 继承 的 ) 
属性 ， 则 称 它 为 封闭 的 。Object.isFrozen() 检 测 它 的 参数 是 否 为 冻结 状 
态 。 对 象 一 旦 冻结 就 不 能 再 解冻 。 

冻结 一 个 对 象 的 常用 方法 为 将 它 传 给 Object.freeze()。 也 可 以 这 样 冻结 
一 个 对 象 ， 将 它 传 给 Object.preventExtensions()， 然 后 用 
Object.defineProperty0 来 将 它 所 有 的 属性 设置 为 只 读 并 且 不 可 删除 的 。 


0 筷 生 一 个 全 局 图 数 ， 必 须 传 入 一 个 
次 O 


参阅 


Object.defineProperty() ~ Object.freeze() ~ Object.isExtensible() 、 
Object.isSealed() 、 Object.preventExtensions() 、 Object.seal() 、 6.8.3T 


Object.isPrototypeOf() 
判断 当前 对 象 是 否 为 男 一 个 对 象 的 原型 
概要 


object.isPrototypeOf(o) 


如 果 object 是 o 的 原型 则 返回 true; 如 果 o 不 是 一 个 对 象 ， 或 object 不 是 o 
的 原型 则 返回 false。 
描述 


如 第 9 盏 捕 述 的 ， JavaScript 对 象 从 它们 的 原型 对 象 中 继承 属性 。 对 象 的 
原型 通过 prototype 属 性 指 同 创建 并 初始 化 该 对 象 的 构造 本 数 。 
isPrototypeOfO 方 法 提供 一 种 判断 某 个 对 象 是 否 为 另 一 个 对 象 的 原型 的 
方法 。 这 个 技术 可 用 于 判断 对 象 的 类 。 


示例 


var o=new 0bject();// 创 建 一 个 对 象 


Object.prototype.isPrototype0f(0)//true: 0 是 一 个 对 象 


Function.prototype.isPrototypeof(o,.toString);V/true: toString 是 一 个 函数 


Array.prototype.isprototypeof([1,2,3]);//true: [1,2,3] 是 一 个 数组 


// 执 行 类 似 检 测 的 另 一 种 方法 


(0o.constructor==0bject);//true:o 是 由 0bject( ) 构 造 画 数 创建 的 


(0o.tostring.constructor==Function);//true:0.toString 是 一 个 函数 


// 原 型 对 象 也 有 自己 的 原型 。 下 面 的 调用 返回 true， 说 明 函 数 对 象 


府 


// 不 仅 从 Function.prototype 而 且 从 0bject .prototype 继 承 属性 。 


Object .prototype.isprototypeof(Function.prototype); 


参阅 
Function.prototype、Object.constructor、 第 9 章 


Object.isSealed() 


判断 一 个 对 象 的 属性 是 否 可 添加 或 删除 
概要 


Object.isSealed(o) 


待 检 测 的 对 象 

返回 

如 果 o 是 封闭 的 则 为 tue; 否则 为 false 。 
摘 述 


如 果 不 可 以 向 一 个 对 象 添加 新 的 ( 非 继承 的 ) 属性 ， 并 且 现 有 的 ( 非 
继承 的 ) 属性 不 可 删除 ， 则 称 它 为 封闭 的 。Object.isSealed0O 检 测 它 的 
参数 是 否 为 封闭 对 象 。 对 象 一 旦 封 路 ， 将 没有 办 法 解 封 。 封 闭 一 个 对 
象 的 常用 方法 是 将 它 传递 给 Object.seal() 或 Object.freeze()。 也 可 以 这 样 
封闭 一 个 对 象 : 将 它 传 入 Object.preventExtensions()， 再 使 用 
Object.defineProperty0) 来 将 将 它 的 所 有 属性 设置 为 不 可 删除 的 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 


一 个 对 象 。 


参阅 


Object.defineProperty() ~ Object.freeze() ~ Object.isExtensible() 、 
Object.isFrozen() 、 Object.preventExtensions() ~、 Object.seal() 、 6.8.31 


Object.keys() 
返回 自 有 的 可 枚 举 属性 名 
概要 


Object.keys(o) 


一 个 对 象 。 

返回 

一 个 包含 o 的 所 有 可 枚 举 自 有 ( 非 继承 ) 属性 的 名 字 的 数组 。 

描述 

Object.keys0 返 回 指定 对 象 o 的 属性 名 组 成 的 数组 。 这 个 数组 只 包含 那 
些 可 枚 举 并 且 直 接 定 义 在 o 上 的 属性 的 名 字 ， 不 包含 继承 的 属性 。 ( 关 
于 取得 不 可 枚 举 的 属性 名 的 方法 可 参阅 
Object.getOwnPropertyNames()。) 返回 数组 中 的 属性 名 的 顺序 即 它们 
通过 forvin 循 环 枚 举 时 的 顺序 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 
一 个 对 象 。 


示例 


Object.keys({x:1,y:2})//=>["x","y"] 


参阅 

Object.getOwnPropertyNames(O)、5.5.4 记 、6.5 世 
Object.preventExtensions() 

禁止 在 一 个 对 象 上 添加 新 的 属性 

概要 


Object.preventExtensions(o) 


每 设置 可 扩展 性 的 对 象 。 

返回 

传 入 的 参数 对 象 o。 

描 壕 

Object.preventExtensions() 将 o 的 可 扩展 性 设置 为 false， 之 后 将 不 能 同 它 
添加 新 的 属性 。 这 是 一 个 永久 性 的 改变 : 一 旦 一 个 对 象 设置 为 不 可 扩 
展 的 ， 它 就 再 也 不 能 改 为 可 扩展 的 。 


注意 Object.preventExtensions() 不 会 影响 原型 链 ， 不 可 扩展 的 对 象 仍然 
可 以 获得 新 的 继承 属性 。 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 
下 对象 


参阅 

Object.freeze() ~ Object.isExtensible() 、 Object.seal()、6.8.3T 
Object.propertyIsEnumerable() 

仿 测 某 个 属性 是 否 在 fovin 循 环 中 可 见 

概要 


object.propertyIsEnumerable(propname) 


propname 


包含 对 象 的 指定 属性 名 的 一 个 字符 串 。 
返回 


如 果 对 象 有 一 个 名 为 propname 的 非 继 承 属性 ， 并 且 该 属性 可 枚 举 ， 则 
返回 true， 这 意味 着 这 个 属性 可 以 通过 该 对 象 的 for/in 循 环 枚 举 。 


摘 述 


for/in 语 句 裔 历 给 定 对 象 的 可 枚 举 属性 。 对 象 的 属性 不 全 是 可 枚 举 的 : 
那些 由 JavaScript 代 码 添 加 到 对 象 中 的 属性 是 可 枚 举 的 ， 但 那些 内 置 对 
象 的 预定 义 的 属性 《如 方法 ) 通常 不 可 枚 举 。propertyIsEnumerable() 方 
法 提供 了 一 个 区 分 可 枚 举 与 不 可 枚 举 属 性 的 方法 。 不 过 需要 注意 ， 
ECMAScript 标 准 规定 propertyIsEnumerable(0) 不 检查 原型 链 ， 也 就 是 说 ， 
这 个 方法 只 适用 于 对 象 的 本 地 属性 ， 除 此 之 外 ， 没 有 可 用 于 测试 继承 
属性 的 可 枚 举 性 的 方法 。 


示例 


var o=new 0bject();// 创 建 一 个 对 象 


0.X=3.,14;// 定 义 一 个 属性 


0.propertyIsEnumerable("x");//true: 属 性 x 是 本 地 属性 并 且 可 枚 举 


0.propertyIsEnumerable("y");//false:0 没 有 属性 


0.propertyIsEnumerable("tostring");//false:toString 属 性 是 承继 来 的 


» 


Object .prototype.propertyIsEnumerable("toString");//false: 不 可 枚 举 


参阅 
Function.prototype、Object.hasOwnProperty()、 第 6 章 


Object.seal() 


咀 止 添加 或 删除 对 象 的 属性 
概要 


Object.seal(o) 


行 封 财 的 对 象 。 

返回 

现在 处 于 封闭 状态 的 参数 对 象 0。 

描 壕 

Object.seal() 将 o 设 置 为 不 可 扩展 (参阅 Object.preventExtensions()) ， 同 
时 将 它 的 所 有 自 有 属性 设置 为 不 可 配置 的 。 它 的 效果 为 阻止 添加 新 的 
属性 以 及 阻止 删除 现 有 属性 。 封 闭 一 个 对 象 是 永久 性 的 : 对象 一 旦 直 
财 ， 融 不 再 能 解 封 。 

注意 ，Object.seal0 不 仅 将 属性 设置 为 只 读 的 ， 这 是 Object.freeze0) 的 功 


能 。 还 要 注意 ，Object.seal() 不 会 影响 继承 属性 。 如 采 一 个 封闭 对 象 的 
人 


注意 这 不 是 在 一 个 对 象 上 调用 的 方法 ， 它 是 一 个 全 局 函数 ， 必 须 传 入 
一 个 对 象 。 
参阅 


Object.defineProperty() ~、 Object.freeze() 、 Object.isSealed() 、 
Object.preventExtensions() 、 6.8.317 


Object.toLocaleString() 
返回 对 象 的 本 地 化 的 字符 串 表示 


概要 

object.toString() 

返回 

一 个 表示 该 对 象 的 字符 串 。 

描述 

这 个 方法 用 于 返回 一 个 表示 当前 对 象 的 字符 串 ， 使 用 合适 的 本 地 化 格 
式 。Object 类 提供 的 默认 的 toLocaleString0) 方 法 只 是 简单 地 调用 
toString() 方 法 ， 并 返回 后 者 返回 的 非 本 地 化 的 字符 串 。 不 过 要 注意 ， 
其 他 类 (包括 Array、Date 以 及 Number) 都 各 自 定义 自己 的 这 个 方法 的 
版 本 ， 用 于 执行 本 地 化 字符 串 转 换 。 定 义 上 自己 的 类 时 ， 可 能 也 需要 履 
i 


参阅 


Array.toLocaleString() 、 Date.toLocaleString() 、 
Number.toLocaleString() 、 Object.toString() 


Object.toString() 

定义 一 个 对 象 的 字符 串 表示 形式 
概要 

object.toString() 

返回 

一 个 表示 该 对 象 的 字符 串 。 
搞 述 


在 JavaScript 程 序 中 一 般 不 会 经 常 显 式 地 调用 toString0 方 法 。 一 般 情 况 
下 ， 在 对 象 中 定义 这 个 方法 ， 系 统 会 在 需要 时 自动 调用 它 以 便 将 该 对 
象 转 为 字符 串 。 


当 对 和 象 在 一 个 字符 串 上 下 文中 使 用 时 ，JavaScript 系 统 会 调用 相应 的 
toString() 方 法 来 将 该 对 象 转 为 字符 串 。 例 如 ， 把 一 个 对 象 传 入 期 望 参 
数 为 字符 串 的 画 数 时 ， 这 个 对 象 会 转 为 字符 串 。 


alert(my_object); 


类 似 地 ， 当 使 用 “+ 操作 符 将 对 象 与 字符 串 连 接 时 ,对象 也 会 转化 为 字 


7 
符 串 。 
var msg='My object is:'+my_object,; 


调用 toString(0 方 法 时 没有 参数 ， 返 回 值 应 该 是 一 个 字符 串 。 为 了 便于 
， 返 回 的 字符 串 应 当 以 某 种 形式 与 调用 这 个 方法 的 对 象 的 值 相 


在 JavaScript 中 定义 目 定义 类 时 ， 为 这 个 类 定义 一 个 toString(0) 方 法 是 一 
个 不 错 的 实践 。 如 果 没 有 定义 这 个 方法 ， 则 对 象 会 从 Object 类 继承 默认 
的 toString() 方 法 。 默 认 方 法 返回 的 字符 串 格 式 形 如 : 


[objectclass] 


其 中 class 是 该 对 象 的 类 : 值 

为 "Object" 、"String"、"Number" 、"Function"、"Window"、"Document" 
等 。 有 时 候 可 以 用 默认 的 toString() 方 法 的 这 个 行为 来 判断 未 知 对 象 的 
类 型 或 类 。 不 过 ， 由 于 大 多 数 对 象 都 有 目 定 义 版 本 的 toString0， 因 此 
一 般 需 要 在 对 象 上 显 式 地 调用 ObjecttoString() 方 法 ， 类 似 这 样 : 


Object .prototype.toString,apply(o)， 


注意 ， 这 个 判断 未 知 对 象 的 技术 只 适用 于 内 置 对 象 。 上 自 定 义 的 对 象 类 
有 一 个 "Object" 类 ， 在 这 种 情况 下 ， 可 以 使 用 Object.constructor 属 性 来 
获得 关于 这 个 对 象 的 更 多 信息 。 


在 调试 JavaScript 程 序 时 ，toString(0) 方 法 可 能 会 非常 有 用 ， 可 以 用 它 输 
出 对 象 并 查看 它们 的 值 。 因 此 ， 为 所 创建 的 每 个 对 象 定义 一 个 
toString() 方 法 是 个 不 错 的 主意 。 


虽然 toString() 方 法 通常 由 系统 自动 调用 ， 但 有 时 也 需要 手动 调用 它 
们 。 比 如 ， 有 时 需要 将 某 个 对 象 显 式 转化 为 字符 串 ， 但 JavaScript 没 有 
目 动 做 这 个 转换 时 : 


y=Math ,sqrt(x);// 计 算 一 个 数字 


ystr=y .toString();// 将 它 转化 为 一 个 字符 串 
注意 ， 在 这 个 例子 中 ， 数 字 有 一 个 可 用 于 强制 转换 的 内 置 toString() 方 
I 


其 他 情况 下 ， 即 使 在 JavaScript 会 自动 转换 的 上 下 文中 ， 也 可 以 选择 使 
用 toString()。 显 式 地 使 用 toString() 有 助 于 使 代码 更 加 清晰 : 


alert(my_obj.toString()); 


参阅 

Object.constructor ~、 Object.toLocaleString() 、 Object.valueOf() 
Object.valueOf() 

给 定 对 象 的 原始 值 

概要 


object.valueOf() 


返回 


与 指定 对 象 关联 的 原始 值 ， 如 果 存 在 这 样 一 个 值 的 话 。 如 果 没 有 与 该 
对 象 关 联 的 值 ， 则 返回 对 象 本 身 。 


摘 述 


对 象 的 valueOfO 方 法 返回 与 该 对 象 关联 的 原始 值 ， 如 果 存 在 这 样 一 个 
和 这 个 方法 只 是 简单 地 返回 该 
次 O 


不 过 ， 对 类 型 为 Number 的 对 象 而 言 ，valueOf() 将 返回 该 对 象 表示 的 原 
始 数字 值 。 类 似 地 ，Boolean 对 象 会 返回 一 个 关联 的 原始 布尔 值 ，String 
对 象 则 返回 一 个 关联 的 字符 串 。 


valueOf() 方 法 很 少 需要 手动 调用 ， 在 需要 原始 值 时 ，JavaScript 会 自动 
调用 这 个 方法 。 事 实 上， 由 于 有 对 valueOfO 方 法 的 目 动 调用 ， 甚 至 很 
难 区 分 原始 值 和 它们 的 关联 对 象 。 例 如 ， 虽 然 typeof 操 作 符 能 告诉 你 字 
符 串 和 String 对 象 之 间 的 不 同 ， 但 在 实际 应 用 的 JavaScript 代 码 中 两 者 完 


全 可 以 等 价 。 


Number、Boolean 以 及 String 对 象 的 valueOfO 方 法 将 这 些 包 装 对 象 转化 
为 它们 所 表示 的 原始 值 。 传 入 数字 、 布尔 值 、 字 符 串 到 ObjectO 构 造 函 
数 时 则 进行 相反 的 操作 ， 它 将 原始 值 包装 到 一 个 合适 的 对 象 包装 中 。 
在 绝 大 多 数 情 况 下 ，JavaScript 会 自动 处 理 这 种 原始 值 到 对 象 的 转换 ， 
所 以 很 少 需要 这 样 调 用 Object0 构 造 画 数 。 


在 有 些 情况 下 ， 你 可 能 想 为 自己 的 对 象 目 定 义 一 个 valueOf0 方 法 。 例 
如 ， 你 可 能 需要 定义 一 个 JavaScript 对 象 来 表示 复数 (一 个 实数 加 上 一 
个 虚数 ) 。 作 为 这 个 对 象 类 型 的 一 部 分 ， 你 可 能 需要 定义 执行 加 法 、 
乘法 等 的 方法 (参阅 例 9-3) 。 但 你 可 能 也 想 丢 弃 复数 的 虚 部 以 便 像 普 
i ° 为 了 实现 这 些 功 能 ， 你 可 能 需要 写 类 似 下 面 的 


Complex.prototype.valueOof=new Function("return this.real"); 


为 Complex 对 象 类 型 定义 这 个 valueOfO 方 法 后 ， 束 可 以 ， 例 如 ， 将 一 个 
复数 对 象 传 入 Math.sqrt()， 以 便 计算 这 个 复数 的 实 部 的 平方 根 。 


参阅 

Object.toString() 
parseFloat() 

将 一 个 字符 串 转 为 数 子 
概要 


parseFloat(s) 


参数 


[oe] 


竺 解析 并 转化 为 数字 的 字符 种 。 
返回 


解析 后 的 数字 ， 如 果 s 不 是 以 一 个 有 效 数 字 开 头 则 返回 NaN。 在 
JavaScript 1.0 中 ， 如 采 s 不 能 解析 为 数字 则 返回 0 而 不 是 NaN 。 


摘 述 


parseFloat0 解 析 并 返回 s 中 出 现 的 第 一 个 数字 。 当 parseFloat() 在 s 中 遇 到 
一 个 不 是 该 数字 的 有 效 部 分 的 字符 时 ， 解 析 将 终止 ,返回 获得 的 值 。 
如 果 Ss 不 是 以 parseFloat0 能 解析 的 一 个 数字 开头 ， 则 函数 将 返回 非 数 字 
值 NaN。 可 以 使 用 isNaNO 函 数 来 测试 返回 值 。 如 果 只 想 解 析 数 字 的 整 
数 部 分 ， 可 使 用 parseInt() 代 蔡 parseFloat()。 


参阅 


isNaN() 、 parselnt() 


parselInt() 


将 一 个 字符 串 转 换 为 整数 

概要 

parselnt(s) 

parselnt(s,radix) 

参数 

S 

要 解析 的 字符 串 。 

radix 

一 个 可 计 的 整数 参数 ， 表 示 该 数字 将 解析 到 的 进 制 。 如 果 这 个 参数 省 
略 或 值 为 0， 则 该 数字 将 解析 为 十 进 制 ， 如 采 它 以 0x 或 0X 开 头 则 将 解析 
为 十 六 进 制 。 如 果 这 个 参数 小 于 2 或 大 于 36， 则 parseIntO 将 返回 NaN 。 
返回 


解析 过 的 数字 ， 如 果 s 不 以 一 个 有 效 的 整数 开头 则 返回 NaN。 在 
JavaScript 1.0 中 ，parseInt(0) 在 不 能 解析 s 时 返回 0 而 不 是 NaN 。 


搞 述 
parseInt() 解 析 并 返回 s 中 出 现 的 第 一 个 数字 〈 可 以 以 一 个 减 号 开头 ) 。 
当 parseInt0 在 s 中 直到 一 个 不 是 指定 的 进 制 的 有 效 数 子 的 字符 时 ， 人 解析 


将 终止 ， 同 时 返回 得 到 的 值 。 如 果 s 不 是 以 parseInt0 能 解析 的 一 个 字符 
人 。 可 以 使 用 isNaNO 画 数 来 测试 返 


radix 参 数 指定 要 使 用 的 进 制 。 使 用 10 将 让 parseInt0 解 析 十 进 制 数 ， 值 8 
则 指定 解析 一 个 八进制 数 〈 使 用 数字 0~7) ; 值 16 则 指定 一 个 十 六 进 
的 值 ， 使 用 数字 0~-9 以 及 字母 A~EF。radix 可 以 是 2~-36 之 间 的 任意 


如 果 radix 是 0 或 未 指定 ， 则 parseInt() 将 尝试 判断 自 s 解 析出 的 数字 的 进 

制 。 如 果 s 以 0x 开 头 〈 之 前 可 以 有 一 个 减 号 ) ， 则 parseImtO 将 把 s 剩 余 的 
部 分 解析 为 一 个 十 六 进 制 数 。 在 其 他 情况 下 ，parseInt() 将 把 s 解 析 为 一 
个 十 进 制 数 。 


示例 


parseInt("19",10);// 返 回 19(10+9) 


parseInt("11",2);// 返 回 3(2+1) 


parseInt("17",8);// 返 回 15(8+7) 


parseInt("1f",16);// 返 回 31(16+15) 


parseInt("10");// 返 回 10 


parseInt("90x10" ) ;// 返 回 16 


参阅 

isNaN() 、 parseFloat() 

RangeError 

当 一 个 数字 超出 合法 的 范围 时 抛 出 
对 象 一 错误 -RangeError 
构造 画 数 

new RangeError() 


new RangeError(message) 


数 


Sh 


message 


提供 关于 异常 的 细节 信息 的 可 选 错误 消息 。 如 果 指 定 ， 则 这 个 参数 将 
用 做 当前 RangeError 对 象 的 message 属 性 的 值 。 


返回 

一 个 新 构造 的 RangeError 对 象 。 如 果 指 定 message 参 数 ， 则 Error 对 象 将 
把 它 作 为 其 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 预 设 的 默认 值 
作为 这 个 属性 的 值 。 不 使 用 new 控 作 人 和 从， 像 调用 函数 一 样 调用 
RangeError0 构 造 函 数 时 ， 它 的 行为 和 使 用 new 操 作 符 调用 时 一 样 。 
属性 


message 


提供 了 关于 当前 异 音 的 细节 的 错误 请 轧 。 这 个 属性 的 值 为 传 入 构造 团 
数 的 字符 串 或 者 预定 义 的 默认 字符 串 。 细 节 可 参阅 Frrormessage。 


DaqIne 


一 个 指定 寞 冲 类 型 的 字符 串 。 所 有 RangeError 对 象 的 这 个 属性 都 继承 自 
值 "RangeError"。 
搞 述 


当 一 个 数值 不 在 合法 的 范围 内 时 ， 将 抛 出 RangeError 类 的 一 个 实例 。 例 
如 ， 将 数组 的 长 度 设置 为 负数 将 抛 出 一 个 RangeError。 关 于 抛 出 及 捕获 
异 第 的 细 世 可 参阅 Error。 


参阅 

Error 、 Error.message 、 Error.name 
ReferenceError 

读 取 不 存在 的 变量 时 抛 出 

构造 函数 


new ReferenceError() 

new ReferenceError(message) 
pi 

message 


一 条 可 选 的 销 误 消 息 ， 用 于 提供 关于 该 异常 的 细 世 。 如 果 指 定 ， 这 个 
参数 将 用 做 当前 ReferenceError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构造 的 ReferenceError 对 象 。 如 果 指 定 message 参 数 ， 则 对 应 的 
Error 对 象 将 把 它 用 做 自己 的 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 
用 预定 义 的 默认 字符 串 作 为 message 属 性 的 值 。 不 使 用 new 操 作 符 ， 像 
调用 函数 一 样 调用 ReferenceError() 构 造 画 数 时 ， 它 的 行为 和 使 用 new 操 
作 符 调用 时 一 样 。 


属性 


Sh 


message 


一 条 提供 关于 该 异常 的 细节 的 错误 消息 。 这 个 属性 的 值 为 传 入 构造 画 
数 的 字符 串 或 者 是 预定 义 的 默认 字符 串 。 细 节 可 参阅 Errormessage 。 


DiaqIne 


一 个 指定 异常 类 型 的 字符 串 。 所 有 ReferenceError 对 象 的 这 个 属性 都 继 
承 自 值 "ReferenceError"。 


摘 述 


试图 读 一 个 不 存在 的 变量 的 值 时 将 抛 出 一 个 ReferenceError 类 。 天 于 异 
利 的 抛 出 和 捕获 的 细节 可 参阅 Error 。 


参阅 


Error 、 Error.message 、 Error.name 


RegExp 

用 于 模式 匹配 的 正则 表达 式 
直接 量 语法 

/pattern/attributes 

构 千 函数 


new RegExp(pattern,attributes) 


pattern 
一 个 指定 正则 表达 式 的 模式 的 字符 串 或 男 一 个 正则 表达 式 。 
attributes 


一 个 可 选 字符 串 ， 包 含 任意 "g"、"i" 以 及 "m" 属 性 ， 分 别 指定 全 局 、 区 
7 分 大 小 写 以 及 多 行人 本， 在 ECMAScript 杯 准 化 之 前 "m" 属 性 不 可 用 。 如 
果 pattern 参 数 古 一 个 正则 表达 式 而 不 古 了 字符 串 ， 则 这 个 参数 必须 省 略 。 


返回 


一 个 新 的 RegExp 对 象 ， 内 容 为 指定 的 模式 及 标志 。 如 果 pattern 参 数 是 
一 个 正则 表达 式 而 不 是 一 个 字符 串 ， 则 RegExpO 构 造 函 数 将 使 用 和 指 
定 的 RegExp 一 样 的 模式 及 标志 来 创建 一 个 新 的 RegExp 对 象 。 如 果 不 带 
new 操 作 符 ， 像 调用 函数 一 样 调用 RegExp0， 则 它 的 行为 和 带 new 操 作 
符 调用 时 一 样 ， 人 过 ， 当 pattern 是 一 个 正则 表达 式 时 有 所 不 同 ， 在 这 种 
情况 下 它 只 是 简单 地 返回 pattem， 而 不 会 新 创建 一 个 RegExp 对 象 。 


异 篆 
SyntaxError 


如 条 pattern 不 是 一 个 合法 的 正则 表达 式 ， 或 attributes 参 数 包 合 
除 "go 以 及 mn 外 的 字符 。 


TypeError 

如 果 pattern 是 一 个 RegExp 对 象 ， 同 时 没有 省 略 attributes 参 数 。 
实例 属性 

global 

当前 RegExp 对 象 是 否 有 "g" 属 性 。 

ignoreCase 

当前 RegExp 对 象 是 否 有 "i" 属 性 。 

lastIndex 

最 后 匹配 的 字符 的 位 置 ， 用 于 在 字符 串 中 找到 多 个 匹配 的 情况 。 
multiline 


当前 RegExp 对 象 是 否 有 "m" 属 性 。 


source 
对 应 正则 表达 式 的 源 文 本 。 

方法 

exec() 

执行 强大 的 、 通 用 的 模式 匹配 。 
test() 

测试 一 个 字符 串 是 否 包含 某 个 模式 。 
擂 述 


RegExp 对 和 象 代表 一 个 正则 表达 式 ， 这 是 一 个 用 于 在 字符 串 上 执行 强大 
的 模式 匹配 的 工具 。 天 于 正则 表达 式 的 语法 及 使 用 的 完整 细 市 可 参阅 


第 10 章 。 

参阅 

第 10 章 。 
RegExp.exec() 
通用 的 模式 匹配 
概要 


regexp.exec(string) 


string 
要 搜索 的 字符 串 。 
返回 


一 个 包含 匹配 结 末 的 数组 ， 如 果 没 有 找到 匹配 内 容 则 为 null。 返 回 的 效 
组 的 格式 的 摘 述 见 下 面 。 


抛 出 

TypeError 

如 果 在 非 RegExp 对 象 上 调用 这 个 方法 。 

描 壕 

exec(O 是 所 有 RegExp 和 String 模 式 匹 配方 法 中 最 强大 的 一 个 。 它 是 一 个 
通用 的 方法 ， 某 些 地 方 用 起 来 比 RegExp.test0、String.search(O) 、 
String.replace() 以 及 String.match() 更 复杂 。 

exec() 在 string 中 搜索 匹配 regexp 的 文本 。 如 有 果 它 找到 一 个 匹配 项 ， 它 将 


返回 一 个 由 匹配 结 来 组 成 的 数组 ， 否 则 ， 它 将 返回 nul。 返 回 数组 的 元 
素 0 是 匹配 的 文本 。 元 素 1 是 匹配 regexp 中 第 一 个 带 圆 括号 的 子 表 达 式 的 


文本 ， 如 果 存 在 这 样 的 子 表达 式 的 话 。 元 素 2 包 含 匹 配 第 二 个 子 表达 式 
的 文本 ， 依 次 类 推 。 和 通常 一 样 ， 数 组 的 length 属 性 指定 该 数组 中 包含 
的 元 素 个 数 。 除 了 数组 元 素 和 length 属 性 外 ，exec0 返 回 的 值 还 有 另外 
两 个 属性 。index 属 性 指定 匹配 的 文本 的 第 一 个 字符 的 位 置 。input 属 性 
则 指 代 string。 在 一 个 非 全 局 的 RegExp 对 象 上 调用 时 ， 本 函数 返回 的 数 
组 和 String.match() 方 法 返回 的 数组 一 样 。 


在 一 个 非 全 局 的 模式 上 调用 exec() 时 ， 它 将 执行 搜索 并 返回 前 面 描 述 的 
结果 。 不 过 ， 如 果 regexp 是 一 个 全 局 正则 表达 式 ，exec() 的 行为 将 稍微 
复杂 一 点 。 它 从 regexp 的 lastIndex 属 性 指定 的 位 置 开始 搜索 ， 当 它 找 到 
一 个 匹配 项 时 ， 它 将 lastIndex 设 置 为 该 匹配 之 后 的 第 一 个 字符 的 位 置 。 
这 意味 着 可 以 重复 调用 exec()， 以 便 循 环 裔 历 一 个 字符 串 中 所 有 的 匹配 
项 。 如 果 exec() 找 不 到 匹配 项 ， 它 将 返回 null 并 将 lastIndex 重 置 为 0。 如 
果 在 成 功 地 找到 一 个 字符 串 的 匹配 项 后 ， 立 刻 开始 搜索 一 个 新 的 字符 

串 ， 束 必须 小 心地 手动 将 lastIndex 重 置 为 0。 


注意 ，exec0 总 是 包含 它 返回 的 数组 中 的 每 一 个 匹配 项 的 全 部 细节 ， 无 
论 regexp 是 否 为 一 个 全 局 模式 。 这 是 exec0 和 String.match0O) 不 同 的 地 
方 ， 后 者 在 使 用 全 局 匹配 时 只 返回 很 少 的 信息 。 要 想 获 得 一 个 全 局 模 
式 的 完整 匹配 信息 ， 唯 一 的 方法 是 在 一 个 循环 中 重复 调用 exec() 方 法 。 
示例 


人 exec(0) 来 在 一 个 字符 串 中 找到 所 有 匹配 项 。 例 
[: 


Var pattern=/\bJava\w*\b/g; 


Var text="JavaScript is more fun than Java or JavaBeans!",， 


Var result,; 


while((result=pattern.exec(text))!=null){ 


alert("Matched'"+result[0]+ 


"'at position"+result.index+ 


"next search begins at position"+pattern.lastIindex); 


} 


参阅 


RegExp.lastIndex ~ RegExp.test() ~ String.match() 、 String.replace() 、 
String.search()、 第 10 章 


RegExp.global 

正则 表达 式 是 否 为 全 局 匹配 
概要 

regexp.global 

搞 述 


好 obal 是 RegExp 对 象 的 一 个 只 读 的 布尔 值 属性 。 它 指定 一 个 特殊 的 正则 
表达 式 是 否 执行 全 局 匹配 ， 也 就 是 说 ， 创 建 它 时 是 否 带 有 "g" 属 性 。 


RegExp.ignoreCase 

一 个 正则 表达 式 是 否 忽 上 略 大 小 写 
概要 

regexp.ignoreCase 

搬 述 


ignoreCase 是 RegExp 对 象 的 一 个 只 读 的 布尔 值 属 性 。 它 指定 一 个 正则 表 
00 也 就 是 说 ， 创 建 它 时 是 否 带 有 "i" 属 


RegExp.lastIndex 


下 一 个 匹配 开始 的 位 置 
概要 

regexp.lastIndex 

摘 述 


lastIndex 是 RegExp 对 象 的 一 个 可 读 / 写 的 属性 。 对 设置 "g" 属 性 的 正则 表 
达 式 而 言 ， 它 的 值 为 一 个 数字 ， 指 定 RegExp.exec() 和 RegExp.test() 方 法 
最 后 一 个 匹配 项 之 后 的 第 一 个 字符 的 位 置 。 这 些 方法 使 用 这 个 属性 作 

为 它们 下 一 次 搜索 的 开始 位 置 。 这 人 允许 重复 调用 这 些 方法 ， 来 循环 志 

历 一 个 字符 串 中 的 所 有 匹配 项 。 注 意 ， 那 些 没有 设置 "g" 属 性 的 非 全 局 
模式 对 应 的 RegExp 对 象 不 会 使 用 lastIndex。 


这 个 属性 是 可 读 / 写 的 ， 所 以 可 以 在 任何 时 候 设置 它 ， 以 便 定义 下 一 次 
搜索 在 目标 字符 串 中 的 开始 位 置 。exec() 和 test() 在 没 找 到 匹配 项 (或 另 
一 个 匹配 项 ) 时 会 自动 将 lastIndex 设 置 为 0。 如 果 在 一 次 成 功 的 匹配 之 
后 搜索 一 个 新 的 字符 串 ， 一 般 需 要 显 式 地 把 这 个 属性 设置 为 0。 


参阅 


RegExp.exec() ~ RegExp.test() 

RegExp.source 

正则 表达 式 的 文本 

概要 

regexp.source 

搬 述 

source 是 RegExp 对 象 的 一 个 只 该 字符 串 属 性 。 它 的 值 为 该 RegExp 模 式 


的 文本 内 容 。 这 个 文本 不 包括 正则 表达 式 直接 量 中 的 分 隔 斜 杠 ， 也 不 
包含"g"、 以 及 "mm" 属 性。 


RegExp.test() 


测试 一 个 字符 串 是 否 匹 配 一 个 模式 
概要 


regexp.test(string) 


string 

待 测试 的 字符 串 。 

返回 

如 条 string 包 含 匹 配 regexp 的 文本 则 返回 true; 否则 返回 false。 


世人 
天 吊 


TypeError 
如 果 在 一 个 非 RegExp 对 象 上 调用 这 个 方法 。 
搞 述 


test(O 用 于 测试 字符 串 string 是 否 包含 匹配 regexp 的 文本 。 如 果 包 合 ， 写 
返回 true; 否则 ， 它 返回 false。 调 用 一 个 RegExp 对 象 r 的 test0) 方 法 并 传 
入 字符 串 s 等 同 于 下 面 的 表达 式 : 


(r.exec(s)!=null) 


示例 


var pattern=/java/i; 


pattern.test("JavaScript");// 返 回 true 


pattern.test("ECMAScript");// 返 回 false 


参阅 


RegExp.exec() ~ RegExp.lastIndex 、 String.match() 、 String.replace() 、 
String.substring()、 第 10 章 


RegExp.toString() 

将 一 个 正则 表达 式 转换 为 字符 串 

重 写 Object.toString() 

概要 

regexp.toString() 

返回 

regexp 的 字符 串 表 示 。 

异 篆 

TypeError 

如 采 在 一 个 非 RegExp 对 象 上 调用 这 个 方法 。 

摘 述 

RegExp.toString() 方 法 使 用 正则 表达 式 直 搂 量 的 格式 返回 一 个 正则 表达 
式 的 字符 串 表 示 。 注 意 ， 这 个 方法 的 实现 上 并 不 要 求 添 加 转 义 序列 ， 
以 便 傈 证 返回 的 字符 串 是 合法 的 正则 表达 式 直 接 量 。 设 想 由 表达 了 式 new 
RegExp("",，"g") 创 建 的 正则 表达 式 ，RegExp.toString0 的 一 个 实现 可 能 
会 返回 Wg; 它 也 可 能 添加 一 个 转 义 序列 并 返回 NM/g 。 

String 

字符 串 文 持 


构 千 函数 


new String(s)// 构 造 函 数 


function String(s)// 转 换 画 数 


竺 存储 到 一 个 String 对 象 中 或 转换 为 一 个 原始 字符 串 的 值 。 

返回 

当 使 用 new 操 作答 将 String0 作 为 一 个 构造 钞 数 使 用 时 ， 它 将 返回 一 个 
String 对 象 ， 内 容 为 字符 串 s 或 的 字符 串 表 示 。 当 不 带 new 操 作 符 调用 
0 


属性 

length 

该 字符 串 中 的 字符 数 。 

方法 

charAt() 

取出 一 个 字符 串 中 指定 位 置 的 字符 。 
charCodeAt() 

返回 一 个 字符 串 中 指定 位 置 的 字符 的 编码 。 
concat() 

将 一 个 或 多 个 值 连接 成 一 个 字符 串 。 


indexOf() 


在 指定 字符 果 中 寻找 一 个 字符 或 子 串 。 
lastIndexOf() 
在 指定 字符 串 中 辐 后 寻找 一 个 字符 或 子 串 。 


localeComparel() 
使 用 本 地 定义 的 顺序 比较 字符 串 。 
match() 


使 用 正则 表达 式 执行 模式 匹配 。 

replace() 

使 用 正则 表达 式 执行 查找 与 替换 操作 。 

search() 

在 一 个 字符 串 中 查找 匹配 某 个 正则 表达 式 的 子 串 。 
slice() 

返回 字符 串 的 一 个 切片 或 子 串 。 

split() 


在 指定 的 分 隔 符 字符 串 或 正则 表达 式 处 断 开 ， 将 一 个 字符 串 分 割 为 由 
字符 串 组 成 的 数组 。 


substr() 
提取 字符 串 的 一 个 子 串 ，substring0 的 一 个 变 体 。 
substring() 


提取 字符 串 的 一 个 子 串 。 


toLowerCase() 


返回 指定 字符 串 的 一 份 副 本 ， 其 中 所 有 的 字符 都 已 转换 为 小 写 。 
toString() 
返回 原始 的 字符 串 值 。 


toUpperCase() 

返回 指定 字符 串 的 一 份 副本 ， 其 中 所 有 的 字符 都 已 转换 为 大 写 。 
trim() 

返回 指定 字符 串 的 一 份 副本 ， 其 中 前 后 的 空白 字符 都 已 删除 。 
valueOf() 

返回 原始 的 字符 串 值 。 

静态 方法 

String.fromCharCodel() 

使 用 作为 参数 传 入 的 字符 编码 创建 一 个 新 的 字符 串 。 

HTML 方法 


从 早期 的 JavaScript 开 始 ，String 类 束 定 义 了 符 干 方法 ， 将 字符 串 置 入 
HTML 标 签 以 返回 一 个 修改 的 字符 串 。 这 些 方 法 一 直 没 有 成 为 
ECMAScript 的 标准 ， 但 在 客户 问 或 服务 絮 病 的 JavaScript 代 码 中 动态 生 
成 HIML 时 非常 有 用 。 如 果 想 使 用 非 标准 的 方法 ， 可 以 使 用 类 似 这 样 的 
代码 来 创建 一 个 粗 体 的 红色 的 超 链 接 的 HTML 源码 : 


Var s="click here!",， 


var html=s.bold().1link("javascript:alert('hello')").fontcolor("red"); 


人 条目 


anchor(name) 


返回 该 子 符 串 的 一 个 副本 ， 


big() 


返回 该 字符 串 的 一 个 副本 ， 


blinkO) 


退回 该 字符 串 的 一 个 副本 ， 


bold0) 
返回 该 字符 串 的 一 个 副本 ， 
fixed() 


返回 该 字符 串 的 一 个 副本 ， 


fontcolor(color) 


返回 该 子 符 串 的 一 个 副本 ， 


fontsize(size) 


返回 该 字符 串 的 一 个 副本 ， 


italics() 


返回 该 子 符 串 的 一 个 副本 ， 


link(url) 


返回 该 字符 串 的 一 个 副本 ， 


small() 


由 于 这 这 些 不 是 标准 方法 ， 因 此 在 接 下 来 的 页 面 中 它们 没有 单独 的 参考 


在 一 个 <aname= 环 境 中 。 


在 一 个 <big> 环 境 中 。 


在 一 个 <blink > 环境 中 。 


在 一 个 <b> 环境 中 。 


在 一 个 <tt> 环境 中 。 


在 一 个 <font color= > 环境 中 。 


在 一 个 <font size= > 环境 中 。 


在 一 个 <i> 环境 中 。 


在 一 个 <ahref= > 环境 中 。 


退回 该 字符 哩 的 一 个 副本 ， 在 一 个 <small > 环境 中 。 
strike() 

退回 该 字符 串 的 一 个 副本 ， 在 一 个 <strike> 环 境 中 。 
sub() 


返回 该 子 符 串 的 一 个 副本 ， 在 一 个 <sub> 环 境 中 。 


返回 该 字符 串 的 一 个 副本 ， 在 一 个 <sup > 环境 中 。 
搞 述 


String 是 JavaScript 中 的 一 种 原始 数据 类 型 。String 类 类 型 提供 了 知 干 操 
作 原 始 字符 串 值 的 方法 。String 对 象 的 length 属 性 指定 该 字符 串 中 的 字 
符 的 个 数 。String 类 也 定义 奉 干 操作 字符 串 的 方法 ， 例 如 ， 有 一 些 从 字 
符 串 中 提取 字符 或 子 串 的 方法 ， 还 有 一 些 从 字符 串 中 搜索 字符 或 子 串 
的 方法 。 注 意 ，JavaScript 的 字符 串 是 不 可 变 的 : String 类 的 所 有 方法 都 
不 允许 改变 某 个 字符 串 的 内 容 。 那 些 像 String.toUpperCase0) 之 类 的 方法 
返回 一 个 全 新 的 字符 串 ， 而 没有 修改 原始 字符 串 。 


在 ECMAScript 5 以 及 许多 早 于 ES5 的 JavaScript 实 现 中 ， 字 符 串 的 行为 类 
似 于 每 个 元 素 为 一 个 单字 符 的 字符 串 中 只 读数 组 。 例 如 ， 要 提取 字符 
串 s 的 第 三 个 字符 ， 可 以 使 用 s[2] 来 代替 s.charAt(2)。 在 一 个 字符 串 上 使 
用 forvin 语 名 时， 它 将 遍历 该 字符 串 中 的 每 一 个 字符 。 


参阅 


第 3 章 。 
String.charAt() 
取得 一 个 字符 串 中 第 "mw" 个 字符 


概要 


string.charAt(n) 


希望 返回 的 字符 在 子 符 串 string 中 的 索引 。 


返回 
字符 串 string 的 第 n 个 字符 。 


String.charAtO 返 回 字 符 串 string 中 的 第 n 个 字符 。 字 符 串 的 第 一 个 字符 的 
编号 为 0。 如 果 n 不 在 0~string.length-1 之 间 ， 这 个 方法 将 返回 一 个 空 字 
符 串 。 注 意 ，JavaScript 中 并 没有 字符 数据 类 型 ， 所 以 返回 的 字符 实际 
上 是 一 个 长 度 为 1 的 字符 串 。 


参阅 


String.charCodeAt() 、 String.indexOf() 、 String.lastIndexOf() 
String.charCodeAt() 

取得 字符 串 中 第 n 个 字符 的 编码 

概要 


string.charCodeAt(n) 


待 返回 编码 的 字符 的 索引 。 


高 
回 


string 中 第 n 个 字符 的 Unicode 编 码 。 返 回 的 值 是 一 个 16 位 的 整数 ， 值 在 0 
~ 65 535 之 间 。 


描述 

charCodeAt() 类 似 charAt()， 不 同 之 处 是 它 返 回 指定 位 置 的 字符 的 编码 ， 
而 不 返回 包含 该 字符 的 子 串 。 如 果 n 为 负数 或 大 于 等 于 字符 串 的 长 度 ， 
则 charCodeAt() 将 返回 NaN 。 

关于 从 Unicode 编 码 创建 字符 串 的 方法 可 参阅 String.fromCharCode0) 。 


参阅 


String.charAt() ~、 String.fromCharCodel() 


String.concat() 


连接 字符 串 

概要 

string.concat(value,...) 

参数 

value 

一 个 或 多 个 竺 连接 为 字符 串 的 值 。 

返回 

由 每 个 参数 连接 为 string 而 组 成 的 新 的 字符 串 。 
搞 述 


concat(0 将 它 的 每 个 参数 转换 为 字符 串 〈 如 条 必要 的 话 ) 并 将 它们 按 顺 
。 它 返回 最 后 的 连接 结果 。 注 意 string 本 喘 没 有 被 
改变 。 


String.concat() 与 Array.concat() 类 似 。 注 意 使 用 “+” 操 作 符 来 执行 字符 串 
连接 经 常 更 简单 一 些 。 


参阅 

Array.concat() 
String.fromCharCodel() 

从 字符 编码 创建 一 个 字符 串 
概要 


String.fromCharCode(c1,c2,…) 


指定 待 创建 字符 串 中 的 字符 的 Unicode 编 码 ， 一 个 或 多 个 整数 。 

返回 

一 个 新 的 字符 串 ， 内 容 为 指定 编码 对 应 的 字符 。 

描述 

这 个 静态 方法 提供 一 个 通过 指定 每 个 字符 的 Unicode 编 码 数 字 来 创建 字 
符 串 的 方式 。 注 意 ， 作 为 一 个 静态 方法 ，fromCharCode0 是 String(0 构 造 

画 数 的 全 个 必 性 ， 实 际 上 不 是 字符 串 或 String 对 象 的 方法 。 


String.charCodeAt() 与 这 个 方法 对 应 ， 它 提供 一 个 取得 指定 字符 串 中 单 
个 字符 的 编码 的 方法 。 


示例 


// 创 建 字 符 串 "he11o" 


var s=String.fromCharCode(104,101,108,108,111); 


参阅 
String.charCodeAt() 
String.indexOf() 

搜索 一 个 字符 串 

概要 
string.indexOf(substring) 


string.indexOf(substring, start) 


参数 

substring 

要 在 string 中 搜索 的 于 串 。 
start 


一 个 可 选 的 整数 参数 ， 指 定 该 次 搜索 在 字符 串 string 中 的 开始 位 置 。 合 
法 的 值 为 0 (字符 串 中 的 第 一 个 字符 的 位 置 ， 到 string.length-1 (字符 串 
中 最 后 一 个 字符 的 位 置 ) 。 如 果 省 略 了 这 个 参数 ， 则 搜索 将 从 给 定 字 

符 串 的 第 一 个 字符 开始 。 

返回 

在 字符 串 string 中 start 位 置 之 后 ，substring 第 一 次 出 现 的 位 置 ， 如 果 没 有 
找到 则 返回 -1 。 

描述 


String.indexOfO 搜 索 指 定 的 字符 串 string， 从 前 到 后 搜索 ， 检 查 它 是 否 
包含 指定 的 子 串 substring。 搜 索 开 始 于 string 中 的 start 位 置 ， 如 采 没 有 指 


定 start 则 从 string 的 开头 开始 搜索 。 如 果 发 现 了 子 串 substring， 则 
String.indexOf() 将 返回 substring 在 string 中 第 一 次 出 现时 第 一 个 字符 所 在 
的 位 置 。string 中 字符 的 位 置 从 0 开始 编号 。 

如 果 在 string 中 没有 找到 substring， 则 String.indexOfO 返 回 -1。 

参阅 

String.charAt() 、 String.lastIndexOf() 、 String.substring() 
String.lastIndexOf() 

从 后 面 开 始 搜 索 一 个 字符 串 

概要 


string.lastIndexOf(substring) 


string.lastIndexOf(substring,start) 


substring 

要 在 字符 串 string 中 搜索 的 子 串 。 

Start 

一 个 可 选 的 整数 参数 ， 指 定 string 中 搜索 开始 的 位 置 。 合 法 值 为 0 (该 字 
符 串 中 第 一 个 字符 的 位 置 ) 到 string.length-1 《该 字符 串 中 最 后 一 个 字符 
的 位 置 ) 。 如 果 省 略 这 个 参数 ， 它 将 从 字符 串 string 的 最 后 一 个 字符 开 
从 搜索 。 

返回 


子 串 substring 在 字符 串 string 的 start 位 置 之 前 最 后 一 次 出 现 的 位 置 ， 如 果 
没有 找到 则 返回 -1。 


摘 述 


String.lastImndexOfO 从 字符 串 string 的 结尾 开始 搜索 到 开头 ， 检 查 它 是 否 
包含 子 串 substring。 搜 索 开 始 于 字符 串 string 中 的 start 位 置 ， 如 有 末 没 有 指 
定 start 则 开始 于 string 的 尾部 。 如 果 找 到 子 串 substring， 则 
String.lastIndexOf() 将 运 回 该 子 串 的 第 一 个 字符 的 位 置 。 由 于 本 方法 从 
字符 串 string 的 末尾 搜索 到 开头 ， 因 此 找到 的 第 一 个 匹配 子 串 将 是 string 
中 start 位 置 前 的 最 后 一 个 匹配 。 

如 条 没 有 找到 指定 子囊 ， 则 String.lastIndexOfO 将 返回 -1。 

注意 ， 虽 然 String.lastIndexOfO 从 字符 串 string 的 末尾 搜索 到 开始 ， 它 仍 
然 将 string 中 的 字符 从 开头 开始 编号 。string 中 的 第 一 个 字符 的 位 置 为 
0， 最 后 一 个 的 位 置 为 string.length-1。 

参阅 

String.charAt() 、 String.indexOf() 、 String.substring() 

String.length 

一 个 字符 种 的 长 度 

概要 

string.length 

描述 

String.length 属 性 是 一 个 只 读 的 整数 ， 指 明 指 定 的 字符 串 string 中 的 字符 
个 数 。 对 任意 字符 串 s 来 说 ， 最 后 一 个 字符 的 索引 都 是 slength-1。 字 符 
串 的 length 属 性 不 会 在 fovin 循 环 中 枚 举 ， 也 不 可 通过 delete 操 作 符 删 
除 。 

String.localeCompare() 

使 用 本 地 特定 的 顺序 比较 两 个 字符 串 

概要 


string.localeCompare(target) 


target 
要 与 string 使 用 区 分 地 区 设置 的 方式 比较 的 字符 串 。 
返回 


一 个 表示 比较 结果 的 数字 。 如 果 string 比 target“ 小 "， 则 localCompare0O 将 
返回 一 个 比 0 小 的 数 。 如 果 string 比 target“ 大 ”， 则 本 方法 将 返回 一 个 比 0 
大 的 数 。 如 果 这 两 个 字符 串 相 同 ， 或 者 根据 本 地 顺序 约定 无 法 区 分 ， 

则 本 方法 返回 0。 


描述 
当 在 字符 串 上 使 用 "< "或 > ”操作 符 时 ， 它 们 只 比较 这 些 字符 的 
Unicode 编 码 ， 而 不 考虑 本 地 的 顺序 。 这 种 方式 产生 的 顺序 并 不 总 是 正 
确 。 比 如 ， 在 西班牙 语 中 ， 字 母 "dh" 习惯 上 当做 一 个 单独 的 字母 ， 排 在 
字符 "c" 和 "d" 之 间 。 

localeCompare0) 提 供 了 一 个 根据 默认 的 本 地 排序 来 比较 字符 串 的 方法 。 
ECMAScript 标 准 没有 指定 本 地 化 比较 如 何 完成 ， 这 个 画 数 利用 底层 的 
操作 系统 提供 的 排序 。 

示例 


下 面 的 代码 将 使 用 本 地 化 顺序 来 排序 一 个 字符 串 数 组 : 


var strings;// 待 排序 的 字符 串 数组 ， 已 在 别处 初始 化 


strings.sort(function(a,b){return a.localeCompare(b)}); 


String.match() 
找到 一 个 或 多 个 正则 表达 式 匹 配 结果 
概要 


string.match(regexp) 


regexp 


一 个 指定 要 匹配 的 模式 的 RegExp 对 象 。 如 有 果 这 个 参数 不 是 一 个 RegExp 
对 象 ， 则 它 将 先 被 传人 RegExp(O 构 造 画 数 ， 后 转换 为 RegExp 对 象 。 


返回 


一 个 包含 匹配 结果 的 数组 。 数 组 的 内 容 取 决 于 regexp 是 否 设置 了 "g" 属 
性 。 关 于 返回 值 的 细节 在 下 面 的 描述 部 分 。 


摘 述 


match(0 在 字符 串 string 中 寻找 一 个 或 多 个 regexp 的 匹配 结果 。 这 个 方法 
ee (关于 正则 表达 式 的 完整 细 万 请 参 
阅 第 10 章 ) 。 


如 有 果 regexp 没 有 "g" 属 性 ，match() 将 只 在 string 中 执行 一 次 匹配 。 如 有 果 没 
有 找到 匹配 结果 ，match() 将 返回 null。 在 其 他 情况 下 ， 它 将 返回 一 个 包 
含 它 所 发 现 的 匹配 结果 的 信息 的 数组 。 该 数组 的 元 素 0 为 匹配 文本 ， 列 
下 的 元 陛 为 匹配 正则 表达 式 中 的 圆 括号 子 表达 式 的 文本 。 除 了 这 些 各 

规 的 数组 元 素 ， 这 个 返回 的 数组 还 有 两 个 额外 的 对 象 属性 。 其 中 index 
BE i i a- 了 匹配 文本 在 string 中 的 开始 位 置 ; input 属 性 则 是 对 该 string 本 


如 果 regexp 有 "g" 标 志 ， 则 match() 将 执行 一 次 全 局 搜索 ， 在 string 中 寻找 
所 有 匹配 的 子 串 。 如 果 没 有 找到 匹配 结果 则 返回 null， 如 有 果 找 到 一 个 或 
多 个 匹配 结果 则 返回 一 个 数组 。 然 而， 全 局 匹配 返回 的 数组 的 内 容 与 
非 全 局 匹配 返回 的 数组 内 容 很 不 一 样 。 在 全 局 匹配 的 情况 下 ， 数 组 元 
素 包 含 string 中 的 每 一 个 匹配 子 串 ， 同 时 返回 的 数组 没有 index 和 input 属 
性 。 注 意 对 于 全 局 匹配 ，match() 不 会 提供 关于 圆 括号 子 表 达 式 的 信 
息 ， 也 不 会 记录 每 个 匹配 子 串 在 string 中 的 位 置 。 如 果 和 希望 在 全 局 搜索 
时 取得 这 些 信息 ， 可 以 使 用 RegExp.exec0O 。 


示例 


下 面 的 全 局 匹配 将 找 出 一 个 字符 串 中 的 所 有 数字 : 


"1 plus 2 equals 3".match(A\d+/g)// 返 回 ["1","2","3"] 


下 面 的 非 全 局 匹配 使 用 更 复杂 的 带 有 圆 括号 子 表达 式 的 正则 表达 式 。 
严 配 一 个 URL 其 子 表 达 式 则 匹配 对 应 的 协议 、 主 机 以 及 该 URL 的 
路 径 部 分 : 


Var url=/(\WWw+):\V\/([\W.]+)\/(\S*)/; 

Var text="Visit my home page at http://www.isp.com/~david"; 
Var resu1lt=text.match(ur1)， 

Ifl(result!=nu11){ 

var fullurl=result[90];// 包 含 "http://www.isp.com/~david" 

var protocol=result[1];// 包 含 "http" 


var host=result[2];// 包 含 "www.isp.com" 


var path=result[3];// 包 含 "~david" 


} 


参阅 


RegExp 、 RegExp.exec() 、 RegExp.test() ~ String.replace()、 
String.search()、 第 10 章 


String.replace() 
替换 匹配 给 定 正 则 表达 式 的 〈 一 个 或 多 个 ) 子 串 


概要 
string.replace(regexp,replacement) 
数 

regexp 


指定 了 要 替换 的 模式 的 RegExp 对 象 。 如 果 这 个 参数 是 一 个 字符 系 ， 它 
本 它 将 不 会 先 较 化 万 RegExp 对 


Sh 


replacement 


一 个 内 容 为 车 换文 本 的 字符 串 ， 或 者 一 个 范 数 ， 用 于 在 调用 时 生成 对 
应 的 替换 文本 。 细 市 可 参阅 描述 部 分 。 


返回 
一 个 新 的 字符 串 ， 其 中 匹配 regexp 的 第 一 个 或 所 有 的 地 方 已 奉 换 为 


replacement ° 
搞 述 


replace() 在 字符 串 string 上 执行 查找 与 替换 的 操作 。 它 在 string 中 搜索 一 
个 或 多 个 匹配 regexp 的 子 串 并 使 用 replacement 蔡 换 。 如 果 regexp 指 定 全 
局 属性 "g"， 则 replace0 将 众 换 所 有 匹配 的 子 串 。 在 其 他 情况 下 ， 它 只 替 
换 第 一 个 匹配 的 子 串 。 


replacement 可 以 是 一 个 字符 串 或 一 个 函数 。 如 采 它 是 一 个 字符 串 ， 则 每 
个 匹配 子 串 都 将 替换 为 该 子 串 。 注 意 replacement 字 符 串 中 的 $ 字 符 有 特 
° 束 像 下 表 显 示 的 ， 它 表示 模式 匹配 中 的 一 个 字符 串 将 在 奉 换 


字符 替换 
$1，$2，,,,，$99 匹配 第 1 ~99 个 regexp 中 的 圆 括 号 子 表达 式 的 文本 


如 匹配 zegexp 的 子 串 

$ 匹配 子 串 的 左边 文本 
由 匹配 子 吕 的 右边 文本 
$4 美元 符号 


ECMAScript 第 3 版 定义 replace0 的 replacement 参 数 可 以 用 一 个 函数 来 代 
楼 字符 串 。 在 使 用 函数 的 情况 下 ， 这 个 函数 将 在 每 个 匹配 结果 上 调 
用 ， 写 返回 的 字符 串 则 将 作为 奉 换 文本 。 传 入 该 函数 的 第 一 个 参数 是 
匹配 该 模式 的 字符 串 。 接 下 来 的 参数 是 匹配 该 模式 中 的 菜 个 圆 括号 子 
表达 式 的 字符 串 ， 可 能 有 0 个 或 多 个 这 样 的 参数 。 下 一 个 参数 则 是 一 个 
整数 ， 指 定 String 中 出 现 匹配 结果 的 位 置 ， 最 后 一 个 参数 是 string 本 喘 。 


示例 
确保 单词 "JavaScript" 的 大 小 写 是 正确 的 : 


text.replace(/javascript/i,"Javascript"); 
将 一 个 单独 的 名 字 从 格式 "Doe,John" 转 换 为 "John Done" 格 式 : 


name.replace(/(\w+)\s*,\s*(\w+)/,"$2$1"); 


将 所 有 双 引 号 车 换 为 成 对 的 前 后 单 引号 : 


text.replace(/"([^"]*)"/g,™"" '$1' yy 


将 一 个 字符 串 中 所 有 单词 的 首 字母 大 写 : 


text.replace(/\b\w+\b/g,function(word){ 
return word.substring(0,1).toUpperCase()+ 
word.substring(1); 


}); 


参阅 


RegExp 、 RegExp.exec() ~ RegExp.test() 、 String.match() 、 
String.search()、 第 10 章 


String.search() 
根据 一 个 正则 表达 式 .查找 
概要 


string.search(regexp) 


regexp 


一 个 RegExp 对 象 ， 指 定 要 在 字符 串 string 中 查找 的 模式 。 如 果 这 个 参数 
不 是 一 个 RegExp， 它 将 先 传 入 RegExp() 构 造 画 数 ， 后 转换 为 一 个 
RegExp 对 象 。 


返回 


子 串 的 开始 位 置 ， 如 有 果 没 有 找到 匹配 则 返 
-1 。 


摘 述 


search(0) 在 string 中 寻找 匹配 regexp 的 子囊 ， 并 返回 匹配 子 串 的 第 一 个 字 
符 的 位 置 ， 如 果 没 有 找到 则 返回 -1。 


search() 不 ` 执 行 全 局 匹配 ， 它 会 名 略 g 标 志 。 它 也 会 入 格 regexp 上 ， 
lastIndex 属 性 ， 总 是 从 string 的 开始 位 置 开 始 搜索 ， 这 意味 着 它 总 是 返 
回 string 中 第 一 个 匹配 子 串 的 位 置 。 


示例 


Var S="JavaScript is fun'"， 


J 


s.search(/script/i)// 返 世 


s.search(/a(.)a/)// 返 回 1 


参阅 


RegExp 、 RegExp.exec() ~ RegExp.test() 、 String.match() 、 
String.replace()、 第 10 章 


String.slice() 
提取 一 个 子 串 
概要 


string.slice(start,end) 


切片 开始 的 字符 串 索 引 。 如 采 为 负 ， 则 将 从 该 字符 串 的 尾部 开始 计 
也 就 是 说 ，-1 表 示 最 后 一 个 字符 ，-2 表 示 倒 数 第 二 个 字符 ， 以 此 类 


end 


紧 跟着 切片 结尾 的 字符 串 索 引 。 如 果 不 指定 ， 则 切片 将 包括 从 star 到 当 
前 字符 串 结尾 的 所 有 字符 。 如 果 这 个 参数 是 负 的 ， 则 将 从 该 字符 串 的 
尾部 开始 计算 。 


返回 
一 个 新 的 字符 串 ， 内 容 为 string 中 自 start 位 置 开 始 并 且 包 含 start 位 置 ， 直 
到 但 不 包含 end 位 置 的 所 有 字符 。 

描述 


slice() 返 回 一 个 字符 串 ， 内 容 为 string 的 一 个 切片 或 子囊 。 它 不 修改 


string ° 


String 的 方法 slice()、substring() 以 及 弃 用 的 substr(0) 都 返回 一 个 字符 串 的 
指定 部 分 。slice() 比 substring() 更 灵活 ， 因 为 它 允 许仙 参数 值 。slice() 与 
substr0 的 不 同 之 处 是 ， 前 者 通过 两 个 字符 位 置 来 定义 一 个 和子 串 ， 而 后 
者 ， 一 个 位 置 和 一 个 长 度 。 也 请 注意 ，String.slice0 和 Array.slice() 非 
第 类 似 。 


示例 


Var s="abcdefg"; 


s .slice(0,4)// 返 回 "abcd" 


s.Slice(2,4)// 返 回 "cd" 


Ss .Slice(4)// 返 回 "efg" 


s.slice(3, -1)// 返 回 "def" 


s.SsSlice(3,-2)// 返 回 "de" 


s.Slice(-3,-1)// 应 该 返回 "ef"; 但 在 IE 4 中 返回 "abcdef" 


bug 


IE4 中 如 采 start 为 负数 将 出 现 错 误 (不 过 之 后 的 正版 本 中 没有 这 个 问 
题 ) 。 它 不 是 从 字符 串 的 尾部 开始 计算 ， 而 是 从 位 置 为 0 的 字符 开始 。 


参阅 

Array.slice() 、 String.substring() 

String.split() 

将 一 个 字符 串 切 分 为 一 个 由 字符 串 组 成 的 数组 
概要 


string.split(delimiter,limit) 


delimiter 

string 切 分 处 的 字符 串 或 正则 表达 式 。 

limit 

这 个 可 选 的 整数 指定 已 返回 数组 的 最 大 长 度 。 如 采 指 定 ， 则 最 多 返回 
数量 为 这 个 数字 的 子 串 。 如 采 没 有 指定 ， 则 将 切 分 整个 字符 串 ， 无 论 
结果 数组 有 多 长 。 

返回 

一 个 由 字符 串 组 成 的 数组 ， 通 过 在 由 delimiter 界 定 的 边界 处 切 分 string 


为 子 串 创建 。 返 回 数 组 中 的 子囊 不 包 售 delimiter 本 身 ， 除 非 是 下 面 描 述 
部 分 中 提 到 的 例外 情况 。 


摘 述 


split0 方 法 创建 并 返回 一 个 数组 ， 内 容 为 至 多 limit 个 给 定 的 子 符 串 string 
的 子 串 。 这 些 子 串 是 这 样 创建 的 : 从 string 的 开头 搜索 到 结尾 ， 在 所 有 
匹配 delimiter 的 文本 的 前 方 及 后 方 断 开 。 分 割 文本 不 包含 在 返回 的 子 串 
中 ， 除 了 在 本 市 结 尾 处 提 到 的 例外 。 


注意 ， 如 果 分 隔 符 (delimiter) 匹配 给 定 字 符 串 的 开头 内 容 ， 则 返回 数 

组 的 第 一 个 元 聚 将 是 空 字符 串 一 一 出 现在 分 阳 从 之 前 的 文本 。 类 似 

地 ， 如 采 分 隅 符 匹 配 该 字符 串 的 末尾 ， 则 返回 数组 的 最 后 一 个 元 素 
(假设 与 limit 不 冲突 ) 将 是 空 字符 串 。 


如 果 没 有 指定 delimiter， 则 字符 串 string 将 不 会 切 分 ， 返 回 的 数组 将 只 
包含 一 个 未 切 分 的 字符 串 元 素 。 如 果 delimiter 为 空 字 符 串 或 是 一 个 匹配 
空 字 符 串 的 正则 表达 式 ， 则 字符 串 string 将 在 每 个 字符 之 间断 开 ， 返 回 
的 数组 将 与 string 拥 有 一 样 的 长 度 ， 当 然 ， 这 是 在 假设 没有 指定 更 小 的 
limit 的 情况 下 。 (注意 这 是 一 个 特例 ， 因 为 第 一 个 字符 之 前 和 最 后 一 
个 字符 之 后 的 空 字 符 不 匹配 。) 

束 像 前 面 提 人 到 的 ， 本 方法 返回 的 数组 中 的 子 串 不 包含 用 来 切 分 该 子 符 
串 的 分 陋 文 本 。 不 过 ， 如 果 delimiter 是 一 个 包含 圆 括号 表达 式 的 正则 表 
达 式 ， 则 匹配 这 些 圆 括号 表达 式 的 子 串 (但 不 是 匹配 整个 正则 表达 式 
的 文本 ) 将 包含 在 返回 的 数组 中 。 

注意 String.split0 方 法 是 Array.join0 方 法 的 反方 法 。 

示例 


在 处 理 高 度 结 构 化 的 字符 串 时 ，split0 方 法 非常 有 用 。 例 如 : 


"1:2:3:4:5".Split(":");// 返 下 EE p23 A 5 ] 


"alblcl".split("|");// 返 下 | "a", "bp™, To, | 


split0) 方 法 男 一 个 第 用 的 场景 古 解析 命令 或 类 似 的 子 符 串 ， 方 法 是 将 它 
们 在 空 日 处 断 开 为 单词 : 


var words=sentence.split("''); 


用 正则 表达 式 作 为 分 隅 符 将 子 符 串 切 分 为 单词 更 容易 : 


Var words=sentence.split(/\s+/); 


要 将 一 个 字符 串 切 分 为 由 字符 组 成 的 数组 ， 可 使 用 空 字符 串 作为 分 隔 
符 。 如 果 只 想 将 字符 串 的 一 个 前 级 切 分 为 由 字符 组 成 的 数组 ， 可 以 使 
用 1limit 参 数 : 


"nello" .Split("");// 返 口 ["h", "e", SE i "o"] 


"hello" .Split("",3);// 返 口 ["h", "e", "1"] 


如 琳 硕 望 返回 的 数组 中 包含 分 隔 符 或 分 隔 符 的 一 个 或 多 个 部 分 ， 可 以 
使 用 带 圆 括号 子 表达 式 的 正则 表达 式 。 例 如 ， 下 面 的 代码 将 一 个 字符 
串 在 HTML 标 签 处 断 开 ， 同 时 在 返回 的 数组 中 包含 这 些 标签 : 


Var text="helL1o<b>wor1ld</b>"， 


text.split(/(<[^>]*>)/);// 返 回 ["hello","<b>", "world","</b>",""] 


参阅 

Array.join()、RegExp、 第 10 章 
String.substr() 

已 弃 用 

提取 二 个 于 归 


概要 


string.substr(start,length) 


start 


子 串 的 开始 位 置 。 如 采 这 个 参数 是 负数 ， 则 将 从 string 的 尾部 开始 计 
算 : -1 表示 最 后 一 个 字符 ，-2 表 示 倒 数 第 二 个 字符 ， 以 此 类 推 。 


length 


该 子 串 中 的 字符 数 。 如 采 省 略 这 个 参数 ， 则 返回 的 子 串 将 包含 从 开始 
位 置 到 字符 哩 结束 的 所 有 字符 。 


返回 


string 的 一 部 分 的 一 个 副本 ， 包 含 string 中 自 start 位 置 开始 的 length 个 字 
从 ， 如 果 示 指定 length 则 包含 目 start 到 结尾 的 所 有 字符 。 


描述 

substr0 从 string 中 提取 并 返回 一 个 子 串 。 它 并 不 修改 string 本 号 。 

注意 ，substr0 通 过 一 个 开始 字符 的 位 置 以 及 长 度 来 指定 期 望 取得 的 子 
串 。 这 与 String.substring0 和 String.splice(0) 不 同 并 且 有 时 会 很 有 用 ， 后 两 
者 是 通过 指定 两 个 字符 的 位 置 来 定义 一 个 子囊。 不 过 需要 注意 ， 这 个 
方法 不 再 是 ECMAScript 的 标准 ， 因 此 已 充 用 。 


示例 


Var s="abcdefg",; 


s.substr(2,2);// 返 回 "cd" 


s.substr(3);// 返 回 "defg" 


s .Substr(-3,2);// 应 该 返回 "ef"; 但 在 IE 4 中 返回 "ab" 


bug 


在 正中 传 入 负 的 start 不 会 正 肖 工作， 它们 不 是 从 string 的 尾部 开始 计算 
字符 位 置 ， 而 是 从 位 置 0 开 始 。 


参阅 

String.slice() 、 String.substring() 
String.substring() 

返回 字符 串 的 一 个 子 串 

概要 


string.substring(from,to) 


from 
一 个 非 负 整数 ， 指 定 要 提取 的 子 串 的 第 一 个 字符 在 string 中 的 位 置 。 
to 


一 个 非 负 整数 ， 比 要 提取 的 子 串 的 最 后 一 个 字符 的 位 置 大 1。 如 琳 省 略 
这 个 参数 ， 则 返回 的 子 串 将 持续 a 到 string 的 结尾 。 


返回 


一 个 新 的 字符 串 ， 长 度 为 to-from， 内 容 为 string 的 一 个 子 串 。 新 字符 串 
的 内 容 为 string 中 从 位 置 from 到 to-1 的 字符 的 副本 。 


摘 述 


String.substring() 返 回 string 中 位 置 fom 与 to 之 间 的 字符 组 成 的 子 串 。 包 
含 位 置 from 处 的 字符 ， 但 不 包含 位 置 to 处 的 字 答 。 


如 果 from 等 于 to， 则 这 个 方法 将 返回 一 个 空 (长 度 为 0 的 ) 字符 串 。 如 
时 fom 比 大 ， 这 个 方法 将 针 交 所 两 个 参数 的 值 ， 然 后 返回 它们 之 间 的 
子 串 。 

子 串 中 包含 位 置 from 处 的 字符 ， 但 不 包含 to 处 的 字符 ， 记 住 这 一 点 很 重 
要 。 这 看 起 来 有 些 随意 或 违反 直觉 ， 不 过 这 个 体系 的 一 个 值得 注意 的 
特性 是 ， 返 回 的 子 串 的 长 度 总 是 等 于 to-from 。 


注意 String.slice0 和 非 标 准 的 String.substr() 也 能 从 字符 串 中 提取 子 串 。 
但 和 这 些 方法 不 同 ，String.substring() 不 接受 负 参 数 。 


参阅 


String.charAt() ~、 String.indexOf() 、 String.lastIndexOf() 、 String.slice() 、 
String.substr() 


String.toLocaleLowerCase() 

将 一 个 字符 串 转 为 小 写 

概要 

string.toLocaleLowerCase() 

返回 

string 的 一 个 副本 ， 其 中 字符 都 已 经 以 本 地 化 的 方式 转换 为 小 写字 母 。 
只 有 一 小 部 分 语言 (如 土耳其 语 ) 有 本 地 化 的 大 小 写 上 映射 ， 所 以 这 个 
方法 一 般 和 toLowerCase() 返 回 的 内 容 相同 。 


参阅 


String.toLocaleUpperCase() ~ String.toLowerCase() 、 String.toUpperCasel() 
String.toLocaleUpperCasel() 

将 一 个 字符 串 转 为 大 写 

概要 


string.toLocaleUpperCase() 

返回 

string 的 一 个 副本 ， 其 中 字符 都 已 经 以 本 地 化 的 方式 转换 为 大 写字 母 。 
只 有 一 小 部 分 语言 (如 土耳其 语 ) 有 本 地 化 的 大 小 写 映 射 ， 所 以 这 个 
方法 一 般 和 toLowerCase() 返 回 的 内 容 相同 。 


参阅 


String.toLocaleLowerCase() 、 String.toLowerCase() 、 String.toUpperCasel() 
String.toLowerCasel() 

将 一 个 字符 串 转 换 为 小 写 

概要 

string.toLowerCasel() 

返回 


string 的 一 个 副本 ， 如 果 其 中 有 大 写字 母 ， 则 大 写字 母 都 已 转换 为 对 应 
的 小 写 形式 。 


String.toString() 

返回 对 应 字符 串 

重 写 Object.toString() 

概要 

string.toString() 

返回 

string 的 原始 字符 串 值 。 很 少 需要 调用 这 个 方法 。 


异常 

TypeError 

如 果 在 一 个 非 String 对 象 上 调用 这 个 方法 。 
参阅 

String.valueOf() 

String.toUpperCase() 

将 一 个 字符 果 转 换 为 大 写 

概要 

string.toUpperCase() 

返回 


string 的 一 个 副本 ， 如 果 其 中 有 小 写字 母 ， 则 小 写字 母 都 已 转换 为 对 应 
的 大 写 形式 。 


String.trim() 

去 掉 开 头 和 结尾 处 的 空白 字符 

概要 

string.trim() 

返回 

string 的 一 个 副本 ， 其 中 开头 和 结尾 处 的 空白 字符 都 已 移 除 。 
参阅 


String.replace() 


String.valueOf() 

返回 对 应 的 字符 串 

重 写 Object.valueOf 

概要 

string.valueOf() 

返回 

string 的 原始 字符 串 值 。 
异 凶 

TypeError 

如 果 在 一 个 非 String 对 象 上 调用 这 个 方法 。 
参阅 

String.toString() 
SyntaxError 

抛 出 以 便 通 知 一 个 语法 错误 
构造 画 数 

new SyntaxError() 

new SyntaxError(message) 
数 

message 


一 条 可 选 的 错误 消息 ， 提 供 关 于 该 异常 的 详细 信息 。 如 果 指 定 ， 则 这 
个 参数 将 用 做 对 应 的 SyntaxError 对 象 的 message 属 性 的 值 。 


Sh 


返回 

一 个 新 构造 的 SyntaxError 对 象 。 如 果 指 定 message 参 数 ， 则 该 Error 对 象 
将 使 用 它 作 为 目 己 的 message 属 性 的 值 ; 在 其 他 情况 下 ， 它 将 使 用 一 个 
预定 义 的 默认 字符 串 作 为 该 属性 的 值 。 当 不 使 用 new 操 作 符 将 
SyntaxError(0 构 造 函 数 作为 一 个 函数 调用 时 ， 它 的 行为 和 使 用 new 操 作 
符 时 一 样 。 

属性 

message 

一 条 提供 天 于 该 异 沼 的 细节 的 错误 消 妃 。 这 个 属性 的 值 为 传 入 构造 孙 
数 的 字符 串 的 值 ， 或 者 为 预定 义 的 默认 字符 串 。 细 廊 可 参阅 


Error.message ° 


name 


一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 SyntaxError 对 象 的 这 个 属性 的 
都 继承 目 值 "SyntaxError" o 


描述 

在 JavaScript 代 码 中 ，SyntaxError 类 的 实例 用 于 在 通知 语法 错误 时 抛 

出 。eval(0 方 法 、Function0 构 造 丽 数 以 及 RegExp0 构 造 本 数 都 可 能 抛 出 
这 种 类 型 的 异常 。 天 于 异常 的 抛 出 及 捕获 的 细节 可 参阅 Error 。 


参阅 


Error 、 Error.message 、 Error.name 
TypeError 

当 一 个 值 类 型 错误 时 抛 出 

构造 函数 


new TypeError() 


new TypeError(message) 
数 
message 


一 条 可 选 的 错误 消 忌 ， 提 供 天 于 该 异常 的 细 广 。 如 果 指 十， 这 个 参数 
将 用 做 对 应 的 TypeError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构建 的 TypeError 对 象 。 如 果 指 定 message 参 数 ， 则 对 应 的 Error 对 
象 将 把 这 个 参数 用 做 它 的 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 
预定 义 的 默认 字符 串 作为 这 个 属性 的 值 。 当 不 带 new 操 作 符 将 
a 0 构造 画 数 当 做 一 个 函数 调用 时 ， 它 的 行为 和 带 new 操 作 符 调 
用 时 一 样 。 


属性 


Sh 


message 
一 条 提供 关于 该 异常 的 细节 的 错误 消息 。 这 个 属性 的 值 为 传 入 构造 丽 
数 的 字符 串 ， 或 者 为 一 个 预定 义 的 默认 字符 串 。 细 和 可 参阅 


Error.message ° 


name 


一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 TypeError 对 象 的 这 个 属性 都 继 
承 目 值 "TypeError"。 


摘 述 


当 一 个 值 不 是 期 望 的 类 型 时 ， 将 抛 出 TypeError 类 的 一 个 实例 。 通 昔 在 
访问 一 个 值 为 null 或 undefined 的 属性 时 会 发 生 这 个 销 误 。 人 例如， 如果 在 
一 个 类 中 定义 某 个 方法 ， 但 在 另 一 个 类 的 实例 上 调用 这 个 方法 时 ， 或 
者 在 非 构 造 画 数 上 使 用 new 控 作 符 时， 都 会 发 生 这 个 错误 。 当 癌 内 置 的 
函数 或 方法 传 入 多 于 预期 的 参数 时 ，JavaScript 实 现 也 允许 抛 出 
TypeError 对 象 。 关 于 抛 出 和 捕获 异常 的 细节 可 参阅 Error 。 


参阅 

Error 、 Error.message 、 Error.name 

undefined 

未 定义 值 

概要 

undefined 

描述 

undefined 是 一 个 全 局 属性 ， 值 为 JavaScript 未 定义 的 值 。 当 试图 读 一 个 
不 存在 的 对 象 属性 时 ， 返 回 的 就 是 这 个 值 。undefined 属 性 不 可 在 for/in 
循环 中 枚 举 ， 也 不 可 使 用 delete 操 作 符 删除 。 注 意 ，undefined 不 是 一 个 
常量 ， 它 可 以 设置 成 其 他 值 ， 但 你 要 小 心 避免 这 样 的 操作 。 


测试 一 个 值 是 否 为 undefined 时 要 使 用 “===” 探 作 符 ， 因 为 “==?” 操 作 符 会 
把 undefined 值 等 同 于 null 。 


unescape() 

已 茎 用 
解码 一 个 编码 的 字符 串 
概要 


Unescape(S) 


待 解码 的 字符 串 。 
返回 


解码 后 的 s 的 一 个 副本 。 
摘 述 
unescape0O 是 一 个 全 局 函数 ， 用 于 解码 由 escape0 编 码 的 字符 串 。 它 的 解 


码 方 式 为 : 寻找 s 中 格式 为 %xx 及 %u xxxx 这儿 x 是 一 个 十 六 进 制 数 
字 ) 的 字符 序列 ， 并 将 它们 替换 为 Unicode 字 符 \u00 xx 和 \u xxxx。 


虽然 在 第 1 版 ECMAScript 中 标准 化 了 unescape0 ， 但 在 ECMAScript 第 3 
版 中 它 已 弃 用 并 移 除 。ECMAScript 的 实现 可 能 实现 了 这 个 函数 ， 但 这 
并 不 是 必需 的 。 应 该 使 用 decodeURIO 和 decodeURIComponentO 来 代替 
unescape()。 更 多 的 细节 及 示例 可 参阅 escape()。 


参阅 

decodeURI() 、 decodeURIComponent() 、 escape() 、 String 
URIError 

URI 编 码 或 解码 方法 出 错时 抛 出 

对 象 一 错误 ”URIError 

构造 画 数 

new URIError() 


new URIError(message) 


message 


一 条 可 选 的 错误 消息 ， 提 供 关 于 该 异常 的 详细 信息 。 如 果 指 定 ， 则 这 
个 参数 将 用 做 对 应 的 URIError 对 象 的 message 属 性 的 值 。 


返回 


一 个 新 构建 的 URIError 对 象 。 如 果 指 定 message 参 数 ， 则 对 应 的 Error 对 
象 将 把 它 用 做 其 message 属 性 的 值 ， 在 其 他 情况 下 ， 它 将 使 用 一 个 预定 
义 的 默认 字符 串 作 为 该 属性 的 值 。 当 不 带 new 操 作 符 将 URIError0 构 造 
函数 像 一 个 函数 一 样 调用 时 ， 的 行为 和 于 new 损 作 符 调用 时 一 样 。 


属性 
message 


一 条 提供 天 于 该 异常 的 细 忆 的 锯 误 消 轧 。 这 个 属性 的 值 为 传 入 构 阁 函 
数 的 字符 串 ， 或 者 为 预定 义 的 默认 字符 串 。 细 六 可 参阅 Error.message 。 


name 


一 个 指定 该 异常 的 类 型 的 字符 串 。 所 有 的 URIError 对 象 的 这 个 属性 都 继 
承 自 值 "URIError"。 


摘 述 


调用 decodeURIO 或 decodeURIComponent() 时 ， 如 果 指 定 的 字符 串 包含 
不 合法 的 十 六 进 制 编码 ， 则 将 抛 出 URIError 类 的 一 个 实例 。 同 样 ， 如 果 
指定 的 字符 串 包含 不 合法 的 Unicode 代 理 项 对 encodeURIO 或 
encodeURIComponent() 也 会 抛 出 这 个 异常 。 关 于 异常 的 抛 出 和 捕获 的 
细 广 可 参 | 阅 Error 部 分 。 


参阅 
Error 、 Error.message 、 Error.name 


[1 一 个 值 时 也 行 ， 只 要 不 是 数值 ， 比 如 new Array(1)。 


第 四 部 分 “客户 端 JavaScript 参 考 


本 书 这 个 部 分 是 一 份 客 户 端 JavaScript 参 考 手册 ， 包 含 咎 干 重要 的 客户 
端 JavaScript 对 象 的 条 目 ， 例 如 Windows、Document、Element、 
Event、XMLHTTPRequest、Storage、Canvas 以 及 File。 同 时 ， 也 有 
jQuery 库 的 一 个 条 目 。 这 些 条 目 根据 字母 顺序 进行 排序 ， 每 一 个 条 目 
人 


在 本 书 之 前 的 版 本 中 ， 每 个 方法 都 有 一 个 单独 的 参考 条 目 ， 但 在 这 一 
， 方法 描述 直接 包含 在 父 条 目 中 ， 因 此 组 织 上 更 为 紧 兰 〈 未 省 略 
细 有 上 


客户 端 JavaScript 参 考 
ApplicationCache 

应 用 缓存 管理 APIT 
EventIarget 


ApplicationCache 对 象 是 Windows 对 象 的 applicationCache 属 性 的 信 ， 它 
定义 一 个 API， 用 于 管理 已 缓存 应 用 的 更 新 。 简 单 的 缓存 应 用 可 不 必 使 
用 这 个 API， 如 同 20.4 下 描述 的 ， 创 建 (以 及 更 新 ， 如 果 有 必要 的 话 ) 
一 个 合适 的 缓存 清单 就 足够 了。 那些 需要 更 主动 地 管理 更 新 的 复杂 组 
存 应 用 可 以 使 用 下 面 列 举 的 属性 、 方 法 以 及 事件 处 理 程序 。 更 多 细 市 
见 20.4.2 节 。 

常量 

status 属 性 可 以 取 以 下 值 。 

unsigned short UNCACHED=0 

当前 应 用 没有 manifest 属 性 : 未 缓存 。 

unsigned short IDLE=1 

清单 已 检查 ， 当 前 应 用 已 缓存 并 为 最 新 。 

unsigned Short CHECKING=2 

浏览 右 正 在 检查 清单 文件 。 

unsigned short DOWNLOADING=3 

浏 唤 絮 正 在 下 载 并 缓存 清单 中 的 文件 。 

unsigned short UPDATEREADY=4 

当前 应 用 的 一 个 新 版 本 已 下 载 并 缓存 。 


unsigned Short OBSOLETE=5 

清单 已 不 存在 ， 缓 存 将 删除 。 

属性 

readonly unsigned short status 

这 个 属性 描述 当前 文档 的 缓存 状态 ， 它 可 以 取 上 面 列 出 的 某 个 常数 。 
方法 

void swapCache() 

当 status 属 性 的 值 为 UPDATEREADY 时 ， 浏 览 器 正 维护 当前 应 用 的 两 个 
缓存 版 本 : 当前 正在 使 用 的 文件 来 自 老 版 本 缓存 ， 新 版 本 的 文件 刚 下 
载 完成 并 将 在 应 用 下 次 重新 加 载 时 使 用 。 可 以 调用 swapCache() 来 让 浏 
如 器 马上 丢弃 老 缓存 并 使 用 新 绥 存 中 的 文件 。 需 要 注意 的 是 ， 这 种 方 


式 可 能 导致 版 本 偏差 的 问题 ， 从 老 绥 存 切换 为 新 缓存 的 较 安 全 的 方式 
是 使 用 Location.reload() 方 法 重新 加 载 当 前 应 用 。 


void update() 


一 般 情 况 下 ， 每 次 加 载 已 绥 存 的 应 用 时 ， 浏 览 妖 都 会 检查 该 应 用 的 清 
单 文件 古 否 有 更 新 。 页 面 长 期 不 刷新 的 Web 应 用 可 以 使 用 这 个 方法 来 更 
频繁 地 检查 更 新 。 


事件 处 理 程序 


在 检查 清单 以 及 更 新 缓存 的 过 程 中 ， 浏 贤 器 会 在 ApplicationCache 上 解 
发 一 个 事件 序列 。 可 使 用 下 面 的 ApplicationCache 对 象 的 事件 处 理 程序 
属性 来 注册 事件 处 理 程序 ， 或 者 使 用 ApplicationCache 对 象 实现 的 
EventTarget() 方 法 。 这 些 事 件 的 大 多 数 处 理 程序 都 传 入 一 个 人 简单 的 Event 
对 象 ， 但 进度 事件 的 处 理 程序 例外 ， 它 传 入 一 个 ProgressEvent 对 象 ， 此 
对 象 可 用 于 跟踪 当前 已 下 载 的 字 市 数 。 


oncached 


在 应 用 首次 缓存 时 触发 。 这 有 是 事件 序列 中 的 最 后 一 个 事件 。 


onchecking 


当 浏 览 器 开始 检查 清单 文件 是 否 有 更 新 时 触发 。 在 所 有 的 应 用 缓存 事 
件 序列 中 ， 这 都 是 第 一 个 事件 。 


ondownloading 


当 济 哎 絮 开始 下 载 清 持 文件 中 列 出 的 资源 时 触发 ， 无 论 这 是 该 应 用 首 
ee 这 个 事件 后 面 通 肖 会 跟着 一 个 或 多 个 进度 事 


Onerror 


当 缓存 更 新 过 程 中 出 现 错误 时 触发 。 比如， 如 果 浏 哎 器 掉 线 ， 或 者 一 
个 未 缓存 的 应 用 引用 一 个 不 存在 的 清单 文件 时 ， 束 会 触发 这 个 事件 。 


onnoupdate 


当 浏 贤 右 认为 清单 没有 变化 并 且 缓 存 的 应 用 束 是 当前 应 用 时 触发 。 
征 事件 序列 的 最 后 一 个 事件 。 


onobsolete 


当 已 缓存 应 用 的 清单 文件 不 复 存 在 时 触发 。 这 会 引发 缓存 被 删除 。 
征 事件 序列 的 最 后 一 个 事件 。 


onprogress 


当 应 用 的 文件 正在 被 下 载 并 缓存 时 周期 性 地 触发 。 与 这 个 事件 关联 的 
事件 对 象 是 一 个 ProgressEvent 。 


onupdateready 


当 应 用 的 一 个 新 版 本 下 载 完成 并 缓存 (将 在 应 用 下 次 加 载 时 使 用 ) 时 
触发 。 这 是 事件 序列 的 最 后 一 个 事件 。 


ArrayButffer 


固定 长 度 的 字 节 序列 


ArrayBuffer 表 现 为 内 存 中 的 一 个 固定 长 度 的 序列 ， 但 它 没有 定义 存 取 
这 些 字 太 的 方法 。ArrayBufferViews 类 似 于 TypedArray 类 ， 提 供 了 访问 
及 解析 这 些 字 贡 的 方法 。 

构造 函数 

new ArrayBuffer(unsigned long length) 


| 指定 字 节 数 的 ArrayBuffer。 新 ArrayBuffer 中 的 所 有 字 节 都 初始 
i 


属性 

readonly unsigned long byteLength 

ArrayBuffer 的 长 度 ， 单 位 为 字 节 。 

ArrayBufferView 

基于 ArrayBuffer 的 类 型 的 通用 属性 

ArrayBufferView 是 一 个 超 类 ， 提 供用 于 访问 ArrayBuffer 对 象 字 市 内 容 
的 类 型 。 无 法 直接 创建 一 个 ArrayBufferView: 它 存在 的 意义 是 为 了 定 
义 如 TypedArray、DataView 等 子 类 型 的 通用 属性 。 

属性 


readonly ArrayBuffer buffer 

当前 对 象 的 视图 所 包含 的 ArrayBuffer 。 

readonly unsigned long byteLength 

通过 当前 视图 能 访问 到 的 缓存 部 分 的 长 度 ， 单 位 为 字 节 。 
readonly unsigned long byteOffset 

通过 当前 视图 能 访问 的 缓存 部 分 的 开始 位 置 ， 单 位 为 字 廊 。 


Attr 
元 素 的 属性 


Attr 对 象 表示 一 个 ElementT 点 的 属性 。 可 通过 Node 接 口 的 attributes 属 性 
取得 Attr 对 象 ， 或 者 调用 Element 接 口 的 getAttributeNode0) 或 
getAttributeNodeNS(0) 方 法 。 


由 于 属性 值 可 以 完全 由 字符 串 表 示 ， 因 此 通常 不 需要 使 用 Attr 接 口 。 在 
多 数 情况 下 ， 使 用 属性 最 简单 的 方法 是 使 用 Element.getAttribute(0) 以 及 
Element.setAttribute() 方 法 。 这 些 方法 使 用 字符 串 作为 属性 值 ， 完 全 不 
需要 用 到 Attr 对 象 。 


属性 


readonly string localName 


属性 的 名 子 ， 不 包含 任何 命名 空间 前 级 。 


readonly string name 

属性 的 名 字 ， 包 含 命 名 空间 前 级 (如 果 存 在 的 话 ) 。 
readonly string namespaceURI 

标识 属性 命名 空间 的 URI， 如 果 不 存 在 的 话 为 空 (null) 。 
readonly string prefx 

属性 的 命名 空间 前 缀 ， 如 果 不 存在 的 话 为 空 (null) 。 
string value 

属性 的 值 。 

Audio 


HTML<audio > 元 素 


Node、Element、MediaElement 


音频 (Audio) 对 象 表示 一 个 HIML 的 <audio> 元 素 。 除 了 构造 函数 
外 ，Audio 对 象 的 所 有 属性 、 方 法 及 事件 处 理 程序 都 继承 自 


MediaElement ° 
构造 钞 数 
new Audio([string src]) 


构造 函数 创建 一 个 新 的 <audio > 元素， 其 preload 属 性 为 "auto"。 如 果 指 
定 src 参 数 ， 它 将 用 做 src 属 性 的 值 。 


BeforeUnloadEvent 

用 于 凶 载 事件 的 Event 对 和 象 

Event 

浏 吕 器 跳 轩 到 一 个 新 的 文档 之 前 ，Window 对 象 上 的 邮 载 事件 会 被 触 
发 ，Web 应 用 可 在 此 时 询问 用 户 是 否 真 的 要 离开 当前 页 面 。 传 给 邯 载 事 
件 处 理 函 数 的 是 BeforeUnloadEvent 对 象 。 如 果 你 想 让 用 户 确认 是 否 真 
的 要 离开 当前 页 面 ， 不 需要 也 不 应 该 使 用 Window.confirm() 方 法 ， 而 应 


该 从 事件 处 理 程序 返回 一 个 字符 串 ， 或 者 将 事件 对 象 的 returnValue 设 置 
0 。 返 回 或 设置 的 字符 串 将 以 确认 对 话 框 的 形式 展现 给 用 


可 参考 Event 及 Window。 
属性 
string returnValue 


在 离开 当前 页 面 之 前 以 确认 对 话 框 的 形式 同 用 户 显 示 的 消 乱 。 如 来 不 
想 显 示 确 认 对 话 框 ， 可 保持 此 属性 为 未 设置 。 


Blob 
一 个 不 透明 的 数据 块 ， 如 文件 内 容 等 


Blob 是 一 个 不 透明 的 类 型 ， 用 于 在 API 之 间 交 换 数 据 。Blob 可 能 会 非常 
大 ， 可 能 表示 二 进 制 数据 ， 不 过 也 不 一 定 是 这 样 。Blob 通 常 保存 在 文 
件 中 ， 不 过 这 只 是 实现 细 闻 。Blob 只 对 外 骏 露 尺寸 ， 有 时 也 有 MIME 类 
型 (MIME type) ， 只 定义 一 个 将 Blob 的 一 部 分 作为 一 个 Blob 处 理 的 方 
法 。 


很 多 API 都 使 用 Blob: 可 参见 FileReader 中 读 取 Blob 内 容 的 方法 ， 
BlobBuilder 中 创建 一 个 新 Blob 对 象 的 方法 ，XMLHttpRequest 中 下 载 及 
上 传 Blob 的 方法 。 关 于 Blob 以 及 用 到 它 的 API 的 讨论 ， 可 参考 22.6 节 。 
属性 

readonly unsigned long size 

Blob 的 长 度 ， 单 位 为 字 广 。 

readonly string type 

Blob 的 MIME 类 型 ， 如 果 未 指定 则 为 空 字符 串 。 


方法 


Blob slice(unsigned long start,unsigned long length,[string contentType]) 


返回 一 个 新 的 Blob， 表 示 当 前 Blob 中 从 start 开 始 ， 长 度 为 length 的 字 
站 。 如 采 指 定 contentType， 它 将 用 做 返回 的 Blob 的 type 属 性 。 


BlobBuilder 

创建 新 的 Blob 

BlobBuilder 对 象 用 于 从 文本 字符 串 、ArrayBuffer 对 象 的 字 广 内 容 以 及 其 
他 Blob 创 建新 的 Blob 对 象 。 要 构建 一 个 Blob， 可 以 创建 一 个 
BlobBuilder， 调 用 append0 一 次 或 多 次 ， 然 后 调用 getBlob0， 即 可 得 到 
一 个 Blob。 

构造 函数 


new BlobBuilder() 


调用 BlobBuilder() 构 造 画 数 ， 无 需 参数 ， 即 可 创建 一 个 新 的 
BlobBuilder ° 


2 

void append(string text, [string endings]) 

使 用 UTF-8 编 码 将 指定 的 text 追 加 到 正在 创建 的 Blob 中 。 

void append(Blob data) 

追加 指定 Blob data 的 内 容 到 正在 创建 的 Blob 中 。 

void append(ArrayBuffer data) 

追加 ArrayBuffer data 的 字 广 内 容 到 正在 创建 的 Blob 中 。 

Blob getBlob([string contentType]) 

返回 一 个 Blob， 表 示 自 这 个 BlobBuilder 创 建 之 后 追加 的 所 有 数据 。 

次 调用 这 个 方法 都 将 返回 一 个 新 的 Blob 。 参 数 contentType 对 应 站 向 的 
Blob 的 type 属 性 的 值 ， 如 果 示 指定， 返回 的 Blob 的 type 属 性 将 是 一 个 空 
字符 串 。 

Button 

HTML<button > 元 素 

Node、Element、FormControl 

Button 对 象 表现 为 HTML <button> 元素 。Button 的 大 多 数 属 性 及 方法 都 
在 FormControl 及 Element 中 介绍 了 。 如 果 一 个 Button 的 type 属 性 〈 见 


FormControl) 是 "submit"， 下 面 负 出 国有 天 指定 表 二 提 区 参数 的 属性 将 
覆盖 Button 所 在 表单 〈 见 ECGonfiol) 上 的 相似 属性 


属性 
以 下 属性 只 在 <button > 的 type 为 "submit" 时 有 意义 。 


string formAction 


这 个 属性 反映 对 应 的 formaction HTML 属性 。 对 提交 按钮 而 言 ， 它 将 履 
六 表单 的 action 属 性 。 


string formEnctype 


这 个 属性 反映 对 应 的 formenctype HTML 属 性 。 对 提交 按钮 而 言 ， 它 将 
Ee 的 enctype 属 性 ， 它 的 合法 值 与 表单 的 enctype 属 性 的 合法 值 相 


string form Method 


这 个 属性 反映 对 应 的 formmethod HTML 属 性 。 对 提交 按钮 而 言 ， 它 将 
覆 讲 表单 的 method 属 性 。 


string formNoValidate 


这 个 属性 反映 对 应 的 formnovalidate HTML 属 性 。 对 提交 按钮 而 言 ， 它 
将 履 盖 表单 的 noValidate 属 性 。 


string formTarget 


这 个 属性 反映 对 应 的 formtarget HTML 属性 。 对 提交 按钮 而 言 ， 它 将 履 
次 表单 的 target 必 性。 


Canvas 
用 于 脚本 绘图 的 HTML 元 素 
Node、Element 


Canvas 对 象 表现 为 HTML 的 canvas 元 素 。 它 自己 并 不 能 做 什么 ， 但 它 定 
义 一 个 支持 在 客户 端 使 用 脚本 绘图 的 API。 可 以 直接 为 这 个 对 象 定义 
width 及 height， 也 可 以 用 toDataURL0 方 法 从 画布 中 导出 图 片 ， 不 过 ， 
实际 绘图 的 API 是 由 getContext() 方 法 返回 的 一 个 独立 “上 和 下文? 对 象 实现 
的 。 可 参考 CanvasRenderingContext2D。 


属性 


unsigned long height 
unsigned long width 


这 些 属性 对 应 < canvas> 标 签 的 width 及 height 属 性 ， 指 定 canvas 坐 标 空 
间 的 维度 。width 及 height 的 默认 值 分 别 为 300 和 150 。 


如 果 canvas 元 到 的 尺寸 在 样式 表 或 内 联 style 属 性 中 都 没有 男 外 的 定义 ， 
则 width 及 height 属 性 也 将 指定 canvas 元 素 在 屏幕 上 的 尺寸 。 


设置 这 两 个 属性 中 的 任意 一 个 (即使 设置 为 它 现 在 的 值 ， 都 将 清空 画 
和 (transparent black) ， 并 且 将 它 所 有 的 绘图 属性 重 置 为 默 
上 O 


方 流 
object getContext(string contextId,[any args.…]) 


这 个 方法 返回 一 个 用 于 在 Canvas 元 素 上 画图 的 对 象 。 如 果 传 入 字符 
串 "2d"， 本 方法 将 返回 一 个 用 于 2D 绘 图 的 CanvasRenderingContext 2D 对 
象 ， 在 这 种 情况 下 不 需要 额外 的 args 。 


每 一 个 canvas 元 素 只 有 一 个 CanvasRenderingContext 2D 对 象 ， 所 以 多 次 
调用 getContext("2d") 返 回 的 是 同一 个 对 象 。 


HTML5 标 准将 "2d" 作 为 这 个 方法 的 唯一 参数 。 一 些 独 立 的 标准 (如 
WebGL) 正在 开发 3D 绘 图 。 在 支持 这 些 标准 的 浏览 器 中 ， 可 以 为 这 个 
方法 传 入 字符 串 "webgl" 来 获得 一 个 支持 3D 泻 染 的 对 象 。 需 要 注意 的 
是 ， 本 书 中 只 有 关于 CanvasRenderingContext 2D 对 象 的 绘图 上 下 文 的 文 
档 。 


string toDataURL([string type],[any args.…]) 


toDataURL() 以 data://URL 的 方式 返回 canvas 位 图 的 内 容 ， 这 种 方式 可 以 
很 容易 地 在 <img> 标签 中 使 用 或 者 通过 网 络 传输 。 例 如 : 
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< 


其 追加 到 当前 文档 中 


// 将 canvas 的 内 容 复制 到 一 个 < img > 中 ， 并 | 


var canvas=document .getEJLementById("my_canvas" ) ， 
var image=document.createElement("img"); 
image.src=canvas.toDataURL(); 


document .body.appendcChild(image); 


type 参 数 定义 图 片 格式 使 用 的 MIME 类 型 。 如 果 省 略 该 参数 ， 默 认 值 
为 "image/png"。 只 有 PNG 图 片 格式 是 要 求 文 持 的 实现 方式 。 除 PNG 外 
的 图 片 格式 ， 可 以 传 入 额外 的 参数 来 定义 编码 细 方 。 比 如 ， 如 来 type 
征 "image/jpeg"， 第 二 个 参数 应 该 为 0~1 之 间 的 一 个 数字 ， 用 于 定义 图 
se 。 在 写 这 本 书 的 时 候 ， 其 他 参数 的 讨论 还 没有 形成 标 
准 。 


为 了 防止 跨 域 的 信息 泄露 ， 在 非 “ 同 源 ”(origin-clean) 的 <canvas> 标 
答 上 toDataURL() 将 不 能 工作 。 如 采 一 个 canvas 包 含 一 张 (直接 通过 
drawImage0) 或 非 直接 通过 CanvasPattern 绘 制 的 ) 图 片 ， 且 该 图 片 与 包 
舍 当 前 canvas 的 文档 不 同 产 ， 则 称 这 个 canvas 是 非 同 源 的 。 同 样 ， 如 采 
四 了 来 目 另 一 个 源 的 web 字体 ， 也 称 它 为 非 
旺 源 下 


CanvasGradient 
用 于 Canvas 的 颜色 渐变 


CanvasGradient 对 象 表示 一 种 颜色 渐变 ， 可 指派 给 
CanvasRenderingContext2D 对 象 的 strokeStyle 或 fillStyle 属 性 。 
CanvasRenderingContext2D 对 象 的 createLinerGradient(O) 及 
createRadialGradient() 方 法 都 返回 CanvasGradient 对 象 。 


创建 CanvasGradient 对 象 后 ， 就 可 以 使 用 addColorStop() 来 定义 渐变 中 什 
么 颜色 在 什么 位 置 出 现 。 颜 色 将 在 定义 的 位 置 插 入 并 产生 平滑 的 渐变 
或 淡出 〈 淡 入 ) 。 如 果 没 有 定义 色 标 (color stop) ， 渐 变 将 全 是 清 
色 的 透明 黑色 。 


方法 


void addColorStop(double offset,string color) 


addColorStopO 定 义 一 种 渐变 中 的 固定 颜色 。 人 参数 color 的 值 为 一 个 CSS 
颜色 字符 串 ， 参 数 offset 是 0.0 一 1.0 之 间 的 一 个 浮上 点数， 对 应 从 渐变 的 起 
点 到 终点 的 位 置 。offset 为 0 相当 于 起 始点 ，offset 为 1 相当 于 终点 。 


如 朱 定 义 两 个 或 多 个 色 标 ， 各 种 颜色 之 间 将 平滑 地 过 渡 。 在 第 一 个 色 
标 之 前 ， 渐 变 将 显示 第 一 个 色 标 的 闫 色 ， 在 最 后 一 个 色 标 之 后 ， 渐 变 
将 显示 最 后 一 个 色 标 的 颜色 。 如 果 只 定义 一 种 色 标 ， 渐 变 将 显示 一 种 
固定 的 颜色 。 如 采 没 有 设置 色 标 ， 渐 变 将 全 坪 清 一 色 的 透明 黑色。 


CanvasPattern 
用 于 Canvas 的 基于 图 片 的 模式 


CanvasPattern 对 象 是 不 透明 对 象 ， 由 CanvasRenderingContext2D 对 和 象 的 
CreatePattern() 方 法 返回 。CanvasPattern 对 象 可 用 做 
CanvasRenderingContext2D 对 象 的 strokeStyle 及 fillStyle 属 性 的 值 。 


CanvasRenderingContext2D 
用 于 在 Canvas 上 画图 的 对 象 


CanvasRenderingContext2D 对 象 提供 用 于 绘制 二 维 图 形 的 属性 及 方法 ， 
下 面 儿 节 是 一 个 概览 。 更 多 细节 请 参考 21.4 节 、Canvas、 
CanvasGradient、CanvasPattern、ImageData 及 TextMetrics。 


创建 并 泻 染 路 径 


画布 的 一 个 强大 特性 是 可 以 通过 基本 的 绘制 操作 来 生成 各 种 形状 ， 然 
后 可 以 给 它们 描 边 (stroke) 或 填充 (fil) 。 多 个 操作 的 结果 统称 为 当 
前 路 径 。 一 张 画 布 只 维护 一 条 当前 路 径 。 


为 了 将 多 个 片断 连接 成 一 个 形状 ， 绘 图 操作 之 间 需 要 一 个 连接 点 。 为 
了 实现 这 点 ， 画 布 维护 一 个 当前 人 位置， 画布 的 绘图 操作 将 显 式 把 这 个 
位 置 作为 起 点 ， 并 不 断 更 新 ， 直 到 达到 终点 。 可 以 把 这 个 过 程 想象 为 
用 一 文 钢笔 在 纸 上 画 画 : 男 完 一 条 直线 或 曲线 时 ， 当 前 位 置 束 古 操作 
完成 后 钢笔 所 在 的 位 置 。 


可 以 使 用 当前 路 径 创 建 一 系列 断 开 的 形状 ， 这 些 形状 会 一 起 使 用 相同 

的 绘图 参数 进行 渲染 。 可 以 使 用 moveTo() 方 法 来 分 开 形状 ， 这 个 方法 

会 在 不 添加 连接 线 的 情况 下 将 当前 点 移动 到 一 个 新 的 位 置 。 这 个 操作 

人 (subpath) ， 这 是 一 个 用 于 关联 操作 集合 的 画 
lH °? 


可 用 的 方法 有 : lineToO 绘 制 直线 ，rect() 绘 制 矩 形 ，arc() 及 arcTo() 绘 制 
而 形 ，bezierCurveTo0 及 quadraticCurveTo0 绘 制 曲 线 。 


路 径 完成 之 后 ， 就 可 以 使 用 stroke0 对 它 描 边 ， 使 用 包 10 进 行 填充 ， 也 
可 以 同时 摘 边 及 填充 。 


在 描 边 及 填充 之 外 ， 也 可 以 使 用 当前 路 径 来 定义 一 个 当前 画布 泻 染 时 
使 用 的 裁剪 区 域 (clipping region) 。 在 这 个 区 域 中 的 像素 会 显示 ， 之 
外 的 则 不 显示 。 裁剪 区 域 是 可 累加 的 ， 可 以 在 当前 路 径 的 当前 裁剪 区 
域 中 再 次 调用 clip0 来 生成 一 个 新 的 区 域 。 


如 果 所 有 子路 径 中 的 片断 都 没有 能 形成 一 个 闭合 形状 ，fil0 及 clipO 操 
作 会 在 子路 径 的 起 点 到 终点 之 间 添 加 一 条 虚拟 的 线 ( 描 边 时 不 可 见 ) 
来 隐 式 地 闭合 形状 ， 也 可 以 调用 closePath0) 来 显 式 地 添加 这 条 线 。 


可 以 使 用 isPointInPath0) 来 测试 一 个 点 是 否 包含 在 当前 路 径 之 中 (或 在 
路 径 边 界线 上 ) 。 如 果 一 条 路 径 与 自身 相交 ， 或 者 由 多 条 重 到 的 子路 
径 组 成 ， 那 么 “包含 ”的 定义 取决 于 非 老 缠绕 规则 (nonzero winding 

rule) 。 如 果 在 一 个 圆 里 面 画 了 另 一 个 圆 ， 并 且 两 个 圆 绘制 的 方向 相 
同 ， 那 么 在 大 圆 里 的 所 有 点 都 被 认为 是 包含 在 这 条 路 径 中 。 和 否则， 如 
果 一 个 圆 按 顺 时 针 方 同 画 ， 男 一 个 按 逆 时 针 方 同 画 ， 定 义 的 就 是 一 个 
2 小 圆 内 部 的 点 则 在 路 径 之 外 。fil0 和 clipO 对 包含 的 定义 

人 


颜色 、 渐 变 以 及 图 案 


对 一 条 路 径 填充 或 描 边 时 ， 可 以 通过 strokeStyle 及 fillStyle 属 性 来 定义 线 
条 或 填 元 区 域 的 泻 染 方式 。 这 两 个 属性 以 及 定义 渐变 及 图 案 的 
CanvasGradient 及 CanvasPattern 对 象 都 支持 CSS 格 式 的 颜色 字符 串 。 创 
建 渐变 可 以 使 用 createLinearGradient0O 或 createRadialGradientO) 方 法 ， 创 
建 图 案 可 以 使 用 createPattern()。 


要 用 CSS 符 号 定义 一 种 不 透明 的 颜色 ， 可 以 使 用 "#RRGGBB" 格 式 的 字 
符 串 ， 其 中 RR、GG 和 BB 是 十 六 进 制 数字 ， 定 义 颜色 的 红 、 绿 、 蓝 分 
量 ， 取 值 在 00~-FF 之 间 。 例 如 ， 亮 红色 是 "#FF0000"。 要 定义 部 分 透明 
的 颜色 ， 可 使 用 "rgba(R,G,B,A)" 格 式 的 字符 串 。 在 这 种 格式 中 ，R、G 
以 及 B 定 义 颜色 的 红 、 绿 、 蓝 分 量 ， 采 用 十 进 制 ， 值 在 0~255 之 间 ，A 
为 一 个 浮 点 数 ， 定 义 alpha (透明 度 ) 分 量 ， 值 在 0.0 (完全 透明 ) 一 1 
(完全 不 透明 ) 之 间 。 比 如 ， 半 透明 的 亮 红 色 是 "rgba(255,0,0,0.5)"。 


线 宽 、 线 帽 以 及 线 的 连接 

画布 有 儿 个 属性 用 于 定义 线条 如 何 绘制 。 可 以 使 用 lineWidth 属 性 定义 
线条 的 宽度 ， 用 lineCap 属 性 定义 线条 端点 的 样式 ， 以 及 用 lineJoin 属 性 
来 定义 多 条 线条 之 间 如 何 连接 。 

画 矩 形 


可 以 使 用 strokeRect0 或 fillRect0) 来 给 一 个 矩形 摘 边 或 填充 ， 另 外 ， 也 可 
以 使 用 clearRect0 来 清空 一 个 矩形 区 域 。 


画图 像 


在 画布 API 中 ， 可 以 使 用 HTML <img>> 元素 或 Image() 构 造 画 数 来 定义 
图 像 。 (更 多 细节 请 参考 Image 的 参考 页 面 。) < canvas> 元 素 或 < 
video> 元 素 也 可 以 用 做 图 像 资源 。 


可 以 使 用 drawImage() 方 法 来 将 一 幅 图 像 绘制 到 画布 中 ， 在 大 多 数 通用 
形式 下 ， 这 个 方法 允许 从 源 图 像 中 任意 选取 一 个 矩形 区 域 ， 经 过 缩放 
之 后 绘制 到 画布 中 。 

画 文字 


fillText(O 方 法 绘制 一 段 文字 ，strokeText(0) 方 法 绘制 一 段 描 边 的 文字 。 
font 属 性 定义 使 用 的 字体 ， 它 的 值 应 该 是 一 个 CSS 字 体 说 明 字 人 符 串 。 
textAlign 属 性 定义 文字 在 传 入 的 水 平方 向 上 是 左 对 齐 、 届 中 还 是 右 对 
齐 ，textBaseline 属 性 定义 文字 在 传 入 的 垂直 方向 上 的 位 置 。 


坐标 空间 与 转换 


默认 情况 下 ， 画 布 的 坐标 空间 的 原点 (0,0) 位 于 画布 的 左上 角 ，x 的 值 
向 右 递增 ，y 的 值 向 下 递增 。 画 布 的 width 及 height 属 性 定义 X 与 Y 的 最 大 
坐标 值 ， 这 个 坐标 空间 中 的 基本 单位 一 般 对 应 屏幕 上 的 一 个 像素 。 


可 以 定义 自己 的 坐标 空间 ， 之 后 ， 为 画布 的 绘图 方法 传 入 的 坐标 会 自 
动 转换 。 目 定义 坐标 空间 的 方法 有 translate()、scale() 以 及 rotate()， 它 们 
将 影响 画面 的 转换 矩阵 (transformation matrix) 。 由 于 坐标 空间 可 以 像 
2 因此 为 像 lineTo() 这 样 的 方法 传 入 的 坐标 不 能 用 像素 来 度 

， 并 且 画 布 API 使 用 浮 点 数 来 代替 整数 。 


阴影 


CanvasRenderingContext 2D 可 以 给 画 的 任何 东西 和 目 动 添加 阴影 。 阴 影 的 
颜色 由 shadowColor 定 义 ， 偏 移 量 1 由 shadowOffsetX 和 和 shadowOffsetY 定 
义 。 另 外 ， 阴 影 边 缘 的 羽化 程度 可 以 由 shadowBlur 来 设置 。 


影像 合成 


通常 情况 下 ， 当 在 画布 区 新 画 的 图 像 会 出 现在 之 前 绘制 的 内 
容 的 上 面 ， 并 根据 其 透明 度 ， 部 分 或 全 部 遮 住 日 的 内 容 。 处 理 新 像素 
与 上 昌 像 素 的 混合 的 过 程 称 为 : 影 PU 可 以 通过 为 
globalCompositeOperation 属 性 指定 不 同 的 值 来 改变 画布 合成 像素 的 方 
式 。 比 如 ， 可 以 设置 这 个 值 让 新 画 的 图 像 出 现在 现 有 图 像 之 下 。 


下 表 列 出 了 globalCompositeOperation 属 性 允许 的 值 及 其 含义 ° 表格 

中 “ 源 ” (source) 指 的 是 正 要 画 到 画布 上 的 像素 , “目标 ” (destination) 
指 了 画布 上 现 有 的 像素 , “结果 ” (result) 指 源 与 目标 混合 之 后 的 像素 。 

在 公式 中 ， 字 母 $ 代 表 源 像素 ，D 代 表 目 标 像素 ，R 代 表 结 果 像 素 ，a。 
代表 源 像 素 的 阿尔 法 通道 〈 透 明度 ) ，a 代表 目标 像素 的 阿尔 法 通 

省: 


什 公式 

“Copy R E 0 
"destination-atop” R=(1-0d)S + asD 
R = QsD 


"destination-in" 


"destination-out” R= (1-as)D 


"destination-over” R= (1-ad)S+0 


"lighter" R=S+0 


"source-atop" 


R=QadS + (1-as)D 


"source-in'" R = a 


含义 
忽略 目标 像素 ， 直 接 绘制 源 像素 


在 目标 下 面 绘制 源 像素 。 如 果 源 是 透明 
的 ,结果 将 也 是 透明 的 


将 目标 像素 的 值 与 源 像素 的 透明 度 相 乘 ， 
忽略 源 像素 的 颜色 

如 果 源 像素 不 透明 ， 目 标 像素 将 转 为 透 
明 ， 如 采 源 像素 透明 ， 则 目标 像素 不 变 ， 

此 操作 中 源 像素 的 颜色 忽略 


源 像素 在 目标 像素 的 下 面 显 示 ， 显 示 多 少 
取决 于 目标 像素 的 透明 度 


混合 后 的 颜色 是 源 像素 与 目标 像素 的 颜色 
的 简单 相 加 ， 如 果 和 大 于 最 大 值 则 舍 去 超 
出 部 分 


在 目标 像素 之 上 绘制 源 像素 ， 透 明度 为 源 
像素 与 目标 像素 透明 度 的 乘积 。 如 采 目 标 
像素 是 透明 的 则 什么 也 不 画 

绘制 源 像素 ， 透 明度 为 源 像素 与 目标 像素 和 
明度 的 乘积 目标 像素 的 颜色 将 忽略 。 如 果 
目标 像素 是 透明 的 ， 结 果 将 也 是 透明 的 


什 公式 含义 


"source-out" R = (1-0d)》 如 采 目 标 像素 是 透明 的 ， 结 果 为 源 像素 ; 
如 果 目 标 像素 不 透明 ， 结 果 为 透明 像素 。 
目标 像素 的 颜色 忽略 


"source-OVer” R=5+(1-as)D 源 像素 绘制 在 目标 像素 之 上 。 如 果 源 像素 
龙 半 透明 的 ， 则 目标 像 系 也 会 影 啊 结果 。 
这 是 globalComposite0peration 属 性 的 默 
认 值 


"XOr" R = (4-0d)S + (1-as)D 如 果 源 像素 是 透明 的 ， 结 采 将 是 目标 像 
素 ， 如 有 果 目 标 像素 是 透明 的 ， 结 采 将 是 源 
像素 ， 如 果 源 像素 和 目标 像素 都 透明 或 者 
不 透明 ， 结 末 将 是 透明 的 


保存 绘图 状态 


可 以 通过 save() 和 restore() 方 法 来 保存 或 还 原 一 个 
CanvasRenderingContext 2D 对 象 的 状态 。save() 将 当前 状态 压 入 栈 中 ， 
0 的 顶部 弹出 最 近 保 存 的 状态 ， 并 将 根据 它 的 值 设 置 当 前 绘 


/Un 


CanvasRenderingContext 2D 对 象 的 所 有 属性 (canvas 属 性 除外 ， 它 是 一 
个 常量 ) 都 可 在 绘图 状态 中 保存 。 转 换 矩 阵 和 裁剪 区 域 也 是 状态 的 一 
部 分 ， 但 当前 路 径 和 当前 点 不 是 。 


像素 操作 
getImageData0) 方 法 允许 查询 画布 的 原始 像素 ，putImageData0 人 允许 设置 


。 如果 你 想 通 过 JavaScript 进 行 图 像 处 理 ， 这 两 个 方法 将 
名 o 


属性 

readonly Canvas canvas 

用 于 绘图 的 Canvas 元 素 。 

any fllStyle 

当前 用 于 填充 路 径 的 颜色 、 图 案 或 渐变 。 这 个 属性 的 值 可 以 是 CSS 颜 色 


字符 串 ， 也 可 以 是 一 个 CanvasGradient 或 CanvasPattern 对 象 。 默 认 的 填 
充 样式 是 纯 黑色 。 


string font 


绘制 文本 时 使 用 的 字体 ， 值 为 一 段 字 符 串 ， 格 式 与 CSSfont 属 性 格式 相 
同 。 默 认 值 为 "10px sans-serif"。 如 果 字 体 尺寸 使 用 "em"、"ex" 等 单位 
或 "larger"、"smaller"、"bolder"、"lighter" 等 相对 关键 字 ， 它 们 将 相对 当 
前 <canvas> 元 素 的 实际 CSS 字 体 样式 进行 转换 。 


double globalAlpha 


为 画布 上 的 所 有 内 容 定义 一 个 额外 的 透明 度 。 画 布 上 的 所 有 像素 的 
alpha 值 将 乘 以 这 个 值 。 这 个 值 只 能 为 0.0 《所 有 内 容 完全 透明 ) 一 1.0 
(默认 值 ， 没 有 额外 透明 度 ) 之 间 的 一 个 数字 。 


string globalCompositeOperation 


这 个 属性 指定 绘制 到 画布 上 的 源 像素 与 画布 上 已 经 存在 的 目标 像素 之 
闻 如 何 结合 〈 或 合成 ) 。 一 般 只 有 在 处 理 部 分 透明 的 颜色 或 设置 
globalAlpha 属 性 后 这 个 属性 才 有 用 。 它 的 默认 值 为 "source-over"， 其 他 
利用 值 为 "destination-over" 和 "copy"。 可 参考 上 面 的 合法 值 表格 。 注 
意 ， 在 编写 本 书 时 ， 不 同 的 浏 贤 器 对 特定 的 合成 模式 有 不 同 的 实现 : 
一 些 合成 是 局 部 有 的， 一 些 是 全 局 的 。 更 多 细 广 请 参考 21.4.13 季 。 


string lineCap 


lineCap 属 性 定义 线条 末 闻 的 样式 。 只 有 在 画 粗 线条 时 这 个 属性 才 有 
用 。 它 可 用 的 值 在 下 面 的 表格 中 列 出 了 ， 上 默认 值 为 "butt"。 


什 人 

"butt" 这 个 值 为 默认 值 ， 线 条 没有 线 帽 。 线 条 的 终点 是 平 直 的 ， 与 线 系 方 间 垂直 。 
线条 不 会 超出 终点 

"round"” 这 个 值 定义 线条 有 一 个 半圆 形 的 线 帽 ， 半 圆 的 直径 等 于 线条 的 宽度 ， 半 圆 在 
线条 的 终点 处 向 外 扩展 ， 距 离 为 线条 宽度 的 一 半 

"square” ”这 个 值 定义 线条 有 一 个 矩形 的 线 帽 。 和 “butt” 类 似 ， 但 线条 在 终点 处 会 扩 
展 出 其 宽度 一 半 的 距离 


string lineJoin 


如 末路 径 中 有 线段 和 /或 曲线 的 顶点 相交 ， 这 些 交 点 的 绘制 方式 由 
lineJoin 属 性 定义 。 这 个 属性 仅 当 绘制 的 是 宽 线 条 时 才 有 效 采 。 


这 个 属性 的 默认 值 古 "miter"， 表 示 两 根 线条 的 外 部 边缘 将 延伸 直到 它 
们 相交 。 如 采 两 条 线条 以 一 个 镶 角 斜 接 ， 它 们 的 交合 部 分 可 能 驶 会 很 
长 ，miterLimit 属 性 定义 这 个 交合 部 分 的 长 度 上 限 ， 如 果 交 合 部 分 长 于 
这 个 限制 ， 它 将 转化 为 一 个 矢 面 。 

属性 值 "round" 定 义 交 合 部 分 顶点 的 外 边缘 为 一 段 实心 圆 弧 ， 直 径 与 线 
条 的 宽度 相等 。 属 性 值 "bevel" 定 义 交 合 部 分 顶点 的 外 边缘 为 一 个 实心 
的 三 角形 。 

double lineWidth 


定义 描 边 (或 画 线 ) 操作 时 的 线条 宽度 。 默 认 值 为 1° 线条 的 中 心 在 路 
径 上 ， 路 径 两 边 各 占 一 半 宽 度 。 

double miterLimit 

如 蔷 lineJoin 属 性 值 为 "miter"， 并 且 两 条 线 以 一 个 锐角 斜 奖 ， 那 么 它们 
的 交合 部 分 可 能 会 很 长 。 如 果 这 个 斜 交 的 部 分 太 长 ， 看 起 来 束 会 很 不 


谐 调 。miterLimit 属 性 设置 斜 交 部 分 长 度 的 上 限 。 这 个 值 定义 斜 交 部 分 
长 度 与 线条 宽度 的 一 半 之 间 的 比例 ， 默 认 值 是 10， 即 斜 交 部 分 的 长 度 


不 会 超过 线条 宽度 的 5 倍 。 如 果 两 条 线条 的 斜 交 部 分 的 长 度 比 miterLimit 
允许 的 最 大 值 要 长 ， 这 两 条 线条 将 以 斜面 而 不 是 斜 接 的 方式 连接 。 


double shadowBlur 
定义 阴影 的 模糊 程度 。 默 认 值 为 0， 将 生成 边缘 清晰 的 阴影 。 取 值 越 大 
模糊 程度 也 越 大 ， 不 过 需要 注意 ， 这 个 值 的 单位 不 是 像素 ， 也 不 受 当 
前 变换 的 影响 。 

string shadowColor 

定义 阴影 的 颜色 ， 格 式 同 CSS 颜 色 格 式 。 默 认 情 况 下 是 透明 的 黑色 。 
double shadowOffsetX 

double shadowOffsetY 

定义 阴影 的 横向 和 纵向 偏 移 量 。 取 值 越 大 ， 产 生 阴影 的 对 象 看 起 来 就 


像 在 背景 上 漂 得 越 高 。 默 认 值 为 0。 这 两 个 值 与 坐标 空间 的 单位 相同 ， 
依赖 于 当前 变换 。 


any strokeStyle 


定义 接 边 (或 绘制 ) 路 径 的 颜色 、 图 案 或 渐变 。 这 个 属性 的 值 可 以 是 
个 CSS 闫 色 字 人 符 串 ， 也 可 以 是 一 个 CanvasGradient 或 CanvasPattermn 对 


string textAlign 


定义 文本 的 水 平 对 齐 方式 ， 其 对 应 的 X 坐 标 值 会 传递 给 fillText() 及 
strokeText()。 人 允许 的 值 有 "left"、"center"、"right"、"start" 以 

及 "end"。"start" 和 "end" 的 含义 取决 于 当前 <canvas> 标签 的 dir (文字 
方向 ) 属性 。 黑 认 值 为 "start"。 


string textBaseline 


定义 文本 的 牌 直 对 齐 方式 ， 其 对 应 鸭 Y 坐 标 值 会 传递 给 fillTextO 及 
strokeText()。 人 允许 的 值 


有 "top"、"middle"、"bottom"、"alphabetic"、"hanging" 以 
及 "ideographic"。 默 认 值 为 "alphabetic"。 


廊 尖 
void arc(double x,y,radius,startAngle,endAngle,[boolean anticlockwise]) 


这 个 方法 根据 指定 的 圆心 及 半径 在 画布 的 当前 子路 径 上 绘制 一 段 圆 
弧 。 该 方法 的 前 三 个 参数 指定 一 个 圆 的 圆心 及 半径 ， 接 下 来 两 个 参数 
定义 这 个 贺 上 的 一 段 圆 弧 的 起 点 及 终点 的 角度 ， 角 度 的 单位 为 弧度 
制 。 沿 着 X 轴 正 向 的 3 点 钟 方向 是 0° ， 沿 顺 时 针 方 向 角度 增加 。 最 后 一 
个 参数 定义 是 角度 是 沿 圆周 的 逆 时 针 方 向 (true) 还 是 顺 时 针 方 向 
(false 或 省略) 。 


调用 这 个 方法 会 在 先 在 当前 路 径 中 的 当前 点 与 圆 弧 起 点 之 间 添 加 一 条 
直线 ， 然 后 再 添加 圆 弧 本 吴 。 


void arcTo(double x1,y1,x2,y2,radius) 


这 个 方法 在 当前 子路 径 中 添加 一 条 直线 和 一 个 圆 弧 ， 并 以 某 种 方式 擅 
述 圆 弧 ， 从 而 使 它 在 为 多 边 形 添 加 圆 角 时 特别 有 用 。 参 数 x1、y1 定 义 
点 P1， 参 数 x2、y2 定 义 点 P2， 添 加 到 路 径 中 的 圆 缴 是 一 个 半径 为 radius 
的 圆 的 一 部 分 。 圆 弧 上 有 一 点 与 当前 点 到 P1 之 间 的 连 线 相 切 ， 一 点 与 
P1、P2 之 间 的 连 线 相 切 。 这 两 个 相 切 点 也 是 圆 弧 的 起 点 及 终点 ， 绘 制 
的 圆 弧 为 连接 这 两 个 点 的 最 短 圆 狐 。 在 添加 圆 弧 到 路 径 中 之 前 ， 这 个 
方法 先 从 当前 点 到 圆 弧 的 起 点 添加 一 条 直线 。 调 用 这 个 方法 后 ， 当 前 
点 将 位 于 圆 缴 的 终点 位 置 ， 在 Pl1 和 P2 之 则 的 连 线 上 。 


给 定 一 个 上 下 文 对 象 c， 可 以 用 类 似 下 面 的 代码 来 绘制 一 个 100x100 的 
圆 角 (多 个 半径 ) 和 矩形: 


c.beginpath(); 


c.moveTo(150,100);// 在 顶部 边线 的 中 间 开 始 


: 
器 


c.arcTo(200,100,200,200, 40);// 画 顶部 的 边线 以 及 在 


器 


罚 角 (小 一 点 ) 


c.arcTo(200,200,100,200, 30);// 画 右 部 的 边线 以 及 在 


c.arcTo(100,200,100,100, 20);// 画 底部 的 边线 以 及 万 


图 


c.arcTo(100,100,200,100, 10);// 画 左 部 的 边线 以 及 左上 角 


图 


c,closePath( ) ;// 回 到 起 点 


c.stroke();// 绘 制 路 径 


void beginPath() 


beginPath() 丢 弃 当 前 定义 的 路 径 并 开始 一 条 新 的 路 径 。 调 用 beginPath() 
之 后 没有 当前 点 。 


首次 创建 画布 的 上 下 文 时 ，beginPathO) 会 隐 舍 地 调用 。 

void bezierCurveTo(double cpxl1,cpy1,cpx2,cpy2,X,y) 

bezierCurveTo0 添 加 一 条 三 次 贝 赛 尔 曲线 到 画布 的 当前 于 路径 中 。 曲 线 
的 起 点 是 画布 的 当前 点 ， 终 点 是 (x,y)， 两 个 贝 塞 尔 控制 点 (cpX1,cpY1) 
及 (cpX2,cpY2) 定 义 曲线 的 形状 。 当 这 个 方法 返回 时 ， 当 前 点 是 (xy) 。 
void clearRect(double x,y,width, height) 


clearRectO 使 用 透明 凌 色 填充 指定 的 窍 形 区 域 。 不 像 rect0， 它 不 会 影响 
当前 点 或 当前 路 径 。 


void clip() 


这 个 方法 计算 当前 路 径 和 当前 裁剪 区 域 中 的 相交 部 分 ， 并 将 这 个 较 小 
的 区 域 作为 新 的 裁 艾 区 域 返 回 。 注 意 裁 榴 区 域 是 没 法 扩大 的 ， 如 果 你 
只 是 想 要 一 个 临时 的 裁 鸡 区 域 ， 你 应 该 先 调 用 save() 保 存 当 前 状态 ， 以 
便 迟 些 调用 restore0 恢 复 为 之 前 的 状态 。 画布 稚 认 的 裁 筋 区域 为 画布 目 
身 的 矩形 区 域 。 


类 似 于 fil0 方 法 ，dlip0 将 所 有 子路 径 视 为 天 闭 ， 并 使 用 非 零 环绕 规则 
来 判定 路 径 的 内 部 与 外 部 。 


void closePath() 


如 果 当 前 画布 的 子路 径 未 闭合 ，closePath0) 会 通过 在 当前 点 与 这 条 子路 
径 的 第 一 个 点 之 间 添 加 一 条 连 线 来 闭合 它 ， 并 〈 吏 像 调用 moveTo0) 一 
样 ) 在 同一 个 点 开始 一 条 新 的 子路 径 。 


fil0 和 clipO 总 是 将 子路 径 当 做 闭合 的 来 处 理 ， 所 以 ， 只 有 在 想 为 一 条 
封闭 路 径 撒 边 (通过 stroke()) 时 才 需 要 显 式 调用 closePath()。 


ImageData createImageData(ImageData imagedata) 
返回 一 个 和 传 入 的 imagedata 尺 寸 相 同 的 新 的 InageData 对 象 。 
ImageData createImageData(double w,double h) 


返回 一 个 指定 宽度 和 高 度 的 新 ImageData 对 象 。 这 个 新 ImageData 对 象 中 
的 所 有 像素 都 初始 化 为 透明 黑色 (所 有 颜色 和 alpha 值 都 为 0) 。 


参数 w 和 h 定 义 图 片 的 太 寸 ， 单 位 为 CSS 像 素 。 在 实际 实现 中 ， 人 允许 一 
个 CSS 像 素 映 里 到 多 个 底层 设备 的 像素 。 返 回 的 ImageData 对 象 的 width 
a 图 像 尺 寸 ， 这 两 个 值 与 参数 w 和 h 可 能 不 一 


CanvasGradient createLinearGradient(double x0,y0,x1,y1) 


这 个 方法 生成 并 返回 一 个 新 的 CanvasGradient 对 象 ， 其 中 颜色 从 起 点 
(x0,y0) 到 终点 (x1,y1) 之 间 线 性 渐变 。 注 意 ， 这 个 方法 并 没有 指定 渐变 的 
颜色 ， 如 果 要 指定 颜色 ， 使 用 它 返 回 对 象 的 addColorStop0) 方 法 。 如 要 
绘制 渐变 描 边 或 填充 区 域 ， 只 须 将 一 个 CanvasGradient 对 象 赋值 给 
strokeStyle 或 fillStyle 属 性 。 


CanvasPattern createPattern(Element image,string repetition) 
这 个 方法 生成 并 返回 一 个 CanvasPattermm 对 象 ， 这 个 对 象 表 示 由 一 幅 平 铺 
图 像 定 义 的 图 案 。 参 数 image 必 须 是 一 个 <img>>、<canvas> 或 < 


video 元 杂 ， 包 含 图 案 中 要 使 用 的 图 像 。 参 数 repetition 定 义 图 片 如 何 
平 铺 。 可 能 的 值 有 : 


值 含义 

"repeat" 在 X 轴 方 各 和 Y 轴 方 问 部 平 铺 图 像 。 这 全 默 认 值 

"repeat-x" 只 在 x 轴 方 周平 铺 图 像 

"repeat-y" 只 在 Y 轴 方 巾 平 铺 图 像 

"no-repeat" 不 平 铺 图 像 ， 图 像 只 绘制 一 次 
如 要 使 用 图 案 来 撞 边 或 填充 一 个 区 域 ， 可 将 CanvasPattern 对 象 作为 
strokeStyle 或 fillStyle 属 性 的 值 。 
CanvasGradient createRadialGradient(double x0,y0,r0,x1,y1,r1) 
这 个 方法 创建 并 返回 一 个 新 的 CanvasGradient 对 象 ， 其 中 颜色 在 两 个 指 
定 的 圆 的 圆周 之 间 辆 射 渐变 。 注 意 ， 这 个 方法 并 没有 指定 渐变 的 颜 
色 ， 如 果 要 指定 颜色 ， 使 用 它 返 回 对 象 的 addColorStop0) 方 法 。 如 要 绘 
制 渐变 描 边 或 填充 区 域 ， 只 须 将 一 个 CanvasGradient 对 象 赋值 给 
strokeStyle 或 fillStyle 属 性 。 


辑 射 渐变 的 泻 染 方式 如 下 :在 第 一 个 圆 的 圆周 处 颜色 偏 移 量 为 0， 在 第 
二 个 圆周 处 闫 色 偏 移 量 为 1， 两 个 圆 之 间 为 渐变 的 中 间 色 。 


void drawImage(Element image,double dx,dy,[dw,dh]) 


复制 指定 image (这 幅 图 像 必 须 是 一 个 <img>>、<canvas>> 或 <video 
> 元 素 ) 到 男 布 中 ， 图 像 的 左上 角 位 置 为 (dx,dy)。 如 果 指 定 dw 和 dh,， 
图 像 的 宽度 和 高 度 会 缩放 到 dw 像 素 宽 和 dh 像素 高 。 


void drawImage(Element image,double sx,sy,sw,sh, dx,dy,dw,dh) 


这 个 版 本 的 drawImage() 方 法 复制 指定 image 的 一 个 源 和 矩形 区 域 的 内 容 到 
画布 的 目标 矩形 区 域 。image 必 须 是 一 个 <img>>、<canvas> 或 < 
video > 元 素 。(sxsy) 定 义 图 像 的 源 和 矩形 区 域 的 左上 角 ，sw 和 sh 定义 源 
和 矩形 区 域 的 宽度 和 高 度 。 注 意 这 些 参 数 的 单位 为 CSS 像 素 并 和 画布 的 变 
换 无 天 。 其 余 的 参数 指定 图 像 要 复制 到 的 目标 矩形 区 域 ， 细节 可 参考 5 


中 人 注意 目标 和 矩形 区 域 的 参数 会 根据 当前 转换 矩 


void fl0) 


fill() 方 法 使 用 fillstyle 属 性 定义 的 颜色 、 渐 变 或 图 案 对 当前 路 径 进 行 填 
充 。 没 有 闭合 的 子路 径 在 填充 时 将 表现 得 如 同调 用 过 closePath() 方 法 一 
样 。 (注意 ， 这 并 不 会 让 这 些 子路 径 真 的 闭合 。) 

填充 一 条 路 径 并 不 会 清除 掉 这 条 路 径 ， 在 调用 fil0 之 后 ， 仍 然 可 以 调用 
stroke() 而 不 需 重 定义 这 条 路 径 。 


如 果 路 径 与 自身 相交 或 者 与 子路 径 重 于 ， 填 充 〈 使 用 fll0) 画布 将 使 用 
非 零 环绕 规则 来 判断 一 个 点 是 在 路 径 的 内 部 还 是 外 部 。 这 意味 着 ， 举 
例 来 说 ， 如 果 你 的 路 径 定 义 了 一 个 圆 和 正方 形 ， 正 方形 在 圆 的 内 部 并 
且 正 方形 的 路 径 的 绘制 方向 与 圆 的 路 径 的 绘制 方向 相反 ， 那 么 正方 形 
内 部 的 点 将 在 路 径 的 外 面 ， 不 会 被 填充 。 


void fillRect(double x,y,width,height) 
B30 
填充 。 


和 rect() 方 法 不 同 ， 科 1Rect() 对 当前 点 和 当前 路 径 没 有 影响 。 
void fillText(string text,double x,y,[double maxWidth]) 


fillText() 使 用 当前 字体 及 人 filStyle 属 性 绘制 text。 参数 x 和 y 定 义 文 本 应 该 
画 在 画布 的 什么 位 置 ， 但 这 两 个 参数 的 实际 值 分 别 受 到 textAlign 和 和 
textBaseline 属 性 的 影响 。 


如 果 textAlign 的 值 为 left 或 start (默认 值 ， 并且 画布 使 用 自 左 向 右 的 文本 
排版 (默认 情况 )  ， 或 者 如 果 textAlign 的 值 为 end 并 且 画 面 使 用 自 右 向 
左 的 文本 排版 ， 文 本 将 绘制 在 指定 的 X 坐 标的 右边 。 如 采 textAlign 的 值 
为 center， 文 本 将 在 指定 的 X 坐 标 处 水 平 居 中 。 在 其 他 情况 下 〈 如 果 
textAlign 的 值 为 "right"， 或 值 为 "end" 同 时 画布 使 用 自 左 向 右 的 文本 排 
版 ， 或 值 为 "start" 同 时 画布 使 用 自 右 向 左 的 文本 排版 ) ， 文 字 将 绘制 在 
指定 的 X 坐 标的 左边 。 


如 果 textBaseline 的 值 为 "alphabetic" 《默认 

值 ) 、"bottom" 或 "ideographic"， 大 多 数字 形 都 将 显示 在 指定 的 Y 坐 标 
上 方 。 如 果 textBaseline 是 "center"， 文 本 将 在 指定 的 Y 坐 标 处 大 致 和 年 
直 拓 中 。 如 果 textBaseline 的 值 为 "top" 或 "hanging"， 大 多 数字 形 都 将 显 
示 在 指定 的 Y 坐 标 下方 。 


可 选 参数 maxwidth 定 义 文本 的 最 大 宽度 。 如 果 text 的 宽度 有 可 能 超过 
maxWidth， 文 本 将 使 用 更 小 或 压缩 版 的 字体 来 绘制 。 


ImageData getImageData(double sx,sy,sw,sh) 


这 个 方法 的 参数 为 未 转换 的 坐标 ， 定 义 画 布 中 的 一 个 矩形 区 域 ， 它 将 
这 个 矩形 区 域 的 像素 数据 复制 到 一 个 新 的 ImageData 对 象 中 并 返回 该 对 
象 。 如 何 获 取 一 个 像素 的 红 、 绿 、 监 分 量 以 及 alpha 分 量 请 参考 
ImagData 部 分 。 


返回 像素 的 RGB 颜色 分 量 没 有 预 乘 alpha 值 。 如 果 请 求 的 矩形 的 某 个 区 
域 在 画布 之 外 ，ImageData 对 象 中 这 部 分 像素 的 值 为 透明 黑色 (全 为 
0) 。 如 果 该 实现 对 于 每 一 个 CSS 像 素 使 用 多 个 设备 像素 ， 则 返回 的 
ImageData 对 象 的 width 和 height 属 性 将 与 参数 sw 和 sh 不 同 。 类 似 于 
Canvas.toDataURL()， 这 个 方法 也 会 进行 安全 检验 ， 以 避免 跨 域 信息 沪 
露 。 只 有 当 画 布 是 “ 同 源 * 时 ，getImageData() 才 会 返回 一 个 ImageData 对 
象 ， 否 则 ， 它 将 抛 出 一 个 错误 。 如 果 一 张 画 布 上 包含 一 幅 图 片 (直接 
用 drawImage0 或 间接 地 通过 CanvasPattern 绘 制 ) ， 并 且 这 幅 图 片 与 包 
含 当前 画布 的 文档 的 源 不 同 ， 则 这 张 画 布 是 “ 非 同 源 * 的 。 同 样 ， 如 采 
画布 上 绘制 的 文字 使 用 了 来 目 不 同 源 的 Web 字 体 ， 它 是 “ 非 同 源 ” 的 。 


boolean isPointInPath(double x,y) 


如 果 指 定 的 点 在 当前 路 径 的 边缘 之 内 或 之 上 ，isPointInPath() 返 回 true; 
否则 返回 false。 指 定 的 点 没有 根据 当前 转换 矩阵 转换 。x 取 值 应 该 在 0 
一 canvas.width 之 则 ，y 取 值 应 该 在 0~canvas.height 之 间 。 


isPointInPath() 测 斌 的 是 未 转换 的 点 ， 因 为 它 的 设计 目的 是 做 “命中 测 
试 ” (hit-testing) : 比如 判断 用 户 的 鼠标 单 击 是 否 在 画布 上 当前 路 径 摘 
述 的 某 个 部 分 之 上 。 为 了 实现 “命中 测试 >， 鼠 标 坐 标 先 要 先 从 相对 于 
窗口 转换 为 相对 于 画布 。 如 果 屏 幕 上 画布 的 尺寸 和 width 及 height 属 性 定 
义 的 不 一 样 (比如 可 能 设置 了 style.width 和 style.height) ， 鼠 标 坐 标 还 


需要 缩放 到 与 画布 坐标 一 致 。 下 面 这 个 函数 是 一 个 < canvas> 对 象 的 
的 示例 ， 它 做 了 必要 的 转换 以 便 姐 标 坐 标 与 画布 坐标 


// 一 个 canvas 标 签 的 oncLick 处 理 程序 ， 假 设 当前 已 定义 一 条 路 径 


function hittest(event ){ 


var canvas=this;// 在 画布 上 下 文中 调 


可 布 的 绘图 上 下 文 


var c=canvas.getContext("2d");// 取 得 


// 取 得 画布 的 尺寸 与 位 置 


var bb=canvas .getBoundingclientRect();// 将 鼠标 事件 的 坐标 转换 为 画布 坐标 


Var x=(event.clientX-bb.left)*(canvas.width/bb.width); 


var y=(event.clientY-bb.top)*(canvas.height/bb.height );// 如 果 用 户 在 指定 路 径 上 单 击 ， 将 其 填充 


if(c.ispointInpath(x,y))c.fill(); 


void lineTo(double x,double y) 


lineTo() 方 法 在 当前 子路 径 中 添加 一 条 直线 ， 直 线 从 当前 点 开始 ， 到 
(x,y) 结 束 。 这 个 方法 返回 后 ， 当 前 点 是 (Xx,y)。 


TextMetrics measureText(string text) 


measureText() 测 量 在 当前 字体 下 指定 text 将 占据 多 大 的 宽度 ， pi 
包含 测量 结果 的 TextMetrics 对 象 。 在 写 这 本 书 的 时 候 ， 返 (有 一 
个 width 属性 ， 文 本 的 高 度 和 边框 都 还 没有 测量 。 


void moveTo(double x,double y) 


moveTo0 将 当前 点 设置 为 K7)， 并 以 这 个 点 作为 第 一 个 氮 ， 开 始 一 条 新 
的 子路 径 。 如 采 之 前 有 一 条 子路 径 ， 并 且 这 条 子路 径 只 包含 一 个 点 ， 
那么 这 条 空子 路 径 将 会 从 路 径 中 移 除 。 


void putImageData(ImageData imagedata,double dx,dy,[sx,sy,sw,sh]) 


putImageData0 方 法 从 一 个 ImageData 对 象 中 复制 一 个 矩形 像素 块 到 当前 
画布 中 。 这 是 一 个 低级 的 像素 复制 操作 : globalCompositeOperation 和 
globalAlpha 属 性 被 忽略 ， 同 样 被 忽略 的 还 有 剪 切 区 域 、 转 换 和 矩阵 以 及 
阴影 绘制 属性 。 


参数 dx、dy 定 义 画 布 上 的 目标 点 ，data 中 的 像素 复制 到 画布 中 后 会 从 这 
个 护 开 始 绘制 。 这 两 个 参数 不 会 锐 当 前 转换 知 阵 转换 。 


最 后 4 个 参数 定义 ImageData 中 的 一 个 源 矩 形 区 域 。 如 采 指 定 ， 则 只 有 
这 个 起 形 之 内 的 像素 才 会 复制 到 画布 中 。 如 采 这 4 个 参数 省 略 ， 则 
ImageData 中 的 所 有 像 隶 都 会 复制 。 如 果 这 4 个 参数 定义 的 窍 形 区 域 大 
于 ImageData 的 范围 ， 则 和 形 区 域 会 裁剪 至 这 个 范围 。 参 数 sx 及 sy 的 值 
可 以 为 负数 。 


ImageData 对 象 的 用 途 之 一 是 将 它 用 做 画布 的 “备份 存储 器 ”一 一 保存 画 
布 像素 的 一 份 副本 到 一 个 ImageData (使 用 getImageData()) 对 象 中 ， 在 
画布 上 临时 绘画 ， 然 后 使 用 putImageData() 方 法 将 它 恢复 到 初始 状态 。 


void quadraticCurveTo(double cpx,cpy,X,y) 


这 个 方法 添加 一 条 二 次 贝 塞 尔 曲线 段 到 当前 子路 径 中 。 曲 线 从 当前 点 
开始 ， 到 (x,y) 结 束 。 控 制 点 (cpX,cpY) 指 定 起 点 与 终点 间 的 曲线 的 形 
状 。 (不 过 ， 贝 塞 尔 曲线 的 数学 知识 超出 了 本 书 的 范围 。) 这 个 方法 
返回 时 ， 当 前 点 为 (x,y)。 也 可 以 参考 bezierCurveTo() 方 法 。 


void rect(double x,y,w,h) 


这 个 方法 添加 一 个 矩形 到 当前 路 径 中 。 这 个 矩形 在 自己 的 子路 径 中 ， 
与 当前 路 径 的 其 他 子路 径 都 不 相连 。 这 个 方法 返回 时 ， 当 前 点 是 
(X,y)。 这 个 方法 与 下 面 的 调用 序列 等 价 : 


c.moveTo(x,y); 


c.lineTo(x+w,y); 
c.lineTo(x+w,y+h); 
c.lineTo(x,y+h); 


c.closepath(); 


void restore() 
这 个 方法 从 已 保存 的 绘图 状态 的 栈 中 弹出 最 后 一 个 保存 状态 ， 并 根据 


这 个 状态 重 置 CanvasRenderingContext2D 的 各 项 属性 、 和 裁剪 路 径 以 及 转 
换 和 矩阵。 更 多 信息 请 参考 save() 方 法 。 


void rotate(double angle) 


这 个 方法 改变 当前 转换 矩阵 ， 接 下 来 这 张 画布 上 绘制 的 任何 对 象 都 将 
旋转 指定 的 角度 。< canvas> 元 素 本 号 并 没有 旋转 。 注 意 角 度 的 单位 是 
弧度 制 。 角 度 转 换 为 弧度 的 方法 为 : 乘 以 Math.PI， 再 除 以 180。 


void Save() 


save() 将 复制 当前 绘图 状态 ， 并 将 这 个 副本 压 入 已 保存 的 绘图 状态 栈 
J 束 可 以 临时 改变 绘图 状态 ， 然 后 再 调用 restore() 恢 复 到 之 前 


画布 的 绘图 状态 包含 CanvasRenderingContext2D 对 象 的 所 有 属性 (除了 
只 读 的 canvas 属 性 ) 。 它 也 包含 由 于 调用 rotate()、scale() 及 translate() 会 
影响 到 的 转换 矩阵 ， 以 及 由 clip(0) 方 法 定义 的 裁剪 路 径 。 但 是 ， 需 要 注 
当前 路 径 与 当前 位 置 不 是 绘图 状态 的 一 部 分 ， 不 会 被 这 个 方 

全 人 怀 仔 。 


void scale(double sx,double sy) 


scale(0 诡 加 一 个 缩放 转换 到 画布 的 当前 转换 矩阵 中 。 缩 放 在 水 平方 回 与 
垩 直方 向 上 是 相互 独立 的 。 例 如 ， 传 入 参数 2.0、0.5， 在 接 下 来 的 绘画 
中 ， 路 径 的 宽度 将 变 成 原来 的 两 倍 ， 高 度 变 为 原来 的 一 半 。 如 果 参 数 $ 
x 为 人 负数，X 轴 将 水 平 翻转 ， 如 果 参 数 s y 为 负数 ，Y 轴 将 垂直 翻转 。 


void setTransform(double a,b,c,d,e,f) 


这 个 方法 允许 直接 设置 当前 转换 和 矩阵， 而 无 须 多 次 调用 translate0 、 
scale(0 及 rotate0)。 调 用 这 个 方法 后 ， 新 的 转换 如 下 : 


X” = AC EX 
Dd 3 
和 4 必要 


void stroke() 


stroke0 方 法 为 当前 路 径 描 边 。 定 义 线条 的 几何 形态 的 路 径 将 会 显现 出 
来 ， 但 线条 的 视觉 效果 取决 于 strokeStyle、1lineWidth、1lineCap、lineJoin 
以 及 miterLimit 属 性 。 


术语 描 边 (stroke) 指 钢笔 或 刷子 描 边 ， 它 的 意思 是 “绘制 …… 的 外 边 
线 ”。 与 stroke0 对 应 的 是 f10 方 法 ， 这 个 方法 对 路 径 的 内 部 进行 填充 ， 
而 不 是 绘制 它 的 外 边线 。 


void strokeRect(double x,y,w,h) 


这 个 方法 根据 指定 的 位 置 及 尺寸 ， 绘 制 一 个 矩形 边框 (但 不 对 其 内 部 
填充 ) 。 线 条 颜色 及 宽度 由 strokeStyle 及 lineWidth 属 性 定义 ， 矩 形 边 角 
的 外 观 由 lineJoin 属 性 定义 。 


和 rect(0) 方 法 不 同 ，stokreRect0 不 会 影响 当前 路 径 和 当前 点 。 


void strokeText(string text,double xy[maxWidth]) 


strokeText() 和 fillText() 很 类 似 ， 除 了 它 不 是 根据 fillstyle 填 充 每 一 个 字 
形 ， 而 是 根据 strokeStyle 对 每 一 个 字形 进行 描 边 。 当 使 用 大 号 字体 时 ， 
strokeText() 会 生成 一 些 有 趣 的 图 形 效 果 ， 不 过 在 实际 应 用 中 ，fillText() 
更 常用 。 


void transform(double a,b,c,d,e,f) 


这 个 方法 的 参数 定义 一 个 3x3 仿 射 转换 矩阵 T 的 6 个 重要 元 素 : 


Oy 
© en 
hm 


transform() 方 法 将 当前 转换 矩阵 的 值 设置 为 这 个 转换 矩阵 与 T 的 积 : 


CTM'=CTMxT 


平移 (translation) 、 缩 放 以 及 旋转 都 可 以 通过 这 个 通用 的 transform() 方 
法 实现 。 对 于 平移 来 说 ， 调 用 transform(1,0,0,1,dx,dy) 即 可 。 对 于 缩放 来 
说 ， 调 用 transform(sx,0,0,sy0,0) 即 可 。 对 于 以 原点 为 中 心 顺 时 针 旋 转角 
度 x 的 操作 来 说 ， 可 以 使 用 : 


transform(cos(x),sin(x),-sin(x),cos(x),0,0) 
对 于 以 平行 于 X 轴 的 因 了 于 kj 井 行 的 裁剪 来 说 ， 调 用 transform(1,0,k,1,0,0) 
即 可 。 对 于 以 平行 于 Y 轴 的 裁剪 ， 调 用 transform(1,k,0,1,0,0) 即 可 。 


void translate(double x,double y) 


translate() 方 法 为 当前 画布 的 转换 甜 阵 添 加 水 平和 垩 直 的 偏 移 量 。 参 数 
dx、dy 将 添加 到 所 有 随后 定义 的 路 径 的 每 一 个 点 上 。 


ClientRect 

元 素 边 框 

ClientRect 对 象 定义 一 个 矩形 ， 使 用 窗口 或 视 口 (viewport) 坐标 。 
Element 对 象 的 getBoundingClientRect() 方 法 返回 这 类 对 象 ， 用 于 描述 元 
素 在 屏幕 上 的 边框 。ClientRect 对 象 是 在 x 方 向 上 静态 的 (x static) : 当 
它 摘 述 的 元 隶 发 生 改 变 时 ， 它 不 会 发 生变 化 。 

属性 


readonly float bottom 


视 口 坐标 中 抢 形 确 边 的 Y 坐 标 。 


readonly float height 


和 矩形 的 高 度 ， 单 位 为 像素 。 在 IE8 及 更 早 的 版 本 中 ， 这 个 属性 未 定义 ， 
在 这 些 版 本 中 可 使 用 bottom-top 代 替 。 


readonly float left 

视 口 坐标 中 矩形 左边 的 X 坐 标 。 
readonly float right 

视 口 坐标 中 矩形 右边 的 X 坐 标 。 
readonly float top 

视 口 坐标 中 矩形 项 边 的 Y 坐 标 。 
readonly float width 


和 矩形 的 宽度 ， 单 位 为 像素 。 在 下 8 及 更 早 的 版 本 中 ， 这 个 属性 未 定义 ， 
在 这 些 版 本 中 可 使 用 right-left 代 巷 。 


CloseEvent 
说 明 一 个 WebSocket 是 否 干净 地 关闭 了 
Event 


当 一 个 WebSocket 连 接头 闭 时 ， 一 个 不 冒 泡 的 、 不 可 取消 的 关闭 事件 会 
在 这 个 WebSocket 对 象 上 触发 ， 对 应 的 CloseEvent 对 象 会 传 入 所 有 注册 
的 事件 处 理 程序 。 

属性 


readonly boolean wasClean 


如 果 WebSocket 连 接 在 WebSocket 协 议 的 控制 下 关闭 ， 并 且 服 务 右 及 客 
户 端 都 成 功 确认 ， 则 这 个 关闭 称 为 干净 的 ， 这 个 属性 值 为 tue。 如 采 属 
性 值 为 false，WebSocket 可 能 是 由 于 某 种 网 络 错误 而 关闭。 


Comment 

HTML 或 XML 注释 

Node 

Comment 节 点 表示 HTML 或 XML 文 档 中 的 注释 。 注 释 的 内 容 〈 即 “< !- 
-” 与 “-->” 之 间 的 文本 ) 可 以 通过 data 属 性 或 者 从 Node 继 承 而 来 的 
nodeValue 属 性 获取 。 可 通过 Document.createComment() 方 法 创建 一 个 注 
释 对 象 。 

属性 

string data 

注释 的 文本 内 容 。 

readonly unsigned long length 

注释 包含 的 字符 个 数 。 

方法 

void appendData(string data) 

void deleteData(unsigned long offset,unsigned long count) 

void insertData(unsigned long offset,string data) 


void replaceData(unsigned long offset,unsigned long count,string data) 


string substringData(unsigned long offset,unsigned long count) 


Comment 节 点 有 Text 节 点 的 大 部 分 方法 ， 这 些 方法 和 Text 节 点 中 的 效果 
也 一 样 。 它 们 列 在 这 儿 ， 不 过 相关 文档 请 参考 Text 。 


Console 
调试 输出 


现代 浏览 器 (以 及 一 些 装 了 Firebug 等 调试 器 扩展 的 老 浏览 器 ) 定义 一 
个 全 局 的 console 属 性 ， 对 应 一 个 Console 对 象 。 这 个 对 象 的 方法 定义 一 
些 简单 调试 任务 的 API， 比 如 将 消息 输出 到 一 个 控制 台 窗 口 (这 个 控制 
台 可 能 有 "Developer Tools" 或 "Web Inspector" 等 名 字 ) 中 。 

Console API 还 没有 一 个 正式 的 标准 ， 不 过 ，Firefox 的 Firebug 调 试 侨 扩 
展 已 经 建立 了 一 个 事实 标准 ， 浏 贤 右 三 商 看 起 来 正在 实现 Firebug 的 
API， 有 关 文 档 在 下 面 。 基 本 的 console.log0 函 数 在 几乎 所 有 浏 跑 恬 中 都 
文 持 ， 但 其 他 函数 在 各 浏览 硕 中 的 文 持 情况 束 没 这 么 好 。 


注意 ， 在 一 些 较 老 的 浏 贤 器 中 ， 只 有 在 控制 台 窗 口 打开 时 console 属 性 

才 有 定义 ， 如 果 在 控制 台 天 闭 的 情况 下 运行 那些 使 用 Console API 的 脚 
会 导致 错误 。 

也 可 以 参考 ConsoleCommandLine 。 

a 


void assert(any expression,string message) 


如 采 expression 为 false 或 null、undefined、0、 至 字符 串 等 非 真 值 ， 这 个 
方法 将 在 控制 台中 显示 销 误 消息 message。 


void count([string title]) 


显示 指定 的 title 字符 串 ， 后 面 跟着 一 个 计数 ， 表 示 这 个 方法 以 该 字 答 旨 
为 参数 调用 过 的 次 数 。 


void debug(any message...) 


类 似 于 console.log0， 但 将 输出 标记 为 调试 信息 。 


void dir(any object) 


在 控制 台 显 示 传 入 的 JavaScript object， 人 允许 开发 者 检查 这 个 对 象 的 属性 
及 元 素 ， 也 可 以 交互 式 地 浏览 租 套 的 对 象 或 数组 。 


void dirxml(any node) 


在 控制 台中 显示 文档 对 象 node 的 XML 或 HTML 标 记 。 


void error(any message...) 

类 似 于 console.log(0)， 但 将 输出 标记 为 错误 。 

void group(any message...) 

与 log0 方 法 一 样 显示 message 消 恩 ， 但 将 它 显 示 为 一 组 可 折 登 的 调 试 消 
居 的 标题 。 接 下 来 所 有 的 控制 台 输 出 都 会 格式 化 为 这 个 组 的 一 部 分 ， 
直到 一 个 对 应 的 groupEnd() 补 调用。 

void groupCollapsed(any message...) 


开始 一 组 新 的 消息 ， 但 以 折 县 状态 开始 ， 这 样 接 下 来 的 调试 输出 玖 认 
都 将 隐藏 。 


void groupEnd() 
结束 最 近 一 次 由 group0 或 groupCollapsed0 开 局 的 调试 信息 输出 组 。 
void info(any message...) 


类 似 于 console.log()， 但 将 输出 标记 为 信息 消息 。 


void log(string format,any message...) 


这 个 方法 将 它 的 参数 显示 在 控制 台中 。 在 最 简单 的 情况 下 ， 参 数 format 
不 含有 字符 %， 这 个 方法 将 简单 地 把 所 有 参数 转换 为 字符 串 ， 以 空格 作 
为 间隔 ， 并 显示 它们 。 如 果 传 入 的 是 一 个 对 象 ， 显 示 在 控制 台中 的 字 
符 串 将 是 可 单 击 的 ， 单 击 之 后 可 以 看 到 对 象 的 内 容 。 


对 更 复杂 的 日 志 消 息 来 说 ， 这 个 方法 文 持 C 语 言 printf() 的 格式 化 功能 的 
一 个 人 简单 子 集 。 参 数 message 将 插入 参数 format 中 


的 "96s"、"96d"、"96T"、"96f" 及 "96o" 等 位 置 ， 格 式 化 后 的 字符 串 将 在 控 
制 台 中 显示 (后 面 跟着 所 有 其 他 没 用 到 的 message 参 数 ) 。 蔡 换 "%s" 的 
参数 将 格式 化 为 字符 串 ， 替 换 "%d" 或 "%I" 的 将 格式 化 为 整数 ， 替 

换 "%f" 的 将 格式 化 为 浮 点 数 ， 蔡 换 "%o" 的 将 格式 化 为 可 单 击 的 对 象 。 


void profle([string title]) 

启动 JavaScript 分 析 絮 ， 在 报告 的 开始 处 显示 标题 title。 
void profleEnd() 

停止 分 析 器 ， 显 示 代 码 分 析 报 告 。 

void time(string name) 

以 指定 的 name 开 始 一 个 计时 器 。 

void timeEnd(string name) 


0 计时 塘 ， 显 示 名 字 及 目 对 应 的 time0 调 用 以 来 过 去 的 时 
间 。 


void trace() 
显示 一 个 栈 退 踩 。 
void warn(any message...) 


类 似 于 console.log0， 但 将 输出 标记 为 警告 


ConsoleCommandLine 
控制 台 窗 口 的 全 局 工具 


大 多 数 Web 浏 览 器 都 支持 JavaScript 控 制 台 (可 能 名 为 "Developer 
Tools" 或 "Web Inspector") ， 人 允许 输入 单独 的 几 行 JavaScript 代 码 。 除 客 
户 端 JavaScript 所 支持 的 普通 的 全 局 变量 及 方法 外 ， 控 制 台 命令 行 通常 
也 文 持 下 面 提 到 的 几 种 有 用 的 属性 及 方法 。 也 可 以 参考 Console API。 


属性 
readonly Element$0 


最 近 由 调试 套 的 其 他 功能 选中 的 文档 元 素 。 


readonly Element$1 
在 $0 之 前 选中 的 文档 元 素 。 
轧 这 


void cd(Window frame) 


当 一 个 文档 包含 岁 套 的 框架 页 面 时 ， cd0 柳 函数 允许 切换 全 局 对 象 并 在 指 
定 的 frame 的 作用 域 中 执行 接 下 来 的 命令 


void clear() 

清空 当前 控制 台 窗 口 。 

void dir(object o) 

显示 o 的 属性 或 元 素 ， 类 似 Console.dir0 。 

void dirxml(Element elt) 

以 XML 或 HTML 方 式 重新 显示 elt， 类 似 Console.dirxml()。 
Element$(string id) 

document.getElementById0 的 简写 。 

NodeL ist$$(string selector) 

返回 一 个 包含 所 有 匹配 指定 的 CSS 选 择 器 selector 的 元 素 的 类 数组 对 
象 。 这 是 document.querySelectorAll() 的 一 个 简写 。 在 有 些 控制 台中 ， 这 
个 方法 返回 一 个 真 的 数组 ， 而 不 是 一 个 NodeList 。 


void inspect(any object,[string tabname]) 


显示 对 象 object， 调 试 右 可 能 会 从 控制 台 切 换 到 邦 一 个 标签 中 。 第 二 个 
参数 是 可 选 的 ， 定 义 你 希望 对 象 如 何 显示 ， 支 持 的 值 可 能 

有 "html" ~、 "css"、 "script" 以 及 "dom" S 

string[jkeys(any object) 

以 数组 的 形式 返回 object 的 属性 名 。 


void monitorEvents(Element object,[string type]) 
记录 分 配给 object 的 指定 type 的 事件 。type 的 值 可 以 
为 "mouse"、"key"、"text"、"load"、"form"、"drag" 以 及 "contextmenu"。 
如 果 type 省 略 ， 关 于 object 的 所 有 事件 都 将 记录 。 
void profle(string title) 

开始 代码 分 析 。 参 见 Console.profile()。 

void profleEnd() 

结束 分 析 。 参 见 Console.profileEnd()。 

void unmonitorEvents(Element object, [string type]) 
停止 监视 object 的 指定 type 的 事件 。 

any[jvalues(any object) 

以 数组 的 形式 返回 object 对 象 的 所 有 属性 的 值 。 
CSS2Properties 

参见 CSSStyleDeclaration 

CSSRule 

Css 样 式 表 规则 

说 明 


CSSRule 对 象 表示 一 个 CSSStyleSheet 中 的 一 条 规则 : 它 表 示 应 用 到 一 组 
特定 文档 元 素 的 样式 信息 。selectorText 为 这 条 规则 的 元 素 选 择 器 的 字符 
串 表 示 形 式 ，style 为 一 个 CSSStyleDeclaration 对 象 ， 表 示 应 用 到 选中 元 
素 上 的 样式 属性 及 值 的 集合 。 


CSS 对 象 模型 说 明 实 际 上 定义 一 个 CSSRule 子 类 型 的 体系 ， 可 用 于 表示 
CSS 样 式 表 中 可 能 出 现 的 各 种 规则 。 这 儿 列 出 来 的 属性 是 普通 的 
CSSRule 类 型 及 其 CSSStyleRule 子 类 型 的 属性 。 样 式 规 则 是 样式 表 中 最 
常见 也 最 重要 的 规则 ， 可 能 也 是 你 在 脚本 中 最 喜欢 使 用 的 规则 : 


在 IE8 及 更 老 的 版 本 中 ，CSSRule 对 象 只 支持 selectorText 及 style 属 性 。 


1 = 多 


吊 重 


unsigned Short STYLE_RULE=1 
unsigned short IMPORT _RULE=3 
unsigned Short MEDIA_RULE=4 
unsigned Short FONT_FACE_RULE=5 
unsigned Short PAGE_RULE=6 

unsigned Short NAMESPACE RULE=10 


这 些 是 下 面 的 type 属 性 可 能 的 值 ， 它 们 定义 它 是 哪 类 规则 。 如 果 type 的 
值 不 是 1，CSSRule 对 象 将 有 这 儿 没 有 列 出 的 一 些 属性 。 


属性 


string cssText 


当前 CSS 规 则 的 完整 文本 。 


readonly CSSRule parentRule 
包含 当前 规则 的 规则 ， 如 采 存 在 的 话 。 


readonly CSSStyleSheet parentStyleSheet 


包含 当前 规则 的 样式 表 。 
string selectorText 


如 有 果 type 为 STYLE_RULE， 这 个 属性 的 值 为 一 个 选择 器 文本 ， 该 选择 
铝 指 定 当 前 规则 应 用 到 的 文档 元 素 。 


readonly CSSStyleDeclaration style 


如 果 type 为 STYLE_RULE， 这 个 属性 定义 应 用 到 selectorText 指 定 的 元 素 
上 的 样式 。 注 意 ， 虽 然 style 属 性 本 身 是 只 读 的 ， 但 CSSStyleDeclaration 
对 象 对 应 的 属性 是 可 读 写 的 。 


readonly unsigned short type 

当前 规则 的 类 型 。 值 可 以 为 上 面 定 义 的 常量 之 一 。 
CSSStyleDeclaration 

CSS 属 性 及 值 的 集合 


CSSStyleDeclaration 对 象 表示 一 个 CSS 样 式 属 性 及 其 值 的 集合 ， 可 以 通 
过 和 CSS 属 性 名 相似 的 JavaScript 属 性 名 来 查询 或 设置 这 些 样式 的 值 。 
HTMLElement 的 style 属 性 是 一 个 可 读 写 的 CSS 风 格 声明 的 对 象 ， 
CSSRule 对 象 的 style 属 性 也 是 如 此 。 不 过 ，Window.getComputedStyle() 
的 返回 值 是 一 个 CSSStyleDeclaration 对 象 ， 其 属性 是 只 读 的 。 


CSSStyleDeclaration 对 和 象 使 得 CSS 样 式 属性 可 以 通过 JavaScript 属 性 来 访 
问 。 这 些 JavaScript 属 性 名 与 CSS 属 性 名 非 党 接近 ， 只 有 一 些小 改变 ， 

以 避免 JavaScript 中 的 语法 销 误 。 由 连 字符 连接 的 多 单词 的 属性 ， 例 
如 "font-family"， 在 JavaScript 中 将 没有 连 字 符 ， 同 时 除 第 一 个 词 外 每 个 
词 的 首 字母 大 写 : fontFamily。 男 外 ， 属 性 "float" 与 保留 词 float 冲 突 ， 
所 以 它 转变 为 属性 cssFloat。 注 意 ， 如 果 使 用 方 括号 及 字符 串 来 访问 属 
性 ， 可 以 使 用 未 修改 的 CSS 属 性 名 。 


属性 
除了 上 面 提 到 的，CSSStyleDeclaration 还 有 两 个 属性 : 


string cssText 


样式 属性 及 值 的 集合 的 文本 表现 形式 。 文 本 为 CSS 样 式 表 的 格式 ,但 没 
有 元 素 选 择 吉 及 包围 看 属性 及 值 鸭 花 括 号 。 


readonly unsigned long length 


当前 CSSStyleDeclaration 包 含 的 属性 / 值 对 的 数目 。CSSStyleDeclaration 
对 和 象 也 是 一 个 类 数组 对 象 ， 它 的 元 素 为 声明 的 CSS 样 式 的 属性 值 。 


CSSStyleSheet 

CSS 样 式 表 

这 个 接口 表示 CSS 样 式 表 。 它 包含 若干 用 于 禁用 样式 表 或 查询 、 插 入 以 
及 删除 CSSRule 样 式 规则 的 属性 及 方法 。 应 用 于 文档 的 CSSStyleSheet 对 
象 是 Document 对 象 的 styleSheets[] 数 组 的 成 员 ， 也 可 以 通过 定义 或 链接 
到 这 个 样式 表 的 <style> 或 <link> 元 素 的 sheet 属 性 来 访问 。 


在 IE8 或 更 早 的 版 本 中 ， 使 用 rules[] 代 检 cssRules[]， 同 时 ， 使 用 
addRule() 及 removeRule() 来 代 蕉 DOM 标 准 的 insertRule() 及 deleteRule()。 


属性 
readonly CSSRulel JcssRules 


一 个 只 读 的 类 数组 对 象 ， 维 护 组 成 样式 表 的 CSSRule 对 象 。 在 正中 对 应 
的 属性 为 rules。 


boolean disabled 


如 琳 为 trtue， 样 式 表 将 禁用 并 且 不 会 应 用 到 对 应 文档 中 。 如果 为 false， 
样式 表 将 局 用 并 会 应 用 到 文档 中 。 


readonly string href 
连接 到 当前 文档 的 样式 表 的 URL， 内 联 样式 表 的 这 个 属性 值 为 null 。 


readonly string media 


这 个 样式 表 可 应 用 的 媒体 列表 。 可 以 像 处 理 一 个 单独 的 字符 串 一 样 查 
询 或 设置 这 个 属性 ， 或 者 将 它 视 为 一 个 带 有 appendMedium() 和 
deleteMedium() 方 法 的 媒体 类 型 的 类 数组 对 象 。 (正式 一 点 说 ， 这 个 属 
性 的 值 为 一 个 MediaList 对 象 ， 但 本 参考 不 包含 这 个 类 型 。) 


readonly Node ownerNode 


“拥有 ”当前 样式 表 的 文档 元 素 ， 如 打 不 存在 则 为 nul。 参 见 Link 和 
Style。 


readonly CSSRule ownerRule 


引入 当前 样式 表 的 CSSRule (从 一 个 父 样 式 表 中 ) ， 如 果 当 前 样式 表 以 
其 他 方式 引入 则 此 项 值 为 mull。 《注意 ， 本 参考 中 的 CSSRule 条 目 仅 用 
文档 描述 样式 规则 ， 没 有 @import 规 则 。) 


readonly CSSStyleSheet parentStyleSheet 


引入 当前 样式 表 的 样式 表 ， 如 果 当 前 样式 表 直 接 包 仿 在 文档 中 则 此 属 
性 值 为 null 。 


readonly string title 


样式 表 的 标题 ， 如 果 指 定 的 话 。 标 题 可 以 通过 当前 样式 表 对 应 的 < 
style> 或 <link> 元 素 的 tite 属 性 来 设置 。 


readonly string type 

样式 表 的 MIME 类 型 。CSS 样 式 表 的 类 型 为 "text/css" 。 
方法 

void deleteRule(unsigned long index) 


本 方法 从 cssRule 数 组 中 删除 指定 index 的 规则 。 在 正 8 及 更 早 版 本 中 ， 相 
同 功 能 的 方法 为 removeRule()。 


unsigned long insertRule(string rule,unsigned long index) 


本 方法 在 当前 样式 表 的 cssRule 数 组 指定 index 处 输入 (或 追加 ) 一 条 新 
的 CSS rule 《定义 选择 器 和 由 花 括 号 包 着 的 样式 的 一 个 字符 串 ) 。 在 
IE8 及 更 早 版 本 中 ， 对 应 的 方法 为 addRule0， 该 方法 需 将 选择 器 及 格式 
作为 两 个 独立 的 参数 传 入 ， 再 将 索引 作为 第 三 
广 参 J 过 ° 


DataTransfer 
通过 拖 放 传递 数据 


用 户 进行 拖 放 操作 时 ， 拖 动 源 (drag source) 或 放置 目标 (drop 

target) (或 两 者 名 有 ， 如 果 它 们 都 在 浏览 器 窗口 中 ) 将 触发 一 系列 事 
件 ， 这 些 事件 都 包含 其 dataTransfer 属 性 (参见 Event) 指向 一 个 
DataTransfer 对 有 象 的 事件 对 象 。DataTransfer 对 象 是 所 有 拖 放 操作 的 中 心 
对 象 : 拖 动 源 将 要 传输 的 数据 存储 在 其 中 ， 放 置 日 标 将 传输 的 数据 从 
中 取出 。 除 此 之 外 ，DataTransfer 对 象 还 管理 拖 动 源 与 放置 目标 之 间 的 
一 个 协商 ， 决 定 当 前 拖 放 是 一 次 复制 、 移 动 还 是 链接 操作 。 


这 儿 描 述 的 API 最 初 是 微软 为 下 创建 的 ， 现 在 其 他 浏览 器 也 多 少 实现 了 
一 部 分 。HTML5 将 基本 的 IE API 作 为 标准 。 在 本 书 准 备 出 版 时 ， 
HTML5 定 义 了 API 的 一 个 新 版 本 ， 其 中 将 items 属 性 作为 
DataTransferItem 对 象 的 一 个 类 数组 对 象 。 这 个 API 很 吸引 人 也 很 合理 ， 
但 由 于 现在 还 没有 浏览 器 实现 它 ， 因 此 这 儿 没 有 描述 它们 的 文档 。 下 
面 是 在 当前 各 大 浏览 器 中 (基本 上 ) 都 能 工作 的 特性 。 关 于 这 个 古怪 
的 API 的 更 多 讨论 可 参考 17.7 节 。 


属性 

string dropEffect 

这 个 属性 定义 当前 对 象 表示 的 数据 传送 的 类 型 ， 它 的 值 必须 

为 "none"、"copy"、"move"、"copy" 或 "link" 之 一 。 一 般 情况 下 ， 放 置 目 
标 会 通过 dragenter 或 dragover 事 件 设置 这 个 属性 。 用 户 拖 暇 时 如 有 果 按 住 
了 辅助 键 也 可 能 影响 到 这 个 属性 的 值 ， 不 过 这 与 平台 有 关 。 


string effectAllowed 


这 个 属性 定义 了 当前 拖 放 操作 允许 的 复制 、 移 动 、 链 接 操 作 的 组 合 。 
它 通 常 由 拖 动 源 设置 并 啊 应 dragstart 事 件 。 人 允许 的 值 

有 "none"、"copy"、"copyLink"、"copyMove" 、"link"、"linkMov 
ove" 以 及 "all"。 (为 便于 记忆 ， 注意 那些 定义 两 个 操作 的 选项 ， 操作 名 
总 是 按 字母 顺序 排序 。) 


readonly File[jfles 


如 条 正在 拖 动 的 数据 是 一 个 或 多 个 文件 ， 这 个 属性 将 设置 为 一 个 由 文 
件 对 象 组 成 的 数组 或 类 数组 对 象 。 


readonly string[jtypes 


这 是 一 个 类 数组 对 象 字 符 串 ， 指 定 当 前 DataTransfer 对 象 中 存储 的 数据 

(如 果 拖 动 源 在 浏览 器 中 就 使 用 setDataO 〇 站， 如 果 在 浏览 器 之 外 就 使 用 其 
他 机 制 ) 的 MIME 类 型 。 保 存 这 些 类 型 的 类 数组 对 象 应 该 有 一 个 
contains() 方 法 ， 用 于 测试 一 个 特定 的 字符 串 是 否 存 在 。 有 此 浏览 器 仅 
使 这 个 对 象 是 一 个 真正 的 数组 ， 然 而 ， 在 这 样 的 情况 下 ， 也 可 以 使 用 
indexOfO 方 法 代替 。 


方法 


void addElement(Element element) 

这 个 方法 告诉 浏 损 亏 在 生成 用 户 可 见 的 拖 动 视觉 效 末 时 使 用 element 。 
中 调用， 在 有 坚 浏 贤 厦 中 它 可 能 没有 实现 或 没有 
效果 。 


void clearData([string format]) 
移 除 之 前 由 setData0 设 置 的 指定 format 的 数据 。 
string getData(string format) 


以 指定 的 format 返 回 传送 的 数据 。 如 果 format 为 (忽略 大 小 写 

的 ) "text"， 则 使 用 "text/plain" 代 苦 ， 如 果 为 (忽略 大 小 写 的) "url"， 则 
使 用 "texturl-list" 代 替 。 这 个 方法 在 拖 放 操作 结束 时 由 放置 目标 调用 ， 
以 响应 drop 事 件 。 


void setData(string format,string data) 


定义 要 传送 的 data 以 及 数据 的 MIME 类 型 format。 拖 动 源 在 拖 放 操 作 开 

始 时 调用 这 个 方法 ， 以 响应 dragstart 事 件 。 这 个 方法 不 能 从 任何 其 他 事 
件 处 理 程序 调用 。 如 果 拖 动 源 的 数据 在 多 种 格式 下 可 用 ， 那 么 它 可 以 

多 次 调用 这 个 方法 ， 以 便 注 册 每 一 种 支持 的 格式 的 值 。 


void setDragImage(Element image,1ong x,long y) 


这 个 方法 指定 一 个 image (一 般 为 一 个 <img> 元素) ， 用 于 在 拖 动 时 
向 用 户 显示 一 种 可 视 效 有 末 。x 和 和 y 华 标 给 定 图 片 相对 于 岁 标 指针 的 偏 移 
量 。 这 个 方法 只 能 被 拖 动产 调用 ， 以 啊 应 dragstart 事 件 。 

DataView 

从 ArrayBuffer 中 读 写 内 容 

ArrayBufferView 


DataView 是 包装 一 个 ArrayBuffer 〈 或 ArrayBufferr 的 一 个 区 域 ) 的 
ArrayBufferView， 它 定义 读 或 写 对 应 缓冲 区 的 1、2 及 4 个 字 广 的 有 符号 
和 无 符号 整数 以 及 4 及 8 个 字 市 的 浮 点 数 的 方法 。 这 些 方法 同时 支持 大 
端 (big-endian) 和 小 端 (little-endian) 字 节 顺序 。 也 可 参考 
TypedArray ° 


构 千 函数 


new DataView(ArrayBuffer buffer, [unsigned long byteoffset], [unsigned long 
byteLength]) 


这 个 构造 函数 创建 一 个 新 的 DataView 对 象 ， 人 允许 读 或 写 访问 buffer 或 
buffer 的 一 个 区 域 的 字 节 内 容 。 如 果 只 传 入 一 个 参数 ， 它 将 创建 整个 组 
冲 区 的 视图 ; 传 入 两 个 参数 ， 它 将 创建 缓冲 区 的 从 字 玫 数 byteOffset 开 


始 直 到 结尾 的 视图 ; 传 入 三 个 参数 时 ， 它 将 创建 一 个 从 byteOffset 开 始 
长 度 为 byteLength 字 节 的 视图 。 


方法 


这 些 方法 或 者 从 基础 的 ArrayBuffer 中 读 入 一 个 数值 ， 或 者 写 入 一 个 数 
值 。 方 法 名 标 出 了 是 读 或 写 的 类 型 。 所 有 读 或 写 超 过 一 个 字 节 的 方法 
都 接受 一 个 可 选 的 littleEndian 参 数 作为 最 后 一 个 参数 ， 如 果 这 个 参数 省 
略 或 者 为 false， 将 使 用 大 端 字 市 顺序 (big-endian byte ordering) ， 优 先 
读 或 写 最 高 有 效 字 节 (most significant byte) 。 如 果 参 数值 为 true， 将 
使 用 小 端 字 节 顺序 (little-endian byte ordering) 。 


float getFloat32(unsigned long byteOffset,[boolean littleEndian]) 

将 从 byteOffset 开 始 的 4 个 字 市 解释 为 一 个 浮 点 数 并 返回 这 个 数 子 。 
double getFloat64(unsigned long byteOffset,[boolean littleEndian]) 

将 从 byteOffset 开 始 的 8 个 字 市 解释 为 一 个 浮 点 数 并 返回 这 个 数 子 。 
short getInt16(unsigned long byteOffset,[boolean littleEndian]) 


将 从 byteOffset 开 始 的 两 个 子 太 解释 为 一 个 有 符号 整数 并 返回 这 个 数 
字 。 


long getInt32(unsigned long byteOffset,[boolean littleEndian]) 

将 从 byteOffset 开 始 的 4 个 字 太 解释 为 一 个 有 符号 整数 并 返回 这 个 数 子 。 
byte getInt8(unsigned long byteOffset) 

将 位 于 byteOffset 的 字 廊 解释 为 一 个 有 符号 整数 并 返回 这 个 数 子 。 
unsigned short getUint16(unsigned long byteOffset, [boolean littleEndian]) 


将 从 byteOffset 开 始 的 两 个 子 太 解释 为 一 个 无 符号 整数 并 返回 这 个 数 
字 。 


unsigned long getUint32(unsigned long byteOffset,[boolean littleEndian]) 


将 从 byteOffset 处 开始 的 4 个 字 广 解释 为 一 个 无 符号 整数 并 返回 这 个 数 
字 。 


unsigned byte getUint8(unsigned long byteOffset) 

将 位 于 byteOffset 处 的 字 市 解释 为 一 个 无 符号 整数 并 返回 这 个 数 子 。 
void setFloat32(unsigned long byteOffset,float value, [boolean littleEndian]) 
将 value 转 换 为 一 个 4 子 节 的 浮 点 数 并 将 对 应 子 让 在 byteOffset 位 置 写 入 。 


void setFloat64(unsigned long byteOffset, double value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 8 子 广 的 浮 点 数 并 将 对 应 字 广 在 byteOffset 位 置 写 入 。 
void setInt16(unsigned long byteOffset,short value,[boolean littleEndian]) 
将 value 园 换 为 一 个 2 子 广 的 整数 并 将 对 应 字 市 在 byteOffset 位 置 写 入 。 
void setInt32(unsigned long byteOffset,long value,[boolean littleEndian]) 
将 value 园 换 为 一 个 4 子 廊 的 整数 并 将 对 应 字 市 在 byteOffset 位 置 写 入 。 
void setInt8(unsigned long byteOffset,byte value) 

将 value 园 换 为 一 个 1 子 广 的 整数 并 将 对 应 字 廊 在 byteOffset 位 置 写 入 。 


void setUint16(unsigned long byteOffset,unsigned short value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 2 子 太 的 无 从 号 整数 并 将 对 应 子 太 在 byteOffset 位 置 写 


void setUint32(unsigned long byteOffset,unsigned long value,[boolean 
littleEndian]) 


将 value 转 换 为 一 个 4 子 太 的 无 从 号 整数 并 将 对 应 子 太 在 byteOffset 位 置 写 


〇 


void setUint8(unsigned long byteOffset,octet value) 


将 value 转 换 为 一 个 1 子 太 的 无 从 号 整数 并 将 对 应 子 太 在 byteOffset 位 置 写 
入 。 


Document 
HTML 或 XML 文档 
Node 


Document 对 象 是 文档 树 的 根 和 点 ，documentElement 属 性 是 文档 的 根 元 
素 。Document 广 点 可 以 有 其 他 子 方太 (比如 Comment 及 DocumentType 
节点 ) ， 不 过 它 只 有 一 个 保存 文档 所 有 内 容 的 Element 子 方 点 。 


大 多 数 情况 下 获取 一 个 Document 对 象 的 方法 是 通过 窗口 的 document 属 
性 。Document 对 象 也 可 以 通过 IFrame 元 素 的 contentDocument 属 性 或 任 
意 节 点 的 ownerDocument 属 性 获取 。 


Document 对 象 的 大 多 数 属性 提供 了 对 文档 元 素 或 其 他 与 文档 相关 的 重 

要 对 象 的 访问 ， 一 些 Document 方 法 做 同样 的 事 ， 提供 一 个 方法 在 文档 

， 。 许多 其 他 Docuemnt 方 法 是 创建 元 素 及 相关 对 象 的 “工厂 
I 


和 包含 的 元 素 一 样 ， 文 档 也 可 以 是 事件 的 目标 对 象 。 它 实现 EventTarget 
定义 的 方法 ， 也 支持 不 少 事件 处 理 程序 属性 。 


可 以 使 用 DOMImplementation 的 createDocument() 和 
createHTMLDocument() 方 法 来 生成 一 个 新 的 Document 对 象 : 


document ,. Implementation,.createHTMLDocument("New Doc"); 


也 可 以 从 网 络 上 下 载 一 个 HTML 或 XML 文件 并 将 它 解析 为 Document 对 
象 。 参 见 XMLHttpRequest 对 象 的 responseXML 属 性 。 


本 书 之 前 的 版 本 中 关于 HTMLDocument 的 参考 已 经 合并 到 这 儿 了 。 注 
意 ， 这 儿 列 举 的 一 些 属性 、 方 法 及 事件 处 理 程序 是 HTML 特 有 的 ， 在 


XML 文档 下 不 能 工作 。 
属性 


除 这 儿 列 出 的 属性 外 ， 也 可 以 使 用 <iframe>、<form> 及 <img> 元 

素 的 name 属 性 的 值 作为 文档 属性 ， 这 些 属性 的 值 是 对 应 名 字 的 元 于 
(Element) 或 节点 列表 (NodeList) 。 但 是 ， 对 命名 的 <iframe> 元素 

来 说 ， 这 个 属性 指 代 <iframe> 的 Window 对 象 。 细 布 请 参考 15.2.2 节 。 


readonly Element activeElement 
当前 获得 键盘 焦点 的 文档 元 素 。 
Element body 


对 HITML 文 档 来 说 ， 这 个 元 素 指 代 <body> 元 素 。 (对 定义 了 窗 体 集 的 
元 素 ， 这 个 属性 指 代 的 是 最 外 层 的 <frameset>。) 


readonly string characterSet 
当前 文档 的 字符 编码 。 
string charset 


当前 文档 的 字符 编码 。 它 和 character Set 类 似 ， 不 过 可 以 通过 设置 它 来 
改变 文档 编码 。 


readonly string compatMode 


如 果 文 档 为 了 兼容 非常 老 的 浏览 器 ， 使 用 CSS“ 怪 异 模式 ” (quirks 
mode) 泻 染 ， 则 这 个 属性 的 值 为 字符 串 "BackCompat"。 在 其 他 情况 
下 ， 这 个 属性 值 为 "CSS1Compat"。 


string cookie 


这 个 属性 允许 读 、 新 建 、 修 改 或 删除 当前 文档 应 用 的 cookie。cookie 是 
Web 浏 中 希 保存 的 少量 的 命名 数据 ， 它 让 浏览 郁 有 了 “记忆 ”， 这 样 浏览 
绒 束 能 在 一 个 页 面 输入 数据 并 在 另 一 个 页 面 使 用 ， 或 考 通 过 Web 浏 顺 会 
话 调 出 用 户 的 侦 好 。cookie 数 据 在 适当 的 时 候 会 目 动 在 Web 浏 览 雁 与 


Web 服 务 器 之 间 传 送 ， 这 样 服务 端的 脚本 就 可 以 读 写 cookie 的 值 。 客 户 
端的 JavaScript 代 码 也 可 以 通过 这 个 属性 来 读 写 cookie。 注 意 ， 这 是 一 个 
可 读 写 的 属性 ， 但 是 从 其 中 读 出 的 值 通常 情况 下 与 写 的 值 并 不 完全 一 
样 。 细 市 请 参考 20.2 入 。 


readonly string defaultCharset 
浏 哆 絮 的 默认 字符 集 。 


readonly Window defaultView 


Web 浏 览 絮 在 当前 文档 中 显示 的 Window 对 象 。 
string designMode 


如 果 这 个 属性 值 为 "on"， 整 个 文档 是 可 编辑 的 ， 如 果 它 的 值 为 "off"， 整 
个 文档 将 不 可 编辑 。 (不 过 ， 设 置 了 contenteditable 属 性 的 元 素 当 然 还 
可 能 是 可 编辑 的 。) 参见 15.10.4 节 。 


string dir 


对 HTML 文 档 而 言 ， 这 个 属性 是 <html> 元 素 的 dir 属 性 的 映射 。 因 此 ， 


它 和 documentElement.dir 是 一 样 的 。 
readonly DocumentType doctype 
DocumentType 广 点， 表示 文档 的 <IDOCTYPE>。 


readonly Element documentElement 


文档 的 根 元 素 。 对 HTML 文 档 而 言 ， 这 个 属性 总 是 表示 <html> 标签 的 
那个 Element 对 象 。 这 个 根 元 素 也 可 以 通过 自 Node 继 承 的 childNodes[] 数 
不 过 一 般 它 不 是 这 个 数组 的 第 一 个 元 素 。 也 可 参考 body 属 


string domain 


当前 文档 所 在 服务 器 的 主机 名 (hostmname) ， 如 果 没 有 对 应 主机 则 为 
null。 可 以 将 这 个 属性 设置 为 它 自 己 的 域名 后 缀 以 放宽 同 源 限制 ， 并 从 


获得 访问 相关 域名 下 的 文档 的 权限 。 细 节 请 参考 13.6.2 节 。 
readonly HTML Collection embeds 

文档 中 的 <embed> 元 素 组 成 的 类 数组 对 象 。 

readonly HTMLCollection forms 

文档 中 的 Form 元 素 组 成 的 类 数组 对 象 。 


readonly Element head 

对 HIML 文 档 而 言 ， 这 个 属性 对 应 <head> 元 素 。 
readonly HIMLCollection images 

文档 中 所 有 Image 元 素 组 成 的 类 数组 对 象 。 


readonly DOMImplementation implementation 
当前 文档 的 DOMImplementation 对 象 。 
readonly string lastModifed 


定义 当前 文档 最 近 修 改 的 时 间 和 日 期 。 这 个 值 来 目 Web 服 务 硕 可 选择 性 
发 送 的 Last-Modified 头 。 


readonly HIMLCollection links 


文档 中 所 有 超 链 接 组 成 的 类 数组 对 象 。 这 个 HTMLCollection 包 从 含 所 有 
带 href 属 性 的 <a> 和 <area> 元 素 ， 但 不 包含 <link> 元 素 。 参 见 
Link 。 


readonly Location location 
Window.location 的 同义词 。 
readonly HIMLCollection plugins 
embdes 属 性 的 同义词 。 


readonly string readyState 


如 果 文 档 仍 在 加 载 中 ， 这 个 属性 值 为 字符 串 "loading"; 如 果 文 档 已 经 完 
全 加 载 完 成 ， 则 值 为 "complete"。 当 它 的 属性 改变 为 "complete" 时 ， 浏 
质 需 会 在 Document 上 触发 一 个 readystatechange 事 件 。 


readonly string referrer 


链接 到 本 文档 的 文档 的 URL， 如 有 果 当 前 文档 不 是 通过 超 链 接 访 问 的 ， 
或 者 如 果 Web 服 务 硕 没有 报告 来 源 页 面 ， 则 此 属性 值 为 null。 这 个 属性 
允许 客户 端 JavaScript 访 问 HITTP referer 头 信息 。 注 意 拼写 的 不 同 : 
HTTP 头 信息 有 3 个 r， 而 JavaScript 属 性 有 4 个 r。 


readonly HIMLCollection Scripts 
文档 中 所 有 < script> 元 素 组 成 的 类 数组 对 象 。 
readonly CSSStyleSheet[ |styleSheets 


表示 所 有 岁入 或 连接 到 文档 中 的 样式 表 对 象 的 集合 。 在 HTML 文 档 中 ， 
它 包含 由 <link> 和 <style> 标 签 定 义 的 样式 表 。 


string title 
当前 文档 的 <tile> 标签 的 纯 文本 内 容 。 
readonly string URL 


当前 文档 加 载 目 的 URL。 这 个 值 经 常 与 location.href 属 性 的 值 一 样 ， 不 

过 ， 如 果 一 段 脚 本 改变 了 片断 标识 符 (fragment identifier) 
(location.hash 属 性 ) ，location 属 性 和 URL 属 性 就 可 能 不 再 指 代 同一 个 

URL 了。 不 要 混 清 Document.URL 和 Window.URL。 

方 潜 

Node adoptNode(Node node) 


这 个 方法 将 node 从 它 目前 所 在 的 任何 文档 中 移 除 ， 将 它 的 
ownerDocument 属 性 改 为 当前 文档 ， 并 确保 它 已 做 好 插入 当前 文档 的 准 


备 。 与 之 对 照 ，importNode(0 从 另 一 个 文档 中 复制 下 点 但 不 删除 它 。 
void closel() 


天 财 由 open0 方 法 打开 的 文档 流 ， 强 制 显 示 所 有 绥 存 的 输出 。 


Comment createComment(string data) 

根据 指定 的 内 容 ， 创 建 并 返回 一 个 新 的 Comment 闻 点 。 
DocumentFragment createDocumentFragment() 

创建 并 返回 一 个 新 的 室 DocumentFragmentT 点 。 
Element createElement(string localName) 


根据 指定 标签 名 ， 创 建 并 返回 一 个 新 的 空 Element 了 点 。 在 HTML 文档 
中 ， 标 签名 会 转化 为 大 写 。 


Element createElementNS(string namespace,string qualifedName) 


创建 并 返回 一 个 新 的 空 Element 节 点 。 第 一 个 参数 指定 元 素 的 命名 空间 
URI; 第 二 个 参数 指定 命名 空间 前 缀 和 元 素 的 标签 名 ， 中 间 用 喜 号 隔 
开 。 


Event createEvent(string eventInterface) 


创建 并 返回 一 个 未 初始 化 的 合成 Event 对 象 。 该 参数 必须 指定 事件 的 类 
型 ， 值 应 该 为 一 个 类 

似 "Event"、"UIEvent"、"MouseEvent"、"MessageEvent" 之 类 的 字符 串 。 
创建 Event 对 象 之 后 ， 可 以 对 它 调用 一 个 合适 的 事件 初始 化 方法 来 初始 
化 它 的 只 读 属性 ， 这 些 方法 有 initEventO、initUIEventO 、 
initMouseEventO 等 。 大 多 数 特定 于 事件 的 初始 方法 本 书 都 没有 涉及 ， 
不 过 最 简单 的 一 个 可 以 参考 Event.initEvent()。 创 建 并 初始 化 一 个 合成 
事件 对 象 后 ， 就 可 以 使 用 EventTarget 的 dispatchEvent() 方 法 来 分 发 它 。 
合成 事件 总 是 有 一 个 值 为 false 的 isTrusted 属 性 。 


ProcessingInstruction createProcessingInstruction(string target,string data) 


根据 指定 的 目标 和 数据 字符 串 ， 创 建 并 返回 一 个 新 的 


ProcessingInstruction 闻 点 。 

Text createTextNode(string data) 

创建 并 返回 一 个 代表 指定 文本 的 新 的 TextT 点 。 

Element elementFromPoint(float x,float y) 

返回 在 窗口 坐标 (x,y) 处 藤 套 最 深 的 Element 。 

boolean execCommand(string commandId,[boolean showUl,[string value]]) 


在 插入 光标 所 在 的 可 编辑 元 素 上 执行 参数 commandId 指 是 名 字 的 编辑 命 
令 。HTML5 定 义 了 下 面 这 些 命 令 : 


bold insertLineBreak selectAll 
createLink insertOrderedList subscript 
delete insertUnorderedlist superscript 
formatBlock insertParagraph undo 
forwardDelete insertText unlink 
insertImage italic unselect 
insertHTML redo 


有 一 些 方法 (比如 "createLink") 需要 一 个 参数 值 。 如 果 execCommand() 
的 第 二 个 参数 值 为 false， 则 第 三 个 参数 将 用 做 命令 的 参数 ;否则 ， 浏 
览 器 会 弹出 提示 框 让 用 户 输入 需要 的 值 。 更 多 关于 execCommand0 的 内 
容 请 参考 15.10.4 节 。 


Element getElementByld(string elementld) 


这 个 方法 在 当前 文档 中 搜索 id 属性 值 为 lementId 的 ElementP 点 ， 并 返 

回 这 个 Element， 如 果 没 有 找到 对 应 的 Element， 它 将 返回 null。 在 一 个 
文档 中 ，id 属 性 的 值 应 该 是 唯一 的 ， 不 过 如 果 这 个 方法 找到 了 多 个 id 为 
elementId 的 元 素 ， 它 将 返回 第 一 个 。 这 个 方法 很 重要 并 且 很 常用 ， 

为 它 提供 了 一 个 简单 的 方法 来 获取 代表 一 个 指定 文档 元 素 的 Element 对 
象 。 注 意 这 个 方法 的 名 字 以 "Id" 结 尾 ， 而 不 是 "ID"。 


NodeList getElementsByClassName(string classNames) 


返回 一 个 类 数组 对 象 ， 其 中 的 元 素 的 class 属 性 值 包 含 所 有 classNames 定 
义 的 类 。classNames 可 以 是 一 个 单独 的 类 ， 也 可 以 是 由 空格 分 隅 的 多 个 
类 的 列表 。 返 回 的 NodeList 对 象 是 实时 的 ， 文 档 改 变 后 会 自动 更 新 。 返 
回 的 NodeList 中 的 元 素 的 顺序 与 文档 中 它们 出 现 的 顺序 相同 。 注 意 这 个 
方法 在 Element 中 也 定义 了 。 


NodeList getElementsByName(string elementName) 


这 个 方法 返回 一 个 实时 的 、 只 读 的 类 数组 对 象 ， 包 含 所 有 name 属 性 值 
为 elementName 的 元 素 。 如 果 没 有 匹配 元 素 ， 这 个 方法 返回 一 个 langth 
为 0 的 NodeList 。 


NodeList getElementsByTagName(string qualifedName) 


这 个 方法 返回 一 个 只 读 的 类 数组 对 象 ， 包 含 文档 中 有 指定 标签 名 的 所 
有 Element 廊 点 ， 顺 序 与 它们 在 文档 源 代码 中 出 现 的 顺序 相同 。 这 个 
NodeList 是 “实时 的 ”一 一 文档 改变 时 ， 如 来 有 必要 ， 它 的 内 容 会 目 动 更 
新 。 对 HTML 来 说 ， 标 釜 名 古 不 区 分 大 小 写 的 。 一 个 特例 是 ， 标 签 

名 “*” 匹 配 文档 中 的 所 有 元 素 。 


注意 Element 接 口 定义 了 一 个 同名 的 方法 ， 该 方法 仅 搜 索 文档 的 子 树 。 


NodeList getElementsByTagNameNS(string namespace,string localName) 


这 个 方法 类 似 于 getElementsByTagName()， 但 它 将 取得 的 标签 名 定义 为 
命名 空间 URI 和 命名 空间 中 的 本 地 名 称 的 组 合 。 


boolean hasFocus() 


如 采 当 前 文档 的 Window 拥 有 键盘 焦点 (如 果 这 个 窗口 不 是 顶层 窗口 ， 
则 它 的 所 有 祖先 都 拥有 焦点 ) ， 这 个 方法 返回 true 。 


Node importNode(Node node,boolean deep) 


这 个 方法 传 入 一 个 由 其 他 文档 定义 的 万 点 ， 并 返回 这 个 万 点 的 一 份 适 
合 插 入 当前 文档 的 副本 。 如 末 deep 值 为 tue， 这 个 节 后 的 所 有 子 节 所 都 
将 复制 。 原 始 节 点 和 它 的 依赖 市 扩 不 会 有 任何 修改 。 运 回 的 副本 的 


ownerDocument 属 性 被 设置 为 当前 文档 ， 但 parentNode 属 性 为 nuall， 因 为 
它 还 没有 插入 到 当前 文档 中 。 注 册 到 原始 世上 点 或 世上 点 树 上 的 事件 监听 
函数 不 会 复制 。 也 可 参考 adoptNode0 。 


Window open(string url,string name,string features,[boolean replace]) 


当 文 档 的 open(0) 方 法 以 三 个 或 更 多 参数 调用 时 ， 它 的 表现 和 Window 对 
象 的 open() 方 法 一 样 。 可 参考 Window 。 


Document open([string typej],[string replace]) 


只 有 两 个 或 更 少 的 参数 时 ， 这 个 方法 将 擦 除 当 前 文档 并 开始 一 个 新 的 
(使 用 现存 的 那个 Document 对 象 ， 这 也 是 这 个 方法 的 返回 值 ) 。 调 用 
open0 之 后 ， 就 可 以 使 用 write0 和 writeln0) 方 法 将 内 容 以 流 的 形式 写 到 文 
档 中 ， 然 后 使 用 close0 来 结束 文档 并 强制 显示 它 的 新 内 容 。 细 区 请 参考 

15.10.2 节 。 


如 果 type 省 略 或 值 为 "texyhtml"， 新 的 文档 将 是 一 个 HTML 文 档 ， 在 其 
他 情况 下 ， 它 将 是 一 个 纯 文本 文档 。 如 果 参 数 replace 为 tue， 新 文档 将 
在 浏览 历史 中 取代 旧 文 档 。 


这 个 方法 不 应 该 由 正 要 重 写 的 文档 中 的 脚本 或 事件 处 理 程序 调用 ， 
为 这 个 脚本 或 处 理 程序 自身 将 被 重 写 。 


boolean queryCommandEnabled(string commandId) 


如 果 现 在 传 入 commandId 到 execCommand0 中 是 有 意义 的 ， 这 个 方法 将 
返回 true; 否则 返回 false。 比 如 ， 如 有 果 没 有 操作 可 以 撤销 ， 那 
么 "undo" 命 令 将 不 可 用 。 参 见 15.10.4m。 


boolean queryCommandIndeterm(string commandId) 


如 果 由 于 queryCommandState() 不 能 返回 一 个 有 意义 的 值 ， 因 此 
commandId 处 于 一 个 不 确定 的 状态 ， 则 返回 tue。HITML5 定 义 的 命令 永 
远 不 会 处 于 个 确定 状态 ， 但 特定 于 浏 贤 器 的 命令 可 能 会 。 参 见 15.10.4 
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boolean queryCommandState(string commandId) 


返回 指定 commandId 的 状态 。 如 果 光 标 或 选区 正 处 于 斜体 中 ， 则 一 些 编 
辑 命令 (比如 "bold" 和 "italic") 有 状态 true; 否则 为 false。 不 过 ， 大 多 数 
命令 没有 状态 ， 这 些 方法 总 是 返回 false。 人 参见 15.10.4 有 。 


boolean queryCommandSupported(string commandId) 

如 有 果 浏 览 器 文 持 指定 的 命令 则 返回 tue; 否则 返回 false。 参 见 15.10.4 
节 。 

string queryCommandValue(string commandId) 

将 指定 命令 的 状态 作为 字符 串 返 回 。 参 见 15.10.47。 

Element querySelector(string selectors) 


返回 当前 文档 中 匹配 指定 的 CSS selector 《可 能 是 一 个 单独 的 CSS 选 择 
髓 或 者 一 组 由 逗号 隔 开 的 选择 器 ) 的 第 一 个 元 素 。 


NodeList querySelectorAll(string selectors) 


返回 包含 当前 文档 中 匹配 指定 CSS selector (可 能 是 一 个 单独 的 CSS 选 
择 器 或 者 一 组 由 喜 号 隔 开 的 选择 器 ) 的 所 有 元 素 的 类 数组 对 象 。 和 
getElementsByTagName() 及 相似 方法 返回 的 NodeList 不 同 ， 这 个 方法 返 
0 它 只 是 调用 这 个 方法 时 匹配 元 素 的 一 张 静 态 


void write(string text...) 

这 个 方法 将 它 的 参数 退 加 到 文档 中 。 可 以 在 文档 正在 加 载 时 调用 它 ， 
以 便 在 对 应 <script> 标签 的 位 置 插入 内 容 ， 或 者 也 可 以 在 调用 open() 方 
法 后 使 用 它 。 细 市 参见 15.10.2 广 。 


void writeln(string text...) 


这 个 方法 和 HTMLDocument.write() 很 像 ， 不 同 之 处 在 于 它 会 在 妃 加 的 
文本 后 面 添 加 一 个 换行 行 。 比 如， 在 写 <pre> 标 签 的 内 容 时 ， 这 个 方 
法 可 能 会 有 用 。 


事件 


浏览 器 不 常 直 接 在 Document 对 象 上 触发 事件 ， 不 过 Element 事 件 会 冒 泡 
到 包含 它们 的 Document 上 ， 因 此 ，Document 对 象 支 持 所 有 Element 中 列 
出 的 事件 处 理 程 序 属性 。 和 Element 一 样 ，Docuemnt 对 象 也 实现 
EventTarget 方 法 。 


浏览 器 确实 会 在 Document 对 象 上 触发 两 个 文档 就 绪 事 件 。 当 readyState 
属性 改变 时 ， 浏 览 右 触发 readystatechange 事 件 ， 可 以 使 用 
onreadystatechange 属 性 注册 这 个 事件 的 处 理 程序 。 当 文档 树 就 绪 (但 在 
外 部 资源 下 载 完 之 前 ) 时 ， 浏 览 器 也 会 触发 一 个 DOMContentLoaded 事 
件 (参见 17.4 节 ) ， 但 是 注册 这 个 事件 只 能 用 EventTarget0 方 法 ， 因 为 
有 一 个 onDOMContentLoaded 属 性 。 


DocumentFragment 
相 邻 的 世 点 及 它们 的 子 树 
Node 


DocumentFragment 接 口 表示 文档 的 一 个 部 分 或 一 个 在 片 ， 具 体 一 点 来 
说 ， 它 是 由 相 邻 节点 以 及 每 个 节点 的 子孙 组 成 的 一 个 列表 ， 但 这 些 市 
点 没有 一 个 共同 的 父 节 点 。DocumentFragment 广 点 永远 不 会 是 某 个 文 
档 树 的 一 部 分 ， 它 继承 的 parentNode 属 性 总 是 为 null。 不 过 ， 
DocumentFragment 世 点 展现 出 了 一 个 非常 有 用 的 性 质 : 把 一 个 
DocumentFragment 插 入 到 一 个 文档 树 时 ， 插 入 的 不 是 
DocumentFragment 广 把 本 映 ， 而 是 这 个 DocumentFragment 的 每 一 个 子 
万 点 。 这 让 DocumentFragment 可 以 用 做 临时 占 位 符 ， 先 将 和 希望 插入 的 
万 点 放 入 其 中 ， 然 后 将 它们 一 次 性 地 插入 到 文档 中 。 


可 以 使 用 Document.createDocumentFragment() 来 创建 一 个 新 的 空 
DocumentFragment ° 


可 以 在 DocumentFragment 中 使 用 querySelector0 和 querySelectorAl(0) 来 搜 
索 元 素 ， 它 们 的 表现 和 Document 对 象 的 相同 方法 一 样 。 


方法 
Element querySelector(string selectors) 


参见 Document.querySelector()。 


NodeList querySelectorAll(string selectors) 

参见 Document.querySelectorAll() 。 

DocumentIype 

文档 的 <!DOCTYPE > 声明 。 

Node 

文 个 不 常用 的 类 型 表示 文档 的 <!IDOCTYPE > 声明 。Document 的 
doctype 属 性 保存 该 文档 的 DocumentType 六 点 。DocumentType 闻 点 是 不 
可 变 的 ， 无 法 对 其 进行 修改 。 


DocumentType 信 点 用 于 通过 DOMImplementation.createDocument() 方 法 
创建 新 的 Document 对 象 。 可 以 使 用 
DOMImplementation.createDocumentTypeO 创 建新 的 DocumentType 对 
象 o 


属性 
readonly string name 


文档 类 型 的 名 称 。 这 个 标识 符 在 文档 开头 花 跟 着 <!DOCTYPE> ， 和 
文档 的 根 元 素 的 标签 名 相同 。 对 HTML 文 档 而 言 ， 这 个 值 是 "html"。 


readonly string publicId 

DTD 的 公共 标识 待 ， 如 采 未 定义 则 为 空 字符 串 。 
readonly string SystemId 

DTD 的 系统 标识 待 ， 如 果 未 定义 则 为 空 字符 串 。 
DOMException 


Web API 抛 出 的 异常 


大 多 数 客 户 端 JavaScript API 在 需要 发 出 错误 信号 时 会 抛 出 
DOMException 对 象 。 这 个 对 象 的 code 和 name 属 性 提供 了 关于 这 个 错误 
的 更 多 信息 。 注 意 ，DOMException 可 能 会 在 读 或 写 一 个 对 象 的 属性 或 
调用 一 个 对 象 的 方法 时 抛 出 。 


DOMException 不 Error 类 型 的 子 类 ， 不 过 两 者 很 相 
似 ， 一 些 浏 贤 器 包含 一 个 message 属 性 ， 以 便 让 它 与 Error 兼 容 。 


常量 

unsigned Short INDEX_SIZE_ERR=1 

unsigned Short HIERARCHY_REQUEST_ERR=3 
unsigned Short WRONG DOCUMENT_ ERR=4 
unsigned short INVALID CHARACTER ERR=5 
unsigned short NO_MODIFICATION ALLOWED_ ERR=7 
unsigned Short NOT_FOUND_ERR=8 

unsigned Short NOT_SUPPORTED_ ERR=9 

unsigned short INVALID_STATE ERR=11 

unsigned short SYNTAX ERR=12 

unsigned short INVALID MODIFICATION_ERR=13 
unsigned short NAMESPACE ERR=14 

unsigned short INVALID ACCESS_ ERR=15 
unsigned short TYPE MISMATCH ERR=17 
unsigned Short SECURITY_ERR=18 


unsigned short NETWORK_ERR=19 


unsigned Short ABORT_ERR=20 

unsigned Short URL_ MISMATCH ERR=21 
unsigned short QUOTA_ EXCEEDED_ ERR=22 
unsigned Short TIMEOUT_ERR=23 

unsigned short DATA_CLONE ERR=25 


这 些 是 code 属 性 可 能 的 值 。 管 量 的 名 字 已 经 足以 说 明 抛 出 异常 的 大 致 
原因 。 


属性 
unsigned short code 


上 面 列 出 的 肖 量 值 中 的 一 个 ， 指 出 发 生 了 什么 类 型 的 异 币 。 


string name 

指定 异常 类 型 的 名 字 。 上 面 列 出 的 常量 名 中 的 一 个 ， 字 符 串 形式 。 
DOMImplementation 

全 局 DOM 方 法 


DOMImplementation 对 象 定 义 一 些 不 与 任何 特定 Document 对 象 相关 
的 “全 局 ”方法 ， 用 于 DOM 的 实现 。 可 通过 任何 Document 对 象 的 
implementation 属 性 获取 DOMImplementation 对 和 象 的 引用 。 


方法 


Document createDocument(string namespace,string 
qualifedName,DocumentType doctype) 


这 个 方法 创建 并 返回 一 个 新 的 XML Document 对 象 。 如 果 指 定 
qualifiedName， 这 个 方法 将 以 它 为 名 字 创 建 一 个 根 节 点 ， 并 将 作为 其 
documentElement 深 加 a 到 文档 中 。 如 果 gualifeldName 包 含 一 个 命名 空间 


前 缀 和 一 个 逗号，namespace 将 作为 唯一 标识 命名 空间 的 URI。 如 采 参 
数 doctype 不 为 空 ， 则 当前 DocumentType 对 象 的 ownerDocument 属 性 将 
设置 为 这 个 新 创建 的 文档 ，DocumentType 节 点 将 添加 到 这 个 新 文档 
中 o 


DocumentIype createDocumentIype(string 
qualifedName,publicId,systemId) 


这 个 方法 创建 并 返回 一 个 新 的 代表 <!DOCTYPE > 声明 的 
DocumentType 闻 点， 可 将 这 个 节点 传 入 到 createDocument() 方 法 中 。 


Document createHTMLDocument(string title) 


这 个 方法 创建 一 个 新 的 只 包含 基本 文档 树 结构 以 及 指定 标题 的 
HTMLDocument 对 象 。 返 回 的 对 象 的 documentElement 属 性 为 一 个 < 
html> 元 素 ， 这 个 根 元 素 有 子 市 点 <head> 和 <body>> 标 签 ， 其 中 < 
hay > 元 素 有 一 个 <title> 子 节点 ，<tite> 将 指定 的 title 字 符 串 作为 子 
国民 | 所 O 


DOMSettableTokenList 
带 可 设置 字符 串 值 的 记号 列表 


DOMTokenList 


DOMSettableTokenList 是 一 个 同样 各 有 value 属 性 的 DOMTokenList， 可 
以 通过 这 个 属性 一 次 性 设置 整个 记号 集 。 


Element 的 classList 属 性 是 一 个 DOMTokenList， 它 通过 className 属 性 以 
字符 串 的 形式 来 表现 记号 集 。 如 果 想 一 次 性 设置 所 有 的 classList 记 号 ， 
可 以 人 徐 单 地 将 className 属 性 设置 为 一 个 新 的 字符 串 。IFrame 元 素 的 
sandbox 属 性 稍 有 不 同 ， 这 个 属性 以 及 相关 的 HTML 属性 是 由 HIML5 定 
义 的 ， 所 以 不 需要 一 个 老 字 符 串 表示 和 一 个 新 的 DOMTokenList 表 示 。 
在 这 种 情况 下 ， 这 个 属性 简单 地 定义 为 一 个 DOMSettableTokenList: 可 
以 像 字 符 串 一 样 对 它 进 行 读 写 ， 也 可 以 使 用 它 的 方法 并 将 它 作为 记号 
集 。Output 的 htmlFor 属 性 和 Video 的 audio 属 性 也 都 是 
DOMSettableTokenL ist ° 


属性 


string value 


记号 集 的 字符 串 表 示 ， 以 空格 分 隅 。 可 通过 读 写 这 个 属性 来 处 理 这 个 
集合 ， 束 像 处 理 一 个 单独 的 字符 串 值 一 样 。 通 常 不 需要 显 式 地 使 用 这 
个 属性 ， 当 将 一 个 DOMSettableTokenList 用 做 一 个 字符 串 时 ， 返 回 的 就 
是 这 个 字符 溃 的 值 。 如 果 对 一 个 DOMSettableTokenList 赋 值 ， 会 隐 仿 地 
设置 这 个 属性 。 


DOMTokenList 
空格 隔 开 的 记号 集 


DOMTokenList 是 由 空格 分 隔 的 记号 字符 串 经 过 解析 后 的 表示 形式 ， 比 
如 一 个 Element 的 className 必 性。 如 同名 字 所 上 蜡 示 的 ，DOMTokenList 
是 一 个 列表 ， 它 是 一 个 类 数组 对 象 ， 有 lenght 属 性 ， 也 可 以 通过 索引 它 
检索 特定 的 记号 。 但 更 重要 的 是 ， 它 定义 了 contains()、add() 、remove() 
以 及 toggle() 方 法 ， 以 便 可 以 用 记号 集 的 方式 处 理 它 。 如 果 将 
DOMTokenList 像 字符 串 那 样 用 ， 它 就 等 同 于 一 个 由 空格 分 隔 的 记号 组 
成 的 字符 串 。 

在 支持 HTML5 中 Element 对 象 的 classList 属 性 的 浏览 器 中 ， 它 是 一 个 


DOMTokenList， 这 可 能 是 你 唯一 经 常 使 用 的 DOMTokenList。 也 可 参见 
DOMSettableTokenList。 


属性 


readonly unsigned long length 


DOMTokenList 是 一 个 类 数组 对 象 ; 这 个 值 指定 它 包 含 多 少 个 不 重复 的 
记号 。 


方法 
void add(string token) 
如 果 当 前 DOMTokenList 不 包 仿 token， 则 在 列表 的 尾部 添加 它 。 


boolean contains(string token) 


如 条 当 前 DOMTokenList 包 含 token 则 返回 true; 否则 返回 false。 
string item(unsigned long index) 


返回 指定 index 处 的 记号 ， 如 果 index 超 出 范围 则 返回 null。 也 可 以 不 调 
用 这 个 方法 ， 直 接 对 DOMTokenList 取 索引 。 


void removel(string token) 

如 果 当 前 DOMTokenList 包 含 token， 就 移 除 它 ; 否则 什么 也 不 做 。 
boolean toggle(string token) 

如 果 当 前 DOMTokenList 包 含 token， 就 移 除 它 ; 否则 添加 它 。 
Element 


文档 元 素 


Node 、 EventTarget 


Element 对 象 表示 HTML 或 XML 文档 中 的 元 素 。tagName 属 性 定义 元 素 
的 标签 名 或 类 型 。 元 素 的 标准 HTML 属 性 可 以 通过 Element 对 象 的 
JavaScript 属 性 来 访问 。 所 有 属性 (包括 XML 属 性 和 非 标 准 HTML 属 
性 ) 也 可 以 通过 getAttribute0 和 setAttribute(0) 方 法 访问 。 元 素 内 容 可 以 通 
过 继承 目 Node 的 属性 访问 。 如 果 你 只 对 Element 对 象 之 间 的 关系 有 兴 
以 使 用 children 、firstElementChild 或 nextElementSibling 及 相关 

、 属 ' O 


从 文档 中 获取 Element 对 象 有 很 多 种 方法 。Document 对 象 的 
documentElement 属 性 指 代 该 文档 的 根 元 素 ， 比 如 HTML 文 档 的 <html 
> 元 素 。 对 HTML 文 档 来 说 ，head 和 body 属 性 很 相似 ， 它们 指 代 文档 的 
<head> 和 <body>> 元 素 。 要 通过 唯一 的 id 属 性 来 定位 一 个 特定 的 命名 
元 素 ， 可 以 使 用 Document.getElementById0。 如 同 15.2 节 介绍 过 的 ， 还 
可 以 通过 Document 及 Element 的 方法 ， 如 getElementsByTagName()、 
getElementsByClassName() 以 及 querySelectorAll()， 来 获取 多 个 Element 
对 象 。 最 后 ， 可 以 通过 Document.createElement0O) 来 创建 新 的 可 揪 入 文档 
的 Element 对 象 。 


浏览 器 会 在 文档 元 素 上 触发 很 多 种 不 同 的 事件 ， 同 时 ，Element 对 象 定 
义 了 很 多 事件 处 理 程序 属性 。 另 外 ，Element 对 象 还 定义 了 EventTarget(0) 
方法 (参见 EventTarget) ， 可 用 于 添加 及 删除 事件 监听 器 。 


本 书 之 前 的 版 本 中 关于 HTMLElement 的 参考 条 目 已 合并 到 本 节 中 。 注 
意 ， 这 儿 讲 述 的 部 分 属性 、 方 法 以 及 事件 处 理 程 序 是 HTML 特 有 的 ， 不 
能 在 XML 文档 的 元 素 上 工作 。 


属性 
除 这 儿 列 出 的 属性 外 ，HTML 元 素 的 HIML 属 性 也 可 以 通过 Element 对 


象 的 JavaScript 属 性 来 访问 。HTML 标 签 及 它们 合法 的 属性 列 在 本 参考 
条 目的 结尾 处 。 


readonly Attr[ lattributes 


Attr 对 象 (代表 当前 元 素 的 HTML 或 XML 属 性 ) 的 类 数组 对 象 。 不 过 ， 
Element 对 象 通常 可 通过 JavaScript 属 性 来 访问 它 的 属性 ， 所 以 永远 不 会 
真 的 需要 用 到 这 个 attributes[] 数 组 。 


readonly unsigned long childElementCount 
当前 元 素 拥 有 的 子 元 素 〈 非 子 世 点) 的 数目 。 
readonly HIMLCollection children 


由 当前 Element 的 子 Element (不 包括 非 Element 子 元 素 ， 如 Text 和 
Comment 节 点 ) 组 成 的 类 数组 对 象 。 


readonly DOMTokenList classList 


元 素 的 类 属性 是 一 个 由 空格 分 隔 的 类 名 列表 。 本 属性 允许 访问 这 个 列 
表 中 的 各 个 元 素 ， 同 时 定义 了 查询 、 添 加 、 删 除 以 及 切换 类 名 的 方 
法 。 细 万 请 参考 DOMTokenList。 


string className 


这 个 属性 代表 当前 元 素 的 class 属 性 。class 是 JavaScript 的 保留 字 ， 所 以 
JavaScript 属 性 用 className 来 代替 class。 注 意 ， 这 个 属性 名 有 点 误导 


性 ， 因 为 class 属 性 通常 包含 多 个 类 名 。 
readonly long clientHeight 


readonly long clientWidth 


如 果 当 前 元 素 是 根 元 素 (参见 document.documentElement) ， 这 两 个 属 
性 将 返回 Window 的 尺寸 ， 它 们 是 除去 滚动 条 及 其 他 浏览 絮 “ 包 

装 ”(chrome) 之 外 的 内 部 或 视 口 的 尺寸 。 在 其 他 情况 下 ， 这 两 个 属性 
返回 元 素 的 内 容 加 上 内 边 距 的 尺寸 。 


readonly long clientLeft 


readonly long clientTop 


这 两 个 属性 返回 元 素 的 左边 框 或 项 边框 的 边界 到 内 边 距 的 左边 框 或 顶 
边界 之 间 的 距离 ， 单 位 为 像素 。 一 般 情 况 下 这 束 是 左边 框 或 顶 边框 的 
宽度 ， 不 过 如 采 在 元 素 的 左 侧 或 顶部 有 滚动 条 的 话 ， 这 个 值 也 包含 对 
应 滚动 条 的 宽度 。 


CSSStyleDeclaration currentStyle 


这 个 正 专 有 属性 代表 应 用 到 当前 元 素 上 的 所 有 CSS 属 性 的 级 联 集 合 
(cascaded set) 。 在 IE8 及 更 早 版 本 中 ， 可 以 将 它 作 为 标签 的 
Window.getComputedStyle() 方 法 的 蔡 代 。 


readonly object dataset 


通过 为 名 称 以 "data-" 为 前 级 的 属性 赋值 ， 可 以 把 任意 值 与 任何 HTML 元 
素 相关 联 这 个 dataset 属 性 是 元 素 的 数据 (data) 属性 的 集合 ， 通 过 这 个 
属性 可 以 更 容易 地 设置 和 读 取 它 们 。 


这 个 属性 值 的 行为 类 似 于 普通 的 JavaScript 对 象 。 这 个 对 象 的 每 一 个 值 
对 应 元 素 上 的 一 个 data 必 性。 如 有 果 元 素 有 一 个 名 为 data-x 的 属性 ， 
dataset 对 象 就 会 有 一 个 名 为 x 的 属性 ， 并 且 dataset.x 的 值 和 
getAttribute("data-x") 的 值 相同 。 


查询 或 设置 dataset 对 象 的 属性 相当 于 查询 或 存储 这 个 元 素 对 应 的 data 属 
性 。 可 以 使 用 delete 操 作 符 来 删除 data 属 性 ， 也 可 以 使 用 for/in 循 环 来 枚 


举 data 属 性 。 
readonly Element frstElementChild 


这 个 属性 类 似 于 Node 的 firstChild 必 性， 但 它 忽 略 Text 及 Comment 忆 点 ， 
只 返回 Element 。 


string id 
id 属性 的 值 。 同 一 个 文档 中 任意 两 个 元 素 的 id 值 都 应 该 不 同 。 
String innerHTML 


定义 当前 元 素 包 含 的 HTML 或 XML 标签 的 一 个 可 读 写 的 字符 串 ， 不 包 

括 当 前 元 素 本 身 的 开始 及 结束 标签 。 查 询 这 个 属性 将 以 一 个 HTML 或 

XML 文本 字符 串 的 形式 返回 当前 元 素 的 内 容 ， 设 置 这 个 属性 为 一 个 

人 ， 将 用 该 文本 的 解析 表示 形式 巷 换 当前 元 于 
、 谷 O 


readonly boolean isContentEditable 


如 肝 当 前 元 素 可 编辑 ， 本 属性 将 为 tue; 否则 为 false。 如 采 一 个 元 系 或 
它 的 祖先 元 素 有 contenteditable 属 性 ， 或 者 包含 它 的 Document 指 定 
designMode 属 性 ， 则 这 个 元 素 可 能 是 可 编辑 的 。 


string lang 
lang 属 性 的 值 ， 这 个 属性 指定 当前 元 素 内 容 的 语言 编码 。 


readonly Element lastElementChild 


这 个 属性 类 似 于 Node 的 lastChild 必 性， 不 过 它 名 略 Text 和 CommentT 
点 ， 只 返回 Elements 。 


readonly string localName 


当前 元 素 本 地 的 、 无 前 级 的 名 字 。 和 tagName 属 性 人 不同， 如 琳 和 存在 命名 
空间 前 级 prefix 时 ，tagName 属 性 会 包含 这 个 前 级 (对 HTML 元 素 而 言 还 
会 转换 为 大 写 ) 。 


readonly string namespaceURI 


正式 定义 当前 元 素 的 命名 空间 的 URL， 可 以 为 null 或 者 一 段 类 似 
于 "http://www.w3.org/1999/xhtml" 的 字符 串 。 


readonly Element nextElementSibling 


这 个 属性 类 似 于 Node 的 nextSibling 属 性 ， 不 过 它 忽略 Text 和 Comment 他 
点 ， 只 返回 Elements。 


readonly long offsetHeight 
readonly long offsetWidth 


当前 元 素 及 其 所 有 内 容 的 高 度 及 宽度 ， 单 位 为 像素 ， 包 括 元 素 的 CSS 内 
边 距 及 边框 ， 但 不 包括 外 边 距 。 


readonly long offsetLeft 


readonly long offsetTop 


和 pe CSS 边 框 的 左上 角 相 对 于 它 的 offsetParent 容 磊 元 妹 的 X 及 Y 
坐标 。 


readonly Element offsetParent 


指定 容 姨 元 素 ，offsetLeft 和 offsetTop 将 基于 这 个 容器 元 素 定 义 的 坐标 系 
统 度量 。 对 大 多 数 元 素来 说 ，offsetParent 是 包含 它们 的 <body> 元 素 。 
不 过 ， 如 果 一 个 元 素 在 一 个 动态 定位 的 元 素 中 ， 那 个 动态 定位 的 元 素 
将 是 offsetParent， 如 果 元 率 在 表格 中 ，<td>、< 了 > 或 <table> 元 素 
可 能 会 是 offsetParent。 人 参见 15.8.5T。 


string outerHT™ML 

定义 了 当前 元 素 及 其 子 元 素 的 HTML 或 XML 标 签 。 如 果 设 置 这 个 属性 
的 值 为 一 个 字符 串 ， 这 个 元 素 (以 及 它 所 有 的 内 容 ) 将 被 新 值 解析 成 
的 HTML 或 XML 文档 碎片 替代 。 


readonly string prefx 


当前 元 素 的 命名 空间 前 级 。 这 个 值 通 常 为 n ull， 除 非 你 正在 处 理 一 个 使 
用 命名 空间 的 XML 文档 。 


readonly Element previousElementSibling 


这 个 属性 类 似 于 Node 的 previousSibling 属 性 ， 不 过 它 忽略 Text 和 
Comment 闻 点 ， 只 返回 Elements 。 


readonly long scrollHeight 


readonly long scrollWidth 


元 素 的 全 部 高 度 及 宽度 ， 单 位 为 像素 。 当 元 素 有 滚动 条 时 (比如 ， 由 
于 CSS 的 overflow 属 性 ) ， 这 两 个 属性 与 offsetHeight 和 offsetWidth 的 不 
同 在 于 ， 后 两 者 只 简单 地 返回 元 素 可 见 部 分 的 尺寸 。 


long scrollLeft 


long scrollTop 


当前 元 素 左 边缘 或 顶 边 绿 滚 过 的 像素 数 。 这 两 个 属性 只 对 市 滚动 条 的 
元 素 有 用 ， 比 如 CSS 属 性 overflow 设 置 为 auto 的 元 素 。<html> 元素 

(参见 Document.documentElement) 的 这 两 个 属性 的 定义 为 文档 深 过 部 
分 的 数量 。 注 意 ， 这 两 个 属性 没有 定义 <iframe> 标签 中 深 过 部 分 的 数 
量 。 可 以 通过 设置 这 两 个 属性 来 滚动 一 个 元 素 或 整个 文档 。 参 见 15.8.5 
四 O 


readonly CSSStyleDeclaration style 


style 属 性 的 值 定义 了 当前 元 素 的 内 联 CSS 样 式 。 注 意 ， 这 个 属性 的 值 不 
是 一 个 字符 串 ， 而 是 一 个 对 象 ， 其 属性 与 CSS 样 式 的 属性 一 致 并 且 可 读 
写 。 细 下 请 参考 CSSStyleDeclaration 。 


readonly string tagName 


当前 元 素 的 标签 名 。 对 HTML 文 档 来 说 ， 无 论文 档 源 代 码 中 标签 名 的 大 
小 写 情况 如 何 ， 总 是 返回 大 写 的 形式 ， 所 以 ， 一 个 <p>> 元 素 的 
tagName 属 性 值 为 "P"。XML 文 档 是 区 分 大 小 写 的 ， 返 回 的 标签 名 和 文 


档 源 代码 中 它 所 写 的 形式 完全 一 致 。 这 个 属性 与 继承 自 Node 接 口 的 
nodeName 属 性 的 值 相同 。 


string title 


当前 元 素 的 title 属 性 的 值 。 在 许多 浏览 器 中 ， 当 鼠标 指针 移 到 元 素 上 
时 ， 浏 览 器 会 以 工具 提示 的 方式 显示 这 个 属性 的 值 。 


亲 尖 

void blur() 

这 个 方法 将 键盘 焦点 转移 到 当前 包含 Document 对 象 的 body 元 素 上 。 
void click() 


这 个 方法 在 当前 元 系 上 模拟 一 次 单 击 。 如 采 在 这 个 元 素 上 的 正音 单 击 
会 引发 某 个 事件 (比如 转向 一 个 链接 ) ， 这 个 方法 也 会 让 对 应 事件 发 
在 其 他 情况 下 ， 调 用 这 个 方法 只 会 在 对 应 元 素 上 触发 一 个 单 击 事 


void focus() 
将 键盘 焦点 转移 到 当前 元 素 上 。 
string getAttribute(string qualifedName) 


getAttribute0 返 回 一 个 元 素 的 指定 名 字 的 属性 的 值 ， 如 果 对 应 名 字 的 属 
性 不 存在 则 返回 null。 注 意 ，HTMLElement 对 象 为 每 一 个 标准 HTML 属 
性 定义 了 匹配 的 JavaScript 属 性 ， 所 以 在 处 理 HTML 文 档 时 ， 只 有 在 查 
询 非 标准 属性 的 值 的 情况 下 才 需 要 用 到 这 个 方法 。 在 HTML 文 档 中 ， 属 
性 名 是 区 分 大 小 写 的 。 


在 XML 文档 中 ， 无 法 直接 以 元 素 属 性 的 方式 来 获取 属性 值 ， 只 能 通过 
调用 这 个 方法 来 得 找 。 对 使 用 命名 空间 的 XML 文档 来 说 ， 在 传 入 这 个 
人 中 要 包含 命名 空间 前 级 以 及 冒号 或 者 使 用 getAttributeNS() 
来 代替 。 


string getAttributeNS(string namespace,string localName) 


这 个 方法 和 getAttribute() 方 法 非 第 类 似 ， 区 别 在 于 属性 被 分 为 命名 空间 
URI 以 及 命名 空间 下 的 本 地 和 名字 的 组 合 。 


ClientRect getBoundingClientRect() 

返回 描述 当前 元 素 的 边框 的 ClientRect 对 象 。 

ClientRect[ |getClientRects() 

返回 一 个 类 数组 对 象 ， 由 描述 了 当前 元 素 获 盖 的 一 个 或 多 个 矩形 的 
ClientRects 组 成 。 (跨越 多 行 的 内 联 对 象 往往 需要 多 于 一 个 的 矩形 才能 
精确 地 描述 它们 在 窗口 中 的 区 域 。) 


NodeList getElementsByClassName(string classNames) 


返回 一 个 由 子孙 元 素 组 成 的 类 数组 对 象 ， 每 个 元 素 的 class 属 性 都 包含 
所 有 指定 的 classNames。classNames 可 以 是 一 个 单独 的 类 或 者 是 一 个 由 
空格 分 隔 的 类 列表 。 返 回 的 NodeList 是 实时 的 ， 会 随 着 文档 的 变化 自动 
更 新 。 元 素 在 返回 的 NodeList 中 的 出 现 顺 序 与 它们 在 文档 中 的 出 现 顺 序 
一 样 。 注 意 Document 也 定义 了 这 个 方法 。 


NodeList getElementsByTagName(string qualifedName) 


这 个 方法 遇 历 当前 元 素 的 所 有 子孙 元 素 ， 返 回 一 个 由 具有 指定 标签 名 
的 Element 广 点 组 成 的 实时 的 类 数组 NodeList。 元 素 在 返回 的 数组 中 的 
出 现 顺 序 与 它们 在 源 文档 中 的 出 现 顺 序 相同 。 


注意 Document 对 象 也 有 一 个 类 似 的 getElementsByTagName() 方 法 ， 不 过 
它 将 遇 历 整个 文档 ， 而 不 仅仅 是 单个 元 素 的 子孙 。 


NodeList getElementsByTagNameNS(string namespace,string localName) 


这 个 方法 类 似 于 getElementsByTagName()， 不 同 的 是 它 查 找 的 元 素 由 一 
个 命名 空间 URI 以 及 这 个 命名 空间 下 的 本 地 名 字 的 组 合 定义 。 


boolean hasAttribute(string qualifedName) 


如 果 当 前 元 素 拥 有 指定 名 字 的 属性 ， 这 个 方法 返回 tue; 否则 返回 
false。 在 HTML 文档 中 ， 属 性 名 是 区 分 大 小 写 的 。 


boolean hasAttributeNS(string namespace,string localName) 


这 个 方法 类 似 于 hasAttribute()， 不 同 之 处 是 属性 由 命名 空间 URI 以 及 这 
个 命名 空间 下 的 本 地 名 字 指 定 。 


void insertAdjacentHTML(string position,string text) 


这 个 方法 在 相对 于 当前 元 取 的 指定 position 处 插入 指定 的 HTML 标 签 
text。 人 参数 position 的 取 值 只 能 是 下 面 4 个 字符 昌之 一 : 


位 置 含义 

beforebegin 在 开始 标签 之 前 插入 文本 
afterend 在 关闭 标签 之 后 插入 文本 
afterbegin 在 开始 标签 之 后 插入 文本 
beforeend 在 结束 标签 之 前 插入 文本 


Element querySelector(string selectors) 


返回 当前 元 素 的 第 一 个 匹配 指定 CSS selectors (可 能 是 一 个 单独 的 CSS 
选择 器 或 者 一 组 由 去 号 分 隔 的 选择 器 ) 的 子孙 元 素 。 


NodeList querySelectorAll(string selectors) 


返回 当前 Element 的 所 有 匹配 指定 selectors 〈 可 能 是 一 个 单独 的 CSS 选 择 
句 或 者 一 组 由 逗号 分 隔 的 选择 器 ) 的 子孙 元 素 组 成 的 类 数组 对 象 。 不 
同 于 getElementsByTagName0 方 法 返回 的 NodeList， 这 个 方法 返回 的 
0 它 只 是 调用 这 个 方法 时 匹配 的 元 际 的 一 张 静 态 快 
上 昭 。 


void removeAttribute(string qualifedName) 


removeAttribute() 删 除 当 前 元 素 的 指定 名 字 的 属性 。 壬 试 移 除 不 存在 的 
属性 的 操作 会 自动 忽略 。 在 HIML 文 档 中 ， 属 性 名 是 区 分 大 小 写 的 。 


void removeAttributeNS(string namespace,string local Name) 


removeAttributeNS() 和 removeAttributeO 很 类 似 ， 不 同 之 处 是 移 除 的 属性 
由 命名 空间 URI 和 本 地 名 字 定 义 。 


void scrollIntoView([boolean top]) 


如 果 一 个 HTML 元 素 当 前 在 窗口 中 不 可 见 ， 这 个 方法 将 滚动 文档 以 便 将 
它 显 示 出 来 。 参 数 top 可 选 ， 用 于 确定 元 素 应 该 定位 在 靠近 窒 口 的 顶 衣 
还 是 底部 。 如 果 值 为 true 或 省 略 ， 浏 贤 器 会 尝试 将 元 素 定 位 在 靠近 顶 音 
的 地 方 。 如 果 值 为 false， 浏 贤 器 会 尝试 将 元 素 定 位 在 靠近 底部 的 地 
方 。 对 那些 可 接受 键盘 焦点 的 元 系 来 说 ， 比 如 Input 元 素 ，focus(0) 方 法 
会 隐 性 地 执行 一 样 的 “滚动 到 显示 ”操作 。 也 可 参见 Window 的 scrollTo() 


方法 。 


void setAttribute(string qualifedName,string value) 


这 个 方法 将 指定 属性 设置 为 指定 的 值 。 如 果 没 有 对 应 名 字 的 属性 ， 将 
新 创建 一 个 。 在 HTML 文 档 中 ， 在 设置 之 前 属性 名 会 先 转 为 小 写 。 注 
意 ，HTML 文 档 的 HTMLElement 对 象 为 所 有 标准 HITML 属 性 定义 了 相应 
的 JavaScript 属 性 ， 可 以 通过 这 些 属 性 直接 设置 对 应 的 属性 值 。 也 残 是 
说 ， 只 有 在 设置 非 标 准 属 性 时 才 需 要 使 用 这 个 方法 。 


void setAttributeNS(string namespace,string qualifedName,string value) 


这 个 方法 类 似 于 setAttribute()， 不 同 之 处 是 创建 或 设置 的 属性 由 命名 空 
间 URI、 命 名 空间 的 前 级 组 成 的 限定 名 、 时 号 以 及 命名 空间 中 的 本 地 名 
和 


事件 处 理 程序 


代表 HTML 元 素 的 Element 对 象 定 义 相当 多 的 事件 处 理 程序 属性 。 将 下 
面 列 出 的 任意 一 个 属性 设置 为 一 个 函数 ， 那 个 函数 束 会 在 该 对 象 上 发 
生 (或 冒 泡 到 ) 特定 事件 时 被 调用 。 当 然 ， 也 可 以 使 用 EventTarget 定 义 
的 方法 来 注册 事件 处 理 程序 。 


大 多 数 事 件 从 文档 层次 结构 冒 泡 到 Document 世 点 ， 然 后 从 那儿 再 到 
Window 对 象 。 所 以 ， 这 儿 列 出 的 每 个 事件 处 理 程序 属性 在 Document 和 和 
Window 对 象 上 也 有 定义 。Window 对 象 有 不 少 专 有 的 事件 处 理 程序 ， 下 


面 表格 中 标 有 星 号 的 属性 在 Window 对 象 上 有 不 同 的 含义 。 由 于 历史 原 
， 作 为 <body> 元 素 的 HTML 属 性 注册 的 事件 处 理 程序 会 注册 在 
Window 对 象 上 ， 这 意味 着 市 星 号 的 事件 处 理 程 序 属性 注册 在 <body> 
元 素 上 时 会 和 它们 注册 在 其 他 元 素 上 时 的 含义 不 同 。 参 见 Window 。 


这 儿 列 出 的 大 多 数 事件 只 会 在 特定 类 型 的 HTML 元 素 上 触发 ， 不 过 由 于 
这 些 事件 大 多 会 在 文档 树 中 加 上 冒 泡 ， 因 此 这 些 事件 处 理 程序 属性 一 


般 是 为 所 有 元 素 定 义 的 。 在 HTML5 的 <audio > 和 <video> 上 触发 的 媒 
体 事件 不 会 冒 泡 ， 所 以 它们 在 MediaElement 条 目 中 上 归档 。 类 似 地 ， 一 
些 与 HIML5 表 单 相 关 的 事件 也 不 会 冒 泡 ， 这 些 事件 包含 在 FormControl 


未 目 宣 


事件 处 理 程序 
onabort 
onblur* 


onchange 


onclick 
oncontextmenu 
ondblclick 
ondrag 
ondragend 


ondragenter 


外 发 条 件 
在 用 户 的 要 求 下 信 资 源 下 载 


用 户 改 变 表单 控件 的 内 容 或 状态 (编辑 完成 时 触发 ， 而 不 是 在 每 一 次 
按键 时 触发 ) 

元 素 被 限 标 单 击 或 其 他 方式 激活 

上 下 文 来 单 即将 显示 ， 通 常 是 由 于 右 击 

发 生 两 次 快速 的 鼠标 单 击 

持续 拖 鼻 中 《在 拖 动 源 上 触发 ) 

拖 鼻 结束 (在 拖 动 源 上 触发 ) 

拖 中 进入 (在 放置 目标 上 触发 ) 


事件 处 理 程序 


ondragleave 
ondragover 
ondragstart 
ondrop 
ONEerrOr* 
onfocus* 
oninput 
onkeydown 
onkeypress 
onkeyup 
onload* 
onmousedown 
onmousemove 
onmouseout 
onmouseover 
onmouseup 
onmousewheel 
onreset 
onscroll* 
onselect 


onsubmit 


触发 条 件 

拖 电 离开 (在 放置 目标 上 触发 ) 
持续 拖 忠 中 (在 拖 动 源 上 触发 ) 

用 户 开 始 拖 放 (在 拖 动 源 上 触发 ) 
用 户 完成 拖 放 (在 放置 目标 上 触发 ) 
资源 加 载 失败 (通常 是 由 于 网 络 错误 ) 
元 素 获得 键盘 焦点 

一 个 表单 元 素 上 发 生 了 输入 ( 比 onchange 触 发 得 更 频繁 ) 
用 户 按 下 一 个 键 

生成 一 个 可 打印 字符 的 按键 

用 户 释放 一 个 键 

资源 (比如 cimg>) 加 载 完成 

用 户 按 下 一 个 鼠标 按钮 

用 户 移动 鼠标 指针 

鼠标 指针 离开 某 个 元 素 

鼠标 指针 进入 某 个 元 素 

用 户 释放 一 个 鼠标 按键 

用 户 滚动 鼠标 滚轮 

表单 (<form>) 被 重 置 

带 有 滚动 条 的 元 素 被 滚动 

用 户 在 表单 元 素 中 选中 文本 

表单 (<form>) 被 提交 


HTML 元 素 及 属性 


这 一 部 分 包括 下 面 的 HTML 元 素 类 型 的 独立 参考 页 面 : 


元 素 参考 页 
《audi0》 Audio 
¢button>, <input type="button"> Button 
《Canvas) (Canvas 
‘fieldset> FieldSet 
《form》 Form 
《iframe》 IFrame 
元 素 参考 页 
《ing》 Image 
《Input》 Input 
《]abel》 Label 
Ca>, <area>, <link> Link 
meter) Meter 
《option》 Option 


元 素 

《output> 
《pr0gIeS5S》 
<script> 
¢select> 
¢style> 
《td 


元 素 

《tT》 
<tbody>、<tfoot>、<thead> 
《table》 

《textarea》 


《Vide0》 


参考 页 
Output 
Progress 
Script 
Select 
Style 
TableCell 


参考 页 
TableRow 
TableSection 
Table 
TextArea 


Video 


那些 所 有 属性 都 是 其 HTML 属 性 的 简单 映射 的 HTML 元 素 没 有 单独 的 参 
考 页 面 ， 下 面 这 些 属性 是 所 有 HTML 元 素 都 有 的 合法 属性 ， 因 此 它们 也 


是 所 有 Element 对 象 的 属性 : 


属性 描述 


accesskey 键盘 快捷 刍 
class CSS 类 ,参见 上 面 的 className 和 classList 属 性 


contentEditable ”元素 内 容 是 否 可 编辑 
contextMenu 作为 上 下 文 菜单 显示 的 4menu> 元 素 的 ID。 编 写本 书 时 这 个 属性 仅 由 


正 支 持 
dir 文本 方向 ， “ltr” 或 “rt 
draggable 拖 动 源 元 素 上 的 一 个 布尔 属性 ， 用 于 拖 放 API 
dropzone 放置 目标 元 素 上 的 一 个 属性 ， 用 于 拖 放 ApIi 
hidden 一 个 布尔 属性 ， 设 置 在 不 应 该 显示 的 元 素 上 
id 当前 元 素 的 唯一 标识 和 
lang 当前 元 素 内 的 文本 的 主要 语言 
spellcheck 元 素 的 文本 是 否 有 拼写 检查 
style 当前 元 素 的 内 联 CSS 样 式 。 参 见 上 面 的 Style 属性 
tabIndex 定义 当前 元 素 的 焦 反 顺序 
title 当前 元 素 的 工具 提示 文本 


下 面 的 HTML 元 素 只 定义 上 面 这 些 公共 属性 : 


¢abbr> 《Code> 《footer》 《hry 《It》 《Sup》 


¢address> 《datalist》 <h1> 《jl》 《IUbyy》 《tbody》 
<article> 《dd》 《h2》 《kbd》 《5) <tfoot> 
<aside> <dfn> <h3> 《]egend》 《Sampy》 《thead》 

<b> 《div》 <h4> 《marky》 《Section> 《titley》 
《bdiy》 《由 《h5》 《nav》 <small> 《tr> 
<bdo> ‘<dt> <h6> <noscript> «<span> 《Ul> 
<br> 《em> 《head> 《p》 《StTong》 《VarTy》 
<caption> 《figcaptiony》 《header》 <pre> 《Sub》 
《Citey》 <figure> 《hgroup》 <Irp> <summary> 


剩 下 的 HTML 元 素 以 及 它们 文 持 的 属性 见 下 面 的 表格 。 注 意 ， 这 个 表格 
只 列 出 了 除 上 面 的 公共 属性 外 的 属性 ， 同 时 别 坏 了 这 个 表格 也 包 丘 那 
些 有 目 己 的 参考 页 面 的 元 素 : 


元 素 
《a》 


<area> 


《audio> 
《base》 
¢blockquote> 
《body》 


《buttony》 


《CanvaS》 
《C0]》 
<colgroup> 
<command> 
‘del> 
<details> 
embed> 
‘fieldset> 


<form> 


<html> 


¢iframey> 


属性 

href、 target、 ping. rel, media、 hreflang、 type 

alt、 coords shape href、 target、 ping、 rel media、 
hreflang、 type 

STC、 preload、 autoplay、 loop、 controls 

href、 target 

Cite 

onafterprint、 onbeforeprint、 onbeforeunload、 onblur、 oneII0I、 


onfocus、 onhashchange、 onload、 onmessage、onoffline、 ononline、 


onpagehide、 onpageshow onpopstate、 onredo、 onresize, 
onscroll、 onstorage、 onundo、onunload 
autofocus、 disabled、 form、 formaction、 formenctype、 


formmethod、 formnovalidate、 formtarget、 name、 type、value 
width、 height 

span 
span 
type、 
Cite、 


1]abel、 icon、 disabled、 checked、 radiogroup 
datetime 

open 

src type、 Width、 height 

disabled、 


accept-charset、 action、 autocomplete、 enctype、 method、 
novalidate、 target 


form、 name 


name、 


manifest 


cre errdnr name candhnx seamless width heioht 


元 素 


<input> 


<ins> 
<keygen> 
<label> 
<1i> 
<link> 
<map> 
<menu> 
<meta> 
<meter> 
<object> 
<01> 
<optgroup> 
<option> 
<output> 
<param> 
<progress> 
<q> 
<script> 
<select> 
<source> 
<style> 
<table> 
<td> 


<textarea> 


<th> 
<time> 
<track> 


<video> 


属性 


accept、 alt、 autocomplete、 autofocus、 
disabled、 form、 formaction、 formenctype、 formmethod. 
formnovalidate、 formtarget、 height、 1ist、 max、 maxlength、 
min、 multiple、 name、 pattern、 placeholder、readonly、 required.、 
size、 src step、 type、 value、 width 


checked、 dirname、 


cite、 datetime 

autofocus、 challenge、 disabled、 form、 keytype、 name 
form、 for 

value 

href、 rel、 media、 hreflang、 type、 sizes 

name 

type、 label 

name、 http-equiv、 content、 charset 

value、 min、 max、 low、 high、 optimum、 form 
data、 type、 name、 usemap、 form、 width、 height 
reversed、 start 

disabled、 label 

disabled、 label、 selected、 value 

for、 form. name 

name、 value 

value、 max、 form 

cite 

src async、 defer、 type、 charset 

autofocus、 disabled、 form、 multiple、 name、 required、 size 
src、 type、 media 

media、 type、 scoped 

summary 

colspan、 rowspan、 headers 


autofocus、 cols、 disabled、 form、 maxlength、 name、 placeholder、 
readonly、 required、 rows、 wrap 

colspan、 rowspan、 headers、 scope 

datetime、 pubdate 

default、 kind、 label、 src、 srclang 


STC、 poster、 pireload、 autoplay、 loop、 controls、 width、 height 


ETrrorEvent 
某 个 工作 线程 未 捕获 的 异常 
Event 


当 一 个 Worker 线 程 中 发 生 一 个 未 捕获 的 异常 ， 并 且 这 个 异常 在 
WorkerGlobalScope 中 没有 被 对 应 onerror 函 数 处 理 时 ， 这 个 异常 就 会 在 
这 个 Worker 对 象 上 触发 一 个 不 冒 泡 的 错误 事件 。 这 个 事件 有 一 个 天 联 
的 ErorEvent 对 象 ， 提 供 了 刚刚 发 生 的 异常 的 详情 。 在 ErrorEvent 对 象 上 
调用 preventDefault() (或 从 事件 处 理 程序 上 返回 false) 将 阻止 错误 辣 包 
含 的 线程 进一步 传播 ， 也 可 能 会 阻止 它 在 错误 控制 侣 显示 。 


属性 


readonly string flename 

最 初 抛 出 异常 的 JavaScript 文 件 的 URL。 
readonly unsigned long lineno 

文件 中 抛 出 异 第 的 行 号 。 

readonly string message 

摘 述 该 异常 的 消 轧 。 

Event 

标准 事件 、IE 事 件 以 及 jQuery 事件 的 细 方 


当 事 件 处 理 程序 被 调用 时 ， 一 个 Event 对 象 会 传 入 ， 该 对 象 的 属性 给 出 
事件 的 细 方 ， 比 如 事件 的 类 型 以 及 发 生 事 件 的 元 素 。Event 对 和 象 的 方法 
可 以 控制 事件 的 传播 。 所 有 现代 浏 哎 絮 者 实现 了 一 个 标准 事件 模型 ， 
除了 三 ，IE8 及 更 早 的 版 本 定义 了 不 兼容 的 专 有 事件 模型 。 本 页 归档 标 
准 事件 模型 的 属性 和 方法 以 及 对 应 的 正方 案 ， 也 包括 jQuery 事件 对 象 ， 
后 考 在 IE 上 模拟 一 个 标准 的 事件 对 象 。 关 于 事件 的 更 多 信息 请 参考 第 
17 章 ， 关 于 jQuery 事件 的 更 多 信息 请 参考 19.4 节 。 


在 标准 事件 模型 中 ， 不 同 种 类 的 事件 有 与 其 相关 联 的 不 同 的 事件 对 

象 : 比如 ， 鼠 标 事件 有 一 个 具有 鼠标 相关 属性 的 MouseEvent 对 象 ， 键 
盘 事 件 有 一 个 具有 键盘 相关 属性 的 KeyEvent 对 象 。MouseEvent 和 
KeyEvent 共 享 一 个 通用 的 Event 超 类 。 不 过 ， 在 正和 jQuery 事件 模型 

中 ，Element 对 象 上 发 生 的 所 有 事件 都 只 使 用 一 个 单独 的 Event 对 象 。 在 
一 个 鼠标 事件 中 ，Event 对 象 的 与 键盘 事件 相关 的 属性 是 没有 意义 的 ， 
但 这 些 属性 仍然 会 定义 。 为 简单 起 见 ， 这 儿 合 并 了 事件 层次 结构 ， 对 
所 有 可 被 分 发 到 Element 对 象 (然后 冒 泡 到 Document 和 Window 对 象 ) 

的 事件 属性 编写 了 文档 。 


本 来 ， 几 乎 所 有 客户 端 JavaScript 事 件 都 是 在 文档 元 素 上 触发 的 ， 也 很 
自然 地 应 该 把 文档 相关 的 事件 对 象 的 属性 合并 在 一 起 。 不 过 HTML5 及 
相关 的 标准 引入 了 一 些 新 的 事件 类 型 ， 这 些 事件 在 非 文 档 元 素 上 解 
发 。 这 些 事件 类 型 经 常 具 有 自己 的 Event 类 型 ， 这 些 类 型 在 它们 自己 的 
参考 页 面 有 介绍 。 参 见 BeforeUnloadEvent、CloseEvent、ErrorEvent、 
HashChangeEvent ~、 MessageEvent ~ PageTransitionEvent 、\ 
PopStateEvent 、 ProgressEvent 以 及 StorageEvent ° 


这 些 事 件 对 象 类 型 中 的 大 多 数 都 扩展 了 Event。 其 他 新 的 HTML5 相 关 的 
事件 类 型 没有 定义 专 有 的 事件 对 象 类 型 与 这 些 事件 相 关 的 对 象 只 
是 一 个 普通 的 Event 对 象 。 本 页 归档 这 个 “普通 "Event 对 象 加 上 它 的 一 些 
子 类 型 的 属性 。 下 面 带 星 号 的 属性 是 由 Event 类 型 自己 定义 的 ， 这 些 属 
性 继承 和 目 MessageEvent 等 事件 类 型 ， 一 般 为 简单 的 、 普 通 的 事件 ， 如 
Window 对 象 的 load 事 件 和 MediaElement 对 象 的 播放 事件 定义 这 些 属 


床 


长 E 攻 每 
短 民 且 


常量 定义 eventPhase 属 性 的 值 。IE 事 件 模 型 不 支持 这 个 属性 以 及 这 
蛙 O 〇 


unsigned short CAPTURING_PHASE=1 
事件 正 分 发 给 它 的 目标 的 祖先 的 捕获 事件 处 理 程序 。 
unsigned short AT_TARGET=2 

事件 正在 它 的 目标 上 分 发 。 


unsigned short BUBBLING_PHASE=3 

事件 正在 冒 泡 ， 同 时 正在 它 的 目标 的 祖先 上 分 发 。 

属性 

这 儿 列 出 的 属性 是 由 标准 事件 模型 定义 的 ， 适 用 于 Event 对 象 ， 也 适用 
于 鼠标 及 键盘 相关 的 事件 对 象 。 这 儿 也 列 出 了 正 及 jQuery 事件 模型 的 属 


性 。 带 星 号 的 属性 是 由 Event 直 接 定义 的 ， 在 任何 标准 Event 对 象 上 总 是 
可 用 的 ， 无 论 这 个 事件 是 什么 类 型 。 


readonly boolean altKey 
事件 发 生 时 Alt 键 是 否 按 下 。 适 用 于 鼠标 、 键 盘 事 件 以 及 正事 件 。 
readonly boolean bubbles* 


如 果 事 件 会 冒 泡 (除非 调用 stopPropagation()) 则 此 属性 为 true; 否则 为 
false。 正 事件 未 定义 这 个 属性 。 


readonly unsigned short button 


在 一 个 mousedown、mouseup 或 click 事 件 中 ， 哪 个 鼠标 按键 改变 了 状 

态 。 值 为 0 表示 左 键 ， 值 为 2 表示 右键 ， 值 为 1 表示 鼠标 的 中 键 。 注 意 ， 
这 个 属性 在 按键 改变 状态 时 定义 ， 所 以 ， 例 如 ， 不 可 用 于 报告 在 一 个 
mousemove 事 件 中 某 个 按键 是 否 一 直 按 下 。 同 时 ， 这 个 属性 也 不 是 一 个 
位 图 : 它 不 能 告诉 你 除 一 个 键 按 下 之 外 的 更 多 信息 。 最 后 ， 有 些 浏 贤 
组 只 生成 左 键 点 击 的 事件 。 


IE 事 件 定义 一 个 不 兼容 的 button 属 性 。 在 下 中， 这 个 属性 是 一 个 位 掩 
码 : 如 果 左 键 按 下 则 1 位 被 设置 ， 右 键 按 下 则 2 位 被 设置 ， (三 键 鼠 标 
的 ) 中 键 按 下 则 4 位 被 设置 。jQuery 没 有 模拟 IE 的 标准 button 属 性 ， 但 参 
考 了 which 属 性 。 


readonly boolean cancelable* 


如 果 事 件 的 默认 操作 可 以 用 preventDefault0) 来 取消 则 为 true; 否则 为 
false。 所 有 标准 事件 类 型 都 定义 了 这 个 属性 ， 除 了 下 事件 。 


boolean cancelBubble 


在 下 事件 模型 中 ， 如 果 一 个 事件 处 理 程序 想 阻 止 一 个 事件 向 上 冒 泡 到 
包含 它 的 对 象 ， 必 须 设置 这 个 属性 为 tue。 对 于 标准 事件 使 用 的 是 


stopPropagation() ° 
readonly integer charCode 


适用 于 按键 事件 ， 这 个 属性 的 值 为 引发 事件 的 可 打印 字符 的 Unicode 编 
码 。 对 于 不 可 打印 的 功能 键 来 说 ， 这 个 属性 的 值 为 0， 同 时 ， 这 个 属性 
不 适用 于 keydown 和 keyup 事 件 。 可 以 使 用 String.fromCharCode0 来 将 这 
个 值 转 为 字符 。 在 大 多 数 浏览 絮 中 ， 发 生 按键 事件 时 keyCode 的 值 和 这 
个 属性 的 值 一 样 。 但 在 Firefox 中 ， 按 键 事 件 没有 定义 keyCode， 必 须 使 
用 charCode。 这 个 事件 不 是 标准 事件 ， 在 下 事件 中 未 定义 ，jQuery 也 没 
有 对 其 进行 模拟 。 


readonly long clientX 
readonly long clientY 


鼠标 相对 于 客户 端 区 域 (client area) 或 浏览 器 窗口 的 X 及 Y 坐 标 。 注 

意 ， 这 两 个 坐标 疫 有 包含 文档 滚动 条 滚动 的 值 ， 如 果 一 个 事件 在 窗口 
的 最 上 方 发生 ， 无 论文 档 上 方 已 经 滚动 了 多 少 ，clientY 的 值 都 将 是 0。 
这 两 个 属性 适用 于 所 有 类 型 的 鼠标 事件 。 正 事件 和 标准 事件 中 都 定义 
了 这 两 个 属性 。 也 可 参考 pageX 和 pageY 。 


readonly boolean ctrlKey 


J Ct 键 是 否 按 下 。 适 用 于 鼠标 和 键盘 事件 ， 也 适用 于 正事 


readonly EventTarget currentTarget* 


当前 正在 处 理 这 个 事件 的 Element、Document 或 Window。 在 捕获 或 冒 
泡 阶 段 ， 它 和 target 不 一 致 。 正 事件 没有 定义 这 个 属性 ， 不 过 jQuery 事 
件 模拟 了 这 个 属性 。 


readonly DataTransfer dataTransfer 


适用 于 拖 放 事件 ， 这 个 属性 定义 了 协调 整个 拖 放 操作 的 DataTransfer 对 
象 。 拖 放 事 件 是 一 种 鼠标 事件 ， 有 这 个 属性 的 事件 仍然 会 有 clientX、 
clientY 以 及 其 他 鼠标 事件 属性 。 拖 放 事 件 包 括 拖 动 源 上 的 dragstart、 
drag、dragend 以 及 放置 目标 上 的 dragenter、dragover、dragleave 和 
drop。 关 于 拖 放 操作 的 更 多 细节 ， 请 参考 DataTransfer 和 17.7 节 “。 


readonly boolean defaultPrevented* 


如 果 在 当前 事件 上 调用 defaultPrevented0 则 为 true; 否则 为 false。 这 是 标 
准 事 件 模 型 中 一 个 新 添加 的 属性 ， 可 能 还 不 是 所 有 浏 贤 絮 都 支持 。 
SD 功能 类 似 于 这 个 属性 的 isDefaultPrevented() 方 


法 


readonly long detail 


与 事件 有 关 的 一 个 数字 细 记 。 对 dick、mousedown 以 及 mouseup 事 件 来 

说 ， 这 个 值 是 单 击 次 数 : 单 击 为 1， 双 击 为 3， 三 击 为 3， 依 此 类 推 。 在 

Firefox 中 ，DOMMouseScrol 事 件 使 用 这 个 属性 来 报告 鼠标 滚轮 滚 过 的 
量 。 


readonly unsigned short eventPhase* 

当前 事件 传播 的 阶段 。 值 为 上 面 定 义 的 三 个 常量 之 一 。IE 事 件 不 文 持 
这 个 属性 。 

readonly boolean isTrusted* 


如 采 当 前 事件 是 由 浏览 絮 创 建 并 分 发 的 则 为 true; 如 果 是 由 JavaScript 代 
码 创建 并 分 发 的 人 造 事件 则 为 false。 这 个 属性 在 标准 事件 模型 中 还 是 
一 个 相对 较 新 的 属性 ， 可 能 不 是 所 有 浏览 亏 都 已 实现 。 


readonly Element fromElement 


适用 于 三 中 的 mouseover 和 mouseout 事 件 ，fromElement 指 向 鼠标 指针 下 
在 其 中 移动 的 对 象 。 标 准 事件 中 对 应 的 是 relatedTarget 属 性 。 


readonly integer keyCode 


按 下 的 键 的 实际 的 键 码 。 这 个 属性 对 所 有 类 型 的 键盘 事件 都 可 用 。 键 
码 可 能 会 与 浏览 器 、 操 作 系 统 或 者 依赖 的 键盘 硬件 相关 。 一 般 情 况 

下 ， 显 示 一 个 可 打印 字符 的 键 的 实际 的 键 码 丈 是 那个 字符 的 编码 。 非 
打印 字符 的 功能 键 的 键 码 可 能 有 很 多 种 变化 ， 可 参见 例 17-8， 其 中 包 合 
一 组 常用 的 编码 。 这 个 属性 尚未 标准 化 ， 但 所 有 浏览 器 (包括 还 ) 都 
起 


readonly boolean metaKey 


on Meta 键 是 否 按 下 。 适 用 于 鼠标 和 键盘 事件 ， 也 包括 正事 


readonly integer offsetX,offsetY 


适用 于 IE 事件 ， 这 两 个 属性 定义 事件 发 生 在 事件 源 元 素 (参见 
srcElement) 的 坐标 系统 中 的 坐标 。 标 准 事件 没有 等 效 的 属性 。 


readonly integer pageX,pageY 
这 两 个 属性 不 是 标准 属性 ， 但 广泛 支持 ， 类 似 于 dientX 和 dlientY， 然 


而 它们 使 用 文档 坐标 而 不 是 窗口 坐标 。 正 事件 没有 定义 这 两 个 属性 ， 
不 过 jQuery 为 所 有 浏览 郁 模 拟 了 它们 。 


readonly EventIarget relatedTarget* 


指向 一 个 事件 目标 (通常 是 一 个 文档 元 素 ) ， 该 目标 与 事件 的 target 节 
点 关联 。 对 mouseover 事 件 来 说 ， 它 是 鼠标 指针 移动 到 目标 上 时 离开 的 
那个 元 素 。 对 mouseout 事 件 来 说 ， 它 是 鼠标 离开 目标 时 进入 的 元 素 。 
这 个 属性 在 下 事件 中 没有 定义 ， 不 过 jQuery 事件 中 模拟 了 它 。 参 见 IE 属 
性 fromElement 和 toElement。 


boolean returnValue 


适用 于 IE 事件 ， 将 这 个 属性 设置 为 false 将 阻止 发 生 事件 的 源 元 素 的 默认 
动作 。 标 准 事件 中 使 用 preventDefaultO) 方 法 代 雁 。 


readonly long screenX,screenY 


适用 于 鼠标 事件 ， 这 两 个 属性 定义 了 鼠标 指针 相对 于 用 户 的 显示 需 的 
左上 角 的 X、Y 坐 标 。 这 两 个 属性 一 般 不 是 很 有 用 ， 不 过 适用 于 所 有 鼎 
标 事件 类 型 ， 同 时 标准 事件 和 了 事件 都 文 持 。 


readonly boolean shiftKey 
ee 。 适 用 于 鼠标 和 按键 事件 ， 也 适用 于 正事 


readonly EventIarget srcElement 


人 于 IE 事 件 ， 这 个 属性 定义 触发 事件 的 对 象 。 标 准 事件 中 使 用 target 


readonly EventTarget target* 


当前 事件 的 目标 对 象 一 一 触发 这 个 事件 的 对 象 。 (所 有 可 以 作为 事件 
目标 的 对 象 都 实现 EventTarget 的 方法 。) 这 个 属性 不 适用 于 IE 事 件 ， 不 
过 jQuery 事件 模拟 它 。 参 见 srcElement 。 


readonly unsigned long timeStamp* 


一 个 数字 ， 可 能 为 事件 发 生 的 时 间或 日 期 的 时 间 惟 ， 也 可 能 是 一 个 至 
少 可 用 来 比较 两 个 事件 发 生 的 先后 顺序 的 数字 。 许 多 浏览 器 返回 的 是 
一 个 可 传 入 Date0 构 造 钞 数 的 时 间 礁 。 但 是 ， 在 Firefox 4 及 更 早 的 版 本 
中 ， 这 个 属性 是 另外 类 型 的 时 间 戳 ， 比 如 目 电脑 启动 以 来 的 襄 秒 数 。 
IE 事件 不 文 持 这 个 属性 ，jQuery 将 这 个 属性 设置 为 Date.getTime0 返 回 的 
格式 的 时 间 戳 。 


Element toElement 


适用 于 于 中 的 mouseover 和 mouseout 事 件 ，toElement 指 代 鼠 标 指 针 正 要 
移入 的 对 象 。 标 准 事件 中 使 用 relatedTarget 代 苦 。 


readonly string type* 


当前 Event 对 象 的 事件 名 。 这 是 事件 处 理 程序 注册 的 名 字 或 者 事件 处 理 
程序 属性 去 掉 开头 的 "on" 之 后 的 名 字 ， 比 如 "click"、"]load" 或 "submit"。 
这 个 属性 适用 于 标准 事件 和 正事 件 。 


readonly Window View 


生成 事件 的 窗口 (由 于 历史 原因 叫做 "view") 。 这 个 属性 适用 于 所 有 标 
准 的 用 户 界面 事件 ， 比 如 鼠标 和 键盘 事件 。IE 事 件 不 支持 此 属性 。 


readonly integer wheelDelta 


适用 于 鼠标 滚轮 (mousewheel) 事件 ， 这 个 属性 指明 Y 轴 上 已 经 深 动 的 
数量 。 不 同 的 浏览 妖 中 此 属性 的 值 也 不 同 : 细 和 请 参见 17.6T。 这 是 一 
个 非 标 准 属性 ， 但 是 所 有 浏 宽 絮 都 支持 ， 包 括 IE8 及 更 早 版 本 。 


readonly integer wheelDeltaX 


readonly integer wheelDeltaY 


适用 于 文 持 两 个 维度 的 鼠标 滚轮 的 浏览 器 中 的 mousewheel 事 件 ， 这 两 
个 属性 指明 X 和 Y 方 向 的 滚动 数量 。17.6 节 有 关于 如 何 解释 这 两 个 属性 
的 说 明 。 如 果 wheelDeltaY 有 和 定义， 那么 它 将 与 wheelDelta 属 性 的 值 相 
同 o 


readonly integer which 


这 古 个 非 标 准 的 遗留 属性 ， 除 正 外 的 浏 蜗 絮 都 文 持 ，jQuery 中 有 对 应 的 
模拟 。 对 鼠标 事件 来 说 ， 它 和 button 属 性 一 样 : 1 表示 左 键 ，2 表 示 中 
键 ，3 表 示 右 键 。 对 键盘 事件 来 疝 ， 它 和 keyCode 的 值 一 样 。 


方法 
人 由 Event 类 目 己 定义 的 ， 所 以 在 所 有 标准 Event 对 象 上 它们 
品 o 


void initEvent(string type,boolean bubbles,boolean cancelable) 


这 个 方法 初始 化 一 个 Event 对 象 的 type、bubbles 以 及 cancelable 属 性 。 问 
Document 有 的 createEvent() 方 法 传 入 字符 串 参 数 "Event" 将 创建 一 个 新 的 事 
件 对 象 。 然 后 ， 在 使 用 这 个 方法 将 其 初始 化 之 后 ， 通 过 将 它 传 入 某 个 
EventTarget 时 dispatchEvent(O 方 法 将 它 分 发 出 去 。 其 他 标准 事件 属性 

( 除 type、bubbles 以 及 cancelable) 将 在 分 发 时 初始 化 。 如 果 想 创建 、 
初始 化 然后 分 发 一 个 更 复杂 的 合成 (synthetic) 事件 ， 必 须 癌 


createEvent() 传 入 一 个 不 同 的 参数 (比如 "MouseEvent") ， 然 后 用 类 似 
initMouseEvent() (本 书 没 有 介绍 ) 的 指定 类 型 的 初始 化 函数 来 初始 化 
它 o 


void preventDefault() 

告诉 Web 浏 览 器 不 要 执行 与 当前 事件 关联 的 默认 操作 ， 如 果 存 在 对 应 的 
默认 操作 的 话 。 如 采 事 件 不 是 可 取消 的 类 型 ， 这 个 方法 将 没有 任何 效 
果 。 这 个 方法 不 适用 于 正事 件 对 象 ， 不 过 jQuery 中 有 对 应 的 模拟 。 在 IE 
事件 模型 中 ， 替 代 的 方法 是 将 retumValue 属 性 设置 为 false 。 


void stopImmediatePropagation() 


类 似 于 stopPropagation()， 但 除 此 之 外 ， 它 还 将 阻止 注册 在 这 个 文档 元 
素 上 的 所 有 其 他 事件 处 理 程序 。 这 个 方法 是 新 添加 到 标准 事件 模型 中 
的 ， 可 能 不 是 所 有 浏览 局 都 实现 它 。 它 不 适用 于 正事 件 模型 ， 不 过 
jQuery 中 有 对 应 的 模拟 。 


void stopPropagation() 


阻止 事件 在 捕获 、 目 标 、 冒 泡 阶 段 进行 传播 。 调 用 这 个 方法 后 ， 同 一 
个 节点 上 同一 个 事件 的 其 他 事件 处 理 程序 将 被 调用 ， 但 这 个 事件 将 不 
会 分 发 到 其 他 市 点 上 。 这 个 方法 在 还 事件 模型 中 不 支持 ， 不 过 jQuery 中 
有 对 应 模拟 。 在 了 下 中， 代替 调用 stopPropagation0 的 方法 是 将 
cancel]Bubble 设 置 为 true。 


提议 属性 
这 儿 列 出 的 属性 是 当前 DOM Level 3 Events specification 的 草案 中 的 提 
议 。 它 们 涉及 现在 浏览 器 中 的 主要 不 兼容 部 分 ， 不 过 〈 在 写本 书 时 ) 


还 没有 任何 浏 贤 器 实现 它 。 如 末 它 们 通用 地 实现 了 ， 编 写 处 理 文本 输 
入 事件 、 按 键 事 件 以 及 鼠标 事件 的 可 移植 代码 将 更 容易 更 简短 。 


readonly unsigned short buttons 
这 个 属性 类 似 于 上 面 介 绍 过 的 正版 本 的 button 属 性 。 


readonly string char 


适用 于 键盘 事件 ， 这 个 属性 你 存 事件 生成 的 字符 串 〈 可 能 包含 多 个 字 


符 ) 。 

readonly string data 

适用 于 textinput 事 件 ， 这 个 属性 定义 输入 的 文本 。 
readonly unsigned long deltaMode 


适用 于 滚轮 事件 ， 这 个 属性 定义 deltaX、deltaY 以 及 deltaZz 属 性 的 合适 的 
转换 值 。 这 个 属性 的 值 可 能 为 下 面 的 常量 之 一 : 

DOM DELIA PIXEL ~ DOM DELIA LINE 、 DOM DELTA PAGE。 
这 个 属性 的 值 是 与 平台 相关 的 ， 它 可 能 取决 于 系统 偏好 或 者 深 轮 事件 
时 按 下 的 辅助 键 。 


readonly long deltaX,deltaY,deltaZ 
适用 于 滚轮 事件 ， 这 些 属性 定义 滚轮 围绕 这 三 条 可 能 的 轴 分 别 旋转 了 


多 少 。 


readonly unsigned long inputMethod 


适用 于 textinput 事 件 ， 这 个 属性 指明 文本 被 输 入 的 方式 。 属 性 值 可 能 大 
下 面 的 常量 之 一 : DOM_INPUT_METHOD_UNKNOWN、 
OM_INPUT METHOD KEYBOARD、 

DOM_INPUT METHOD PASTE 、 DOM_ INPUT METHOD DROP、 
DOM_INPUT METHOD IME ~ DOM_INPUT METHOD_OPTION、 
DOM_INPUT METHOD HANDWRITING 、 

DOM_INPUT METHOD VOICE 、 
DOM_INPUT METHOD MULTIMODAL 、 

DOM_INPUT METHOD_ SCRIPT。 


readonly string key 


对 生成 字符 的 键盘 事件 来 说 ， 这 个 属性 的 值 与 cha rt 的 值 一 样 。 如 果 键 
盘 事 件 没 有 生成 字符 ， 这 个 属性 将 保存 按 下 的 键 的 名 字 
(如 "Tab" 或 "Down") 。 


readonly string locale 


适用 于 键盘 事件 和 textinput 事 件 ， 这 个 属性 指明 一 个 标识 键盘 配置 的 区 
域 的 语言 代码 (例如 "en-GB") ， 如 果 该 信息 已 知 的 话 。 


readonly unsigned long location 


适用 于 键盘 事件 ， 这 个 属性 指明 按 下 的 键 的 键盘 位 置 。 属 性 的 值 可 能 
是 下 面 的 常量 之 一 : DOM_KEY _ LOCATION STANDARD 、 
DOM_KEY _ LOCATION_LEFT、DOM_KEY _ LOCATION RIGHT、 
DOM_KEY _ LOCATION_NUMPAD 、 
DOM_KEY _ LOCATION_MOBILE 、 

DOM KEY _ LOCATION _ JOYSTICK 。 


readonly boolean repeat 


适用 于 键盘 事件 ， 如 时 一 个 键 按 下 足够 长 的 时 间 ， 和 触发 了 重复 事件 ， 
则 这 个 属性 值 为 tue。 


提议 方法 


类 似 于 上 面 列 出 的 提议 属性 ， 这 儿 列 出 的 方法 已 经 在 标准 的 草案 中 有 
了 提议 ， 但 还 没有 被 任何 浏 磺 天 实现 。 


boolean getModiferState(string modifer) 


适用 于 鼠标 和 键盘 事件 ， 如 果 事 件 发 生 时 指定 的 辅助 键 按 下 ， 则 这 个 
方法 返回 true; 否则 返回 false。modifier 可 能 是 下 面 的 字符 串 之 

一 : "Alt"、"AltGraph" 、"CapsLock" ~、 "Control" 、 "Fn" 、 "Meta"、 "Num 
Lock" 、"Scroll" 、 "Shift"、"SymbolLock" 以 及 "Win"。 


EventSource 
到 一 个 HTTP 服 务 器 的 长 连接 
EventIarget 


一 个 EventSource 表 示 一 个 HITP 长 连接 ，Web 服 务 硕 可 以 通过 这 个 连 

过 “推送 ”文本 消 轧 。 要 使 用 这 些 “ 服 务 希 发 送 的 事件 ”， 可 以 将 服务 怖 的 
URL 传 给 EventSource() 构 造 男 数 ， 然 后 在 生成 的 EventSource 对 象 上 注册 
一 个 消息 事件 处 理 程序 。 


服务 器 发 送 的 事件 是 狐 添 加 的 ， 在 编写 本 书 时 ， 还 没有 浏 咒 器 文 持 。 
构造 画 数 
new EventSource(string url) 


创建 一 个 连接 到 指定 unl 的 Web 服 务 器 的 新 EventSource 对 象 。url 为 相对 
于 当前 文档 的 URL 的 地 址 。 


常量 

下 面 的 常量 定义 了 readyState 属 性 可 能 的 值 。 

unsigned short CONNECTING=0 

连接 正在 建立 中 ， 或 者 连接 已 关闭 并 且 EventSource 正 在 重新 连接 。 
unsigned short OPEN=1 

连接 已 打开 ， 正 在 分 发 事件 。 

unsigned short CLOSED=2 

连接 已 关闭 ， 原 因 是 调用 了 close() 方 法 ， 或 者 发 生 了 重大 错误 不 可 能 


新 连接 。 


属性 


readonly unsigned short readyState 

连接 的 状态 。 上 面 的 常量 定义 了 所 有 可 能 的 值 。 
readonly string url 

EventSource 连 接 到 的 绝对 URL 。 

方法 


void closel() 


这 个 方法 将 关闭 连接 。 一 旦 调用 这 个 方法 ，EventSource 对 象 就 不 再 可 
以 使 用 。 如 果 要 再 次 连接 ， 只 能 创建 一 个 新 的 EventSource。 


事件 处 理 程序 


网 络 通信 和 是 异步 的 ， 所 以 当 连 接 打 开 、 发 生 错 误 以 及 有 消 恩 从 服务 器 
到 达 时 EventSource 会 触发 事件 。 可 以 在 这 儿 列 出 的 属性 上 注册 事件 处 
理 程序 ， 也 可 以 使 用 EventTarget 的 方法 来 代替 。EventSource 事 件 都 分 
目 身 之 上 ， 不 会 冒 泡 ， 也 没有 可 以 取消 的 默认 行 


Onerror 


发 生 错 误 时 触发 。 天 联 的 事件 对 象 是 一 个 简单 的 Event 。 


onmessage 


当 有 请 妃 从 服务 硕 到 达 时 触发。 关联 的 事件 对 象 是 一 个 MessageEvent， 
通过 这 个 对 象 的 data 属 性 可 以 取得 服务 器 的 消息 的 文本 内 容 。 


onopen 
当 连 接 打 开 时 和 触发。 关联 的 事件 对 象征 一 个 商 单 的 Event。 

上 EventTIarget 

接收 事件 的 对 象 

有 事件 在 其 上 触发 的 对 象 或 者 事件 冒 泡 到 的 对 象 ， 需 要 一 种 方式 来 为 
这 些 事件 定义 处 理 程序 。 这 些 对 象 定 义 的 事件 处 理 程序 的 注册 属性 名 
一 般 以 "on" 开 头 ， 通 常 它们 也 定义 这 儿 描 述 的 方法 。 事 件 处 理 程 序 注册 
是 一 个 惊人 复杂 的 话题 ， 细 节 可 参见 17.2 刘 ， 特 别 要 注意 的 是 ，IE8 及 
更 早 的 版 本 使 用 的 是 和 所 有 其 他 浏览 右 者 不 同 的 方法 ， 在 接 下 来 的 专 
1 二 人 里 有 有 介绍“ 

方法 


void addEventListener(string type,function listener,[boolean useCapture]) 


这 个 方法 将 指定 的 listener 函 数 注 册 为 类 型 为 type 的 事件 的 事件 处 理 程 
序 。type 是 一 个 事件 名 称 字 符 串 ， 不 包含 "on" 前 级 。 如 果 这 是 一 个 注册 
在 真实 事件 目标 的 文档 祖先 上 的 捕获 事件 处 理 程序 (参见 17.2.3 节 ) ， 
参数 useCapture 的 值 应 该 为 ttue。 注 意 ， 有 些 浏览 器 还 要 求 传 入 第 三 个 
参数 到 这 个 函数 中 ， 要 注册 普通 的 非 捕 获 处 理 程序 只 能 传 入 false 。 


boolean dispatchEvent(Event event) 


这 个 方法 分 发 一 个 合成 event 到 当前 事件 目标 上 。 通 过 
document.createEventO 创 建 一 个 新 的 Event 对 象 ， 传 入 事件 名 (比如 对 
简单 事件 来 说 传 入 "event") 。 接 下 来 ， 为 创建 的 Event 对 象 调用 事件 初 
台 化 方法 : 对 简单 事件 而 言 ， 这 个 方法 是 initEvent() (参见 Event) 。 接 
下 来 ， 将 初始 化 后 的 事件 传 入 这 个 方法 来 分 发 号 。 在 现代 浏 贤 絮 中 ， 

每 一 个 Event 对 象 都 有 一 个 isTrusted 属 性 ， 由 JavaScript 分 发 的 任何 合成 
事件 的 这 个 属性 都 将 是 false 。 


每 一 种 事件 对 象 都 定义 一 个 特定 于 类 型 的 初始 化 方法 。 这 些 方法 不 经 
常用 到 ， 有 长 长 的 党 琐 的 参数 列表 ， 本 书 没有 相关 文档 。 如 果 需 要 创 
建 、 初 始 化 然后 分 发 比 基 本 Event 更 复杂 的 类 型 的 合成 事件 ， 只 能 去 在 
线 查 阅 初 始 化 方法 的 文档 。 


void removeEventListener(string type,function listener,[boolean 
UseCapture]) 


这 个 方法 移 除 一 个 已 注册 的 事件 listener 函 数 。 它 和 addEventListener0) 需 
要 的 参数 一 样 。 


Internet Explorer 的 方法 
IE8 及 更 早 的 版 本 不 支持 addEventListener() 和 removeEventListener()。 它 


2 面 两 个 非常 相似 的 方法 来 代替 。 《17.2.4 世 列 出 了 一 些 重要 
差异 。 


void attachEvent(string type,function listener) 


将 指定 的 listener 函 数 注 册 为 类 型 为 指定 type 的 事件 的 事件 处 理 程 序 。 注 
意 这 个 方法 的 type 需 要 在 事件 名 前 面包 含 "on"。 


void detachEvent(string type,function listener) 


这 个 方法 的 作用 与 attachEventO 相 反 。 
FieldSet 

HTML 表单 中 的 <fieldset > 

Node 、 Element ~、 FormControl 


FieldSet 对 象 表示 HTML<form > 中 的 <fieldset>>。FieldSet 实 现 
FormControl 的 大 部 分 但 不 是 所 有 属性 和 方法 。 


属性 
boolean disabled 


如 果 FieldSet 禁 用 则 为 tue。 禁 用 FieldSet 会 同时 禁用 它 包 售 的 表单 控 
件 。 


readonly HTMLFormControlsCollection elements 

包含 当前 <fieldset> 内 的 所 有 表单 控件 的 类 数组 对 象 。 

File 

本 地 文件 系统 中 的 文件 

File 是 一 个 具有 名 字 同 时 可 能 也 有 一 个 修改 日 期 的 Blob。 它 代表 本 地 文 
件 系统 中 的 一 个 文件 。 可 以 从 一 个 由 <input type=file > 元 素 组 成 的 files 
数组 中 ， 或 者 从 一 个 由 与 drop 事 件 的 Event 对 象 关联 的 DataTransfer 对 象 
组 成 的 fies 数 组 中 ， 取 得 一 个 用 户 选 择 的 文件 。 

也 可 以 在 私有 的 沙 箱 文件 系统 中 获取 File 对 象 ， 就 像 22.7 丰 介绍 过 的 一 

a 时 候 ， 文 件 系统 的 API 还 不 是 很 稳定 ， 该 部 分 没有 对 
VA YY 当 O 


可 以 通过 FormData 对 象 或 者 将 File 传 入 XMLHttpRequest.send0) 来 将 一 个 
文件 的 内 容 上 传 到 服务 器 ， 除 此 之 外 File 对 象 本 喘 不 支持 别 的 操作 。 可 
以 使 用 FileReader 来 读 一 个 File (或 者 任意 Blob) 的 内 容 。 


属性 

readonly Date lastModifedDate 

当前 文件 的 修改 日 期 ， 如 果 不 可 用 则 为 null 。 

readonly string name 

当前 文件 的 文件 名 (不 包括 路 径 ) 。 

FileError 

读 文件 时 的 错误 

FileError 对 象 代表 使 用 FileReader 或 FileReaderSync 读 一 个 文件 时 发 生 的 
错误 。 如 果 使 用 同步 API， 将 抛 出 FileError 对 象 。 如 果 使 用 异步 APL， 


注意 FileWriter API (22.7 闻 介绍 过 ， 不 过 它 还 不 够 稳定 ， 因 此 该 部 分 没 
有 相关 文档 ) 为 这 个 对 象 添 加 了 新 的 错误 代码 常量 。 


常量 
FileError 错 误 代 码 如 下 : 
unsigned Short NOT_FOUND_ERR=1 


文件 不 存在 。 (可 能 在 用 户 选 中 它 后 它 被 抽 除 了 ， 然 后 程序 党 试 去 计 
它 。 


unsigned Short SECURITY_ERR=2 

未 知 的 安全 问题 阻止 浏 唤 器 执行 读 取 文件 的 代码 。 
unsigned Short ABORT_ ERR=3 

中 止 读 取 文件 的 笑 试 。 


unsigned short NOT_READABLE ERR=4 


可 能 因为 它 的 权限 已 改变 或 者 因为 奴 一 个 进程 把 它 锁 定 


unsigned short ENCODING_ERR=5 


调用 readAsDataURLO 和 失败， 因为 文件 太 长 ， 无 法 编码 为 一 个 
data://URL ° 


属性 

readonly unsigned short code 

这 个 属性 指明 发 生 的 错误 的 种 类 。 它 的 值 为 上 面 的 常量 之 一 。 
FileReader 

异步 读 取 一 个 File 或 Blob 

EventIarget 


FileReader 定 义 读 取 File 或 Blob 的 异步 API。 可 通过 下 面 的 步骤 读 取 一 个 
文件 : 


.通过 FileReader(0 构 造 函 数 创建 一 个 FileReader。 

定义 需要 的 事件 处 理 程序 。 

.将 File 或 Blog 对 象 传 入 4 个 读 取 方 法 中 的 一 个 。 

-触发 onload 处 理 程序 时 ， 文 件 内 容 将 可 以 通过 result 属 性 访问 。 或 者 ， 
如 果 触 发 onerror 处 理 程序 ，error 属 性 将 指向 一 个 提供 更 多 信息 的 
FileError 对 象 。 


0 ， 可 以 重用 FileReader 对 象 或 根据 需要 丢弃 它 并 创建 一 个 新 


关于 在 工作 线程 中 可 使 用 的 同步 API， 参 见 fileReaderSync 。 
构造 玉 数 


new FileReader() 

使 用 FileReader() 构 造 画 数 创建 一 个 新 的 FileReader 对 象 ， 不 需要 参数 。 
常量 

下 面 的 和 常量 是 readyState 属 性 可 能 的 值 : 
unsigned short EMPTY=0 

还 没有 读 取 方法 修 调 用 。 

unsigned short LOADING=1 
正在 读 取 中 。 

unsigned short DONE=2 

读 取 已 完成 ， 成 功 或 市 有 销 误 。 

属性 


readonly FileError error 
如 有 宁 读 取 中 出 现 错误 ， 这 个 属性 将 指 代 描 述 该 错误 的 FileError 。 
readonly unsigned short readyState 


这 个 属性 接 述 FileReader 的 当前 状态 。 它 的 值 可 能 为 上 面 列 出 的 3 个 篆 


量 之 一 。 
readonly any result 


如 果 读 取 成 功 完成 ， 这 个 属性 将 以 字符 串 或 ArrayBuffer 的 形式 (取决 
于 调用 了 哪个 读 取 方法 ) 保存 对 应 的 File 或 Blob 内 容 。 如 果 readyState 为 
LOADING 或 者 触发 一 个 progress 事 件 ， 这 个 属性 可 能 包含 对 应 的 File 或 
ee 。 如果 没 有 调用 读 取 方法 或 者 发 生 了 错误 ， 这 个 属性 
将 为 null 。 


方法 


void abort() 


这 个 方法 中 止 一 个 读 取 任 务 。 它 将 readyState 设 置 为 DONE， 将 result 设 
置 为 null， 将 error 设 置 为 一 个 code 为 FileError.ABORT_ERR 的 FileError 对 
象 。 然 后 ， 它 将 触发 一 个 abort 事 件 和 一 个 loadend 事 件 。 


void readAsArrayBuffer(Blob blob) 

异步 读 取 blob 的 字 节 内容， 结果 为 一 个 ArrayBuffer 对 象 ， 可 通过 result 
属性 访问 。 

void readAsBinaryString(Blob blob) 

异步 恋 取 blob 的 字 广 内 容 ， 将 它们 编码 为 JavaScript 二 进 制 学 符 串 ， 并 
将 结 采 赋值 给 result 属 性 。JavaScript 一 进 制 字符 串 中 的 每 一 个 "字符 ”的 
字符 编码 都 在 0 一 255 之 间 。 可 以 使 用 String.charCodeAt(0 来 提取 这 些 字 


节 值 。 注 意 ， 二 进 制 字符 串 是 二 进 制 数据 的 一 种 低 效 的 表示 形式 : 如 
宁可 能 应 该 使 用 ArrayBuffers 代 替 。 


void readAsDataURL(Blob blob) 


异步 读 取 blob 的 字 节 ， 将 它们 (以 及 该 Blog 的 类 型 ) 编码 为 
data://URL， 并 将 result 属 性 设置 为 返回 的 字符 串 。 


void readAsText(Blob blob,[string encoding]) 


异步 读 取 blob 的 字 节 内 容 ， 并 使 用 指定 的 encoding 将 它 解 码 为 一 个 
Unicode 文 本 字符 串 ， 然 后 将 result 属 性 设置 为 解码 后 的 字符 串 。 如 未 指 
定 encoding， 将 默认 使 用 UTF-8 〈 如 果 UTF-16 编 码 的 文本 以 一 个 字 节 顺 
序 标记 (Byte Order Mark) 开始 的 话 也 会 自动 检测 并 解码 它 ) 。 


事件 处 理 程 序 

和 所 有 异步 API 类 似 ，FileReader 十 基于 事件 的 。 可 以 使 用 这 儿 列 出 的 
处 理 程序 属性 来 注册 事件 处 理 程序 ， 或 者 使 用 FileReader 实 现 的 
EventTarget() 方 法 。 


FileReader 事 件 在 FileReader 对 象 自 喘 上 触发 。 它 们 不 冒 泡 ， 也 没有 可 取 
消 的 默认 行为 。FileReader 事 件 处 理 程序 总 是 传 入 ProgressEvent 对 象 。 


一 次 成 功 的 读 取 任务 以 一 个 loadstart 事 件 开 始 ， 接 着 是 零 个 或 多 个 
progress 事 件 、 一 个 load 事 件 ， 以 及 一 个 loadend 事 件 。 不 成 功 的 读 取 任 
务 以 一 个 loadstart 事 件 开 始 ， 接 着 是 零 个 或 多 个 progress 事 件 、 一 个 error 


或 abort 事 件 ， 以 及 一 个 loadend 事 件 。 
onabort 


当 读 取 任 务 通过 abort() 方 法 中 止 时 触发 。 


Onerror 


发 生 某 种 错误 时 触发 。FileReader 的 error 属 性 指 代 一 个 有 销 误 代码 的 
FileError 对 象 。 


onload 


当 File 或 Blog 成 功 读 取 时 触发 。FileReader 的 result 属 性 值 为 File 或 Blob 的 
内 容 ， 形 式 取决 于 调用 的 是 哪个 读 取 方法 。 


onloadend 


每 次 调用 FileReader 的 读 取 方法 最 后 都 会 产生 一 个 load 事 件 、 一 个 error 
事件 或 一 个 abort 事 件 。 在 这 些 事件 之 后 FileReader 也 会 触发 一 个 loadend 
事件 ， 这 样 有 些 脚本 就 可 以 只 监听 一 个 事件 而 不 是 所 有 的 3 个 事件 。 


onloadstart 
在 调用 一 个 read 方 法 之 后 但 是 在 读 取 数据 之 前 触发 。 
onprogress 


当 正 在 读 取 File 或 Blob 数 据 时 触发 ， 大 约 每 秒 20 次 。ProgressEvent 对 象 
指出 已 经 读 取 了 多 少 字 节 ，FileReader 的 result 属 性 可 能 包含 这 些 字 节 的 
表示 形式 。 


FileReaderSync 


同步 读 取 一 个 File 或 Blob 


FileReaderSync 是 FileReader API 的 一 个 同步 版 本 ， 仪 在 Worker 线 程 中 可 
用 。 同 步 API 比 异步 的 更 好 用 : 只 上 需要 人 简单 地 创建 一 个 FileReaderSync0 
对 和 象 ， 然 后 调用 它 的 一 个 读 取 方法 ， 该 方法 将 返回 对 应 File 或 Blob 的 内 

容 或 者 抛 出 一 个 FileError 对 象 。 

构造 函数 

new FileReaderSync() 


使 用 FileReaderSync0O 构 造 函 数 创 建 一 个 新 的 FileReaderSync 对 象 ， 后 者 
不 需要 参数 。 


7 由 
0 无 论 因 为 什么 原因 ， 这 些 方法 都 将 抛 出 一 个 FileError 对 


ArrayBuffer readAsArrayBuffer(Blob blob) 
读 取 blob 的 字 蔬 内容 并 以 ArrayBuffer 的 形式 返回 。 
string readAsBinaryString(Blob blob) 


读 取 blob 的 字 蔬 内容， 并 编码 为 JavaScript 二 进 制 字符 串 (参见 
String.fromCharCode()) ， 然 后 返回 这 个 二 进 制 字符 串 。 


string readAsDataURL(Blob blob) 


读 取 blob 的 字 节 内 容 并 将 内 容 与 blob 的 type 属 性 编码 为 一 个 data://URL， 
返回 这 个 URL 。 


string readAsText(Blob blob,[string encoding]) 


读 取 blob 的 字 节 内 容 并 使 用 指定 的 encoding (如 果 没 有 指定 编码 则 使 用 
UTF-8 或 UTF-16) 解码 为 文本 ， 并 返回 这 个 文本 。 


Form 


HTML 文 档 中 的 <form>> 表单 


Node、Element 


Form 对 象 代表 HTMEL 文 档 中 的 一 个 <form > 元 素 。 它 的 elements 属 性 是 
一 个 HTMLCollection， 提 供 了 访问 表单 的 所 有 元 于 的 一 个 方便 方法 。 
submit() 和 和 reset() 方 法 允许 表单 在 程序 的 控制 下 提交 或 者 重 置 。 


文档 中 的 每 一 个 表单 都 表示 为 docuement.forms[] 数 组 的 一 个 元 素 。 表 单 
的 元 素 (如 按钮 、 输 入 框 、 复 选 框 等 ) 都 收集 在 类 数组 对 象 
Form.elements 中 。 指 定名 字 的 表单 控件 可 以 直接 通过 名 字 引 用 : 控件 
名 可 以 像 Form 对 象 的 属性 名 一 样 使 用 。 也 就 是 说 ， 如 果 要 在 表单 {f 中 引 
用 一 个 name 属 性 为 "phone" 的 Input 元 素 ， 可 以 使 用 JavaScript 表 达 式 
f.phone。 


关于 HTML 表 单 的 更 多 内 容 可 参见 15.9 世 。 关 于 表单 中 可 以 使 用 的 表单 
控件 的 更 多 内 容 请 参考 FormControl、EFieldSet、Input、Label、Select 以 
及 TextArea。 


本 页 搞 述 HTML5 表 单 特 性 ， 在 写作 本 书 时 ， 这 些 特性 还 没有 广泛 实 
现 。 


属性 

这 儿 列 出 的 大 部 分 属性 只 是 同 名 的 HTIML 属 性 的 简单 映射 。 

string acceptCharset 

一 个 或 多 个 允许 的 字符 集 ， 其 中 的 表单 数据 可 能 会 编码 之 后 再 提交 。 
string action 

表单 提交 到 的 URL 。 

string autocomplete 


子 符 蝇 "on" 或 者 "off"。 如 果 为 "on"， 浏 览 絮 将 根据 之 前 访问 本 页 时 保存 
的 值 预 填 表单 控件 。 


readonly HTMLFormControlsCollection elements 


一 个 类 数组 对 象 ， 由 当前 表单 包含 的 表单 控件 组 成 。 
string enctype 


指定 表单 控件 的 值 提交 前 的 编码 方式 。 该 属性 合法 的 值 如 下 : 


:"application/x-www-form-urlencoded" (默认 ) 
"multipart/form-data" 
“"text/plain" 


readonly long length 


elements 属 性 表示 的 表单 控件 的 数目 。 表 单元 系 目 身 束 表现 得 有 点 像 表 
单 控件 的 类 数组 对 象 ， 对 于 一 个 表单 {及 一 个 整数 n 来 说 ， 表 达 式 f[n] 和 


f.elements[n] 是 一 样 的 。 


string method 
用 于 提交 表单 到 action URL 中 的 HTTP 方 法 。 只 能 是 "get" 或 "post"。 
string name 


表单 的 名 字 ， 由 HITML 的 name 属 性 指定 。 可 以 将 这 个 属性 的 值 作为 文 
档 对 象 的 name 属 性 使 用 ， 对 应 的 文档 属性 的 值 为 这 个 Form 对 象 。 


boolean noValidate 


如 果 表 单 在 提交 之 前 没有 验证 则 为 tue。 这 个 属性 是 HTML 的 novalidate 
属性 的 镜像 。 


string target 
窗口 或 窗 体 (frame) 的 名 字 ， 用 于 显示 表单 提交 之 后 的 返回 文档 。 
方法 


boolean checkValidity() 


在 文 持 表单 验证 的 浏 虎 邵 中 ， 这 个 方法 将 检查 每 个 表单 控件 的 有 效 
性 。 如 果 所 有 表单 控件 都 有 效 则 返回 tue， 如 果 任 何 控件 无 效 ， 它 将 在 
该 控件 触发 一 个 invalid 事 件 ， 然 后 返回 false 。 


void dispatchFormChange() 


这 个 方法 在 当前 表单 的 每 个 控件 上 触发 一 个 formchange 事 件 。 通 常 在 用 
户 的 输入 触发 一 个 change 事 件 时 表单 会 目 动 触 发 这 个 事件 ， 所 以 一 般 不 
需要 调用 这 个 方法 。 


void dispatchFormInput() 
这 个 方法 在 当前 表单 的 每 个 控件 上 触发 一 个 forminput 事 件 。 通 常 在 用 


户 的 输入 触发 mput 事 件 时 表单 会 目 动 触发 这 个 事件 ， 所 以 一 般 不 需要 
调用 这 个 方法 。 


void reset() 
将 所 有 表单 元 素 重 设 为 它们 的 默认 值 。 
void submit() 

手动 提交 当前 表单 ， 不 触发 submit 事 件 。 
事件 处 理 程序 


与 表单 相关 的 这 些 事件 处 理 程序 属性 是 定义 在 Element 上 的 ， 但 由 于 它 
们 在 Form 元 素 上 触发 ， 因 此 这 儿 也 列 出 了 更 多 的 细节 。 


onreset 
Se es 。 可 通过 返回 false 或 取消 这 个 事件 来 阻止 
onsubmit 


在 表单 提交 之 前 调用 。 可 通过 返回 false 或 取消 这 个 事件 来 阻止 提交 。 


FormControl 


所 有 表单 控件 的 通用 符 性 


大 多 数 HTML 表 单 控 件 是 <input> 元素， 但 表单 也 可 以 包含 <button 
>>、<select> 以 及 <textarea> 控件 。 这 一 页 是 天 于 这 些 元 素 类 型 都 有 
的 特性 的 文档 。 关 于 HTML 表 单 的 介绍 可 参见 15.9 季 ， 关 于 表单 及 表单 
控件 的 更 多 内 容 可 参考 Form、Input、Select 以 及 TextArea 。 

<fieldset> 和 < output> 元 素 实 现 这 儿 摘 述 的 属性 中 的 大 多 数 ， 但 不 是 
所 有 。 本 参考 页 将 FieldSet 和 和 Output 对象 作 为 FormControls 处 理 ， 虽 然 它 
们 没有 实现 所 有 属性 。 


本 页 包含 部 分 HTML5 表 单 特性 〈 特 别 是 表单 验证 ) 的 描述 ， 在 写作 本 
书 的 时 候 ， 这 些 特性 还 没有 广 沁 实现 。 


属性 


boolean autofocus 


如 果 文 档 一 加 载 本 控件 束 能 目 动 获得 键 副 焦点 ， 则 本 属性 值 为 true 。 
(FieldSet 和 Output 控 件 没有 实现 本 属性 。) 


boolean disabled 
如 果 当 前 表单 控件 禁用 则 为 true。 禁 用 的 控件 不 会 啊 应 用 户 的 输入 ， 


也 不 会 参与 表单 验证 。 (Output 元 素 没有 实现 这 个 属性 ，FieldSet 元 素 
使 用 它 来 禁用 其 包含 的 所 有 控件 。) 


readonly Form form 


引用 拥有 当前 控件 的 Form， 如 条 没有 对 应 的 表单 则 为 null。 如 采 一 个 控 
件 包含 在 一 个 <form> 元 素 中 ， 束 说 该 form 拥 有 这 个 元 素 。 否 则 ， 如 
果 控 件 有 一 个 HTML form 属 性 ， 并 指定 某 个 <form > 的 ID， 则 那个 指 
定 的 表单 号 古本 控件 的 拥有 着。 


readonly NodeList labels 


与 当前 控件 相关 的 所 有 Label 元 素 组 成 的 一 个 类 数组 对 象 。 (FieldSet 挥 
件 没 有 实现 这 个 属性 。) 


string name 


当前 控件 的 HTML name 属 性 的 值 。 控 件 的 name 可 用 做 Form 元 素 的 属 
性 : 该 属性 的 值 就 是 这 个 控件 元 妙 。 提 交 表 单 时 也 会 用 到 控件 名 。 


string type 


对 <input>> 元 素 米 说 ，type 属 性 的 值 指定 元 素 的 类 型 ， 如 采 对 应 的 < 
input > 标签 没有 指定 type 属 性 则 为 "text"。 对 <button>、<<select> 以 
及 textarea 元 素来 说 ，type 分 别 为 "button"、"select-one" (或 "select- 
multiple"， 如 果 设 置 了 multiple 属 性 ) 以 及 "textarea"。 对 <<fieldset > 元 
素来 说 ，type 为 "fieldset"， 对 <output> 元 素来 说 type 为 "output" 。 


readonly string validationMessage 


如 琳 控 件 是 有 效 的 或 不 受 验 证 控制 ， 这 个 属性 将 为 空 字符 串 。 人 否则 ， 
这 个 属性 包含 一 个 说 明 为 什么 用 户 的 输入 无 效 的 本 地 化 字符 串 。 


readonly FormValidity validity 


这 个 属性 指 代 一 个 对 象 ， 该 对 象 指出 用 户 对 当前 控件 的 输入 是 否 为 有 
效 ， 以 及 如 果 无 效 的 话 为 什么 无 效 。 


string value 

每 个 表单 控件 都 有 一 个 字符 串 值 value， 将 用 于 提交 表单 。 对 文本 输入 
控件 而 言 ， 这 个 值 即 是 用 户 的 输入 。 对 按钮 而 言 ， 这 个 值 就 是 对 应 的 
HTML value 属 性 。 对 output 元 素 而 言 ， 这 个 属性 类 似 于 目 Node 继 承 的 
textContent 属 性 。Fieldset 元 素 没有 这 个 属性 。 

readonly boolean willValidate 

如 果 当 前 控件 参与 表单 验证 则 本 属性 为 tue， 奉 则 为 false 。 
事件 处 理 程序 


表单 控件 定义 了 下 面 这 些 事 件 处 理 程序 属性 。 也 可 以 通过 所 有 
Element() 都 实现 的 EventTarget() 方 法 来 注册 事件 处 理 程序 。 


事件 处 理 程序 。 触发 条 件 

onformchange 。。” 当 在 表单 内 的 任何 一 个 控件 上 触发 一 个 change 事 件 时 ， 表 单 将 对 它 的 
所 有 控件 广播 一 个 不 冒 泡 的 formchange 事 件 。 控 件 可 以 使 用 这 个 处 理 
程序 属性 来 检测 它们 的 兄弟 控件 上 的 变化 

onforminput 当 在 表单 内 的 任何 一 个 控件 上 触发 一 个 input 事 件 时 ， 表 单 将 对 它 的 所 
有 控件 广播 一 个 不 冒 泡 的 forminput 事 件 。 控 件 可 以 使 用 这 个 处 理 程序 
属性 来 检测 它们 的 兄弟 控件 上 的 变化 

Oninvalid 如 果 一 个 表单 控件 没有 通过 验证 ， 一 个 invalid 事 件 将 在 它 上 面 触发 。 
这 个 事件 不 会 冒 泡 ， 如 果 它 被 取消 ， 浏 览 器 将 不 会 为 这 个 控件 显示 错 
误 消 息 


广 
boolean checkValidity() 


如 果 控 件 有 效 〈 或 者 它 不 参与 验证 ) 则 返回 true。 人 否则 ， 本 方法 将 在 对 
应 控件 上 触发 一 个 invalid 事 件 并 返回 false。 


void setCustom Validity(string error) 


如 果 error 是 一 个 非 空 字符 串 ， 本 方法 将 把 该 控件 标记 为 无 效 ， 并 将 在 
向 用 户 报 告 该 元 素 的 无 效 性 时 将 error 作 为 本 地 化 消息 显示 。 如 果 error 是 
I 之 前 设置 的 error 字 符 串 将 删除 ， 同 时 该 控件 将 认为 是 有 歼 


FormData 
一 次 HTTP mutilpart/form-data 请 求 体 的 内 容 


FormData 类 型 是 XML Http Request Level 2(XHR 2) 的 一 个 特性 ， 该 特性 
让 使 用 XMLHttpRequest 实 现 multipart/form-data 编 码 的 HTTP PUT 请 求 更 


简单 。 如 有 果 想 在 一 个 请 求 中 上 传 多 个 File 对 象 ， 还 需要 复合 编码 


(multipart encoding) 。 


使 用 构造 画 数 创建 一 个 FormData 对 象 ， 然 后 使 用 append0 方 法 来 为 它 添 
加 名 / 值 对 。 在 添加 完 所 有 的 请 求 内 容 后 ， 束 可 以 将 该 FormData 传 入 一 
个 XMLHttpRequest 的 send() 方 法 。 

构造 函数 

new FormDatal() 

这 个 无 参数 的 构造 函数 返回 一 个 空 FormData 对 象 。 

方法 

void append(string name,any value) 


这 个 方法 添加 指定 name 及 value 的 内 容 到 FormData 中 。 人 参数 value 可 以 是 
一 个 字符 串 或 者 一 个 Blob 〈 别 忘 了 File 对 象 也 是 Blob) 。 


FormValidity 

表 蛙 控件 的 有 效 性 

FormControl 的 jvalidity 属 性 指 代 一 个 FormValidity 对 象 ， 该 对 象 是 对 应 控 
件 的 有 效 状 态 的 一 个 实时 表示 。 如 果 valid 属 性 为 false， 表 明 对 应 挥 件 
无 效 ， 此 时 应 该 至 少 有 一 个 别 的 属性 为 ture 来 指出 验证 错误 (一 个 或 多 
个 ) 的 性 质 。 

Form 验 证 是 一 个 HTML5 特 性 ， 在 写作 本 书 的 时 候 还 没有 广泛 实现 。 
属性 


readonly boolean customError 


一 段 脚 本 在 当前 元 素 上 调用 FormControl.setCustomValidity() 。 


readonly boolean patternMismatch 


输入 与 pattem 正 则 表达 式 不 匹配 。 
readonly boolean rangeOverfow 
输入 太 大 了 。 

readonly boolean rangeUnderfow 
输入 太 小 了 。 

readonly boolean stepMismatch 
输入 与 指定 step 不 匹配 。 
readonly boolean tooLong 
输入 太 长 了 。 

readonly boolean typeMismatch 
输入 类 型 有 误 。 

readonly boolean valid 


如 膝 本 属性 为 rue， 则 对 应 表单 控件 是 有 效 的 ， 其 他 属性 都 将 为 false。 
如 膝 本 属性 为 false， 则 对 应 表单 控件 无 效 ， 其 他 属性 至 少 有 一 个 为 


true ° 


readonly boolean valueMissing 
必 填 的 表单 元 聚 为 空 。 

Geocoordinates 

地 理 位 置 

本 类 型 的 对 象 表示 地 球 表面 的 一 个 位 置 。 
属性 


readonly double accuracy 

纬度 (latitude) 与 经 度 (longitude) 值 的 精确 度 ， 单 位 为 米 。 
readonly double altitude 

海拔 高 度 ， 单 位 为 米 ， 如 果 不 可 用 则 为 null。 

readonly double altitudeAccuracy 


高 度 (altitude) 属性 的 精确 度 ， 单 位 为 米 。 如 果 altitude 为 nul， 则 
altitudeAccuracy 也 为 null。 


readonly double heading 


用 户 前 进 的 方向 ， 从 正 北 开始 顺 时 针 方 向 的 角度 ， 如 果 朝 向 不 可 用 则 
为 n ull。 如 有 果 袁 同 信 息 可 用 但 速度 为 0， 则 heading 值 将 为 NaN 。 


readonly double latitude 

用 户 相 对 于 赤道 以 北 的 纬度 ， 十 进 制 度数 制 。 

readonly double longitude 

用 户 相 对 于 格林 尼 治 子午 线 以 东 的 经 度 ， 十 进 制 度数 制 。 
readonly double speed 


用 户 的 速度 ， 单 位 为 米 每 秒 ， 如 果 速 度 信息 不 可 用 则 为 nul 1。 这 个 属性 
永远 不 会 为 负数 值 。 可 参见 heading 。 


Geolocation 
取得 用 户 的 纬度 和 经 度 
Geolocation 对 象 定义 了 确定 用 户 精确 地 理 位 置 的 方法 。 在 支持 它 的 浏 


多 絮 中 ，Geolocation 对 象 可 以 通过 访问 navigator.geolocation 形 式 的 
Navigator 对 象 来 访问 。 这 儿 描 述 的 方法 依赖 一 些 其 他 类 型 : 位 置信 息 


以 Geoposition 对 象 的 形式 报告 ， 错 误 以 GeolocationError 对 象 的 形式 报 
o 


方法 
void clearWatch(long watchId) 


停止 监视 用 户 的 位 置 。 人 参数 watchId 的 值 必须 是 对 应 的 watchPosition() 方 
法 的 返回 值 。 


void getCurrentPosition(function success,[function error],[object options]) 使 
用 任何 指定 的 options (参见 下 面 的 option 的 属性 列表 ) 来 异步 地 确定 用 
户 的 位 置 。 这 个 方法 会 立刻 返回 ， 当 用 户 的 位 置 可 用 时 ， 它 将 传 入 一 
个 Geoposition 对 象 到 指定 的 success 回 调 方 法 success 中 。 如 果 发 生 了 错 
误 (可 能 用 户 不 允许 共享 他 的 地 理 信息 ) ， 并 且 定义 了 error 回 调 方 法 
error， 它 将 传 入 一 个 GeolocationError 对 象 到 错误 回调 方法 中 。 


long watchPosition(function Success,[function error],[object options]) 


这 个 方法 类 似 于 getCurrentPosition()， 但 在 确定 用 户 当 前 位 置 之 后 ， 它 
会 继续 监视 用 户 的 位 置 并 在 每 次 发 现 位 置 明显 改变 后 调用 success 回 调 
函数 。 本 方法 的 返回 值 是 一 个 数字 ， 可 将 这 个 数字 传 入 clearWatch() 来 
停止 追踪 用 户 的 位 置 。 


选项 


传 入 getCurrentPosition() 或 watchPosition() 的 参数 option 是 一 个 常规 的 
JavaScript 对 象 ， 带 有 零 个 或 多 个 下 列 属性 : 


boolean enableHighAccuracy 
这 个 选项 提示 需要 一 个 高 精确 度 的 位 置 ， 即 使 这 需要 更 长 时 间 来 确定 
或 者 需要 使 用 更 多 的 电池 功率 。 默 认为 false。 在 文 持 通过 Wi-Fi 信 和 号 或 


GPS 确定 位 置 的 设备 上 ， 将 这 个 选项 设置 为 tue 一 般 意 味 着 “使 用 
GPS”。 


long maximumAge 


这 个 选项 指定 传 入 successCallback 的 第 一 个 Geoposition 对 象 可 接受 的 最 
长 生存 时 间 〈 单 位 为 这 秒 ) 。 默 认为 0， 和 意思 是 每 次 调用 
getCurrentPosition() 或 watchPosition() 将 请 求 一 次 新 的 位 置 修正 。 比 如 ， 
如 果 将 这 个 选项 设置 为 60 000， 将 允许 返回 任意 一 个 在 最 近 一 分 钟 内 确 
定 的 Geoposition 。 


long timeout 


这 个 选项 指定 了 请 求 者 愿意 等 待 一 次 位 置 修正 的 时 间 ， 单 位 为 怠 秒 。 
默认 值 为 Infinity 。 如 果 过 去 的 时 间 超过 timeout 毫 秘 ， 则 会 调用 
errorCallback。 注 意 ， 询 问 用 户 是 否 同意 共享 位 置信 息 的 时 间 不 算 在 
timeout 值 内 。 


GeolocationError 
查询 用 户 位 置 时 出 现 的 错误 


如 果 确 定 用 户 位 置 的 答 试 失败 了 ， 错 误 回 调 函 数 将 通过 一 个 描述 错误 
原因 的 GeolocationError 对 象 调用 。 


常量 
这 些 常量 是 code 属 性 可 能 的 值 : 

unsigned short PERMISSION_DENIED=1 

用 户 不 允许 共享 他 或 她 的 位 置信 息 。 

unsigned short POSITION_UNAVAILABLE=2 

ee 位 置 不 能 确定 。 例 如 ， 这 可 能 是 由 于 网 络 错误 等 引 


unsigned short TIMEOUT=3 


入 Wl 时 间 内 (参见 Geolocation 中 描述 的 timeout 选 项 ) 不 能 确定 位 


属性 


readonly unsigned short code 
这 个 属性 的 值 可 能 为 上 面 3 个 值 之 一 。 
readonly string message 


天 于 错误 的 更 多 信息 的 消 轧 。 这 条 消 思 有 助 于 调试 ， 但 不 适合 同 最 终 
用 户 显 示 。 


Geoposition 

时 间 惟 位置 报告 

Geoposition 对 象 表 示 指 定时 间 的 用 户 的 地 理 信息 。 这 类 对 象 只 有 两 个 
人 一 个 时 间 惟 和 一 个 保存 了 实际 位 置 属性 的 Geocoordinates 对 象 的 
属性 

readonly Geocoordinates coords 


这 个 属性 引用 一 个 Geocoordinates 对 象 ， 该 对 象 的 属性 指定 用 户 的 纬 
度 、 经 度 等 信息 。 


readonly unsigned long timestamp 


这 些 坐 标 有 效 的 时 刻 ， 形 式 为 纪元 开始 后 的 毫秒 数 。 如 果 需 要 ， 可 以 
使 用 这 个 值 来 创建 一 个 Date 对 象 。 


HashChangeEvent 

hashchange 事 件 的 event 对 象 

Event 

当 文 档 URL 的 片断 标识 符 (URL 中 以 蛤 希 标识 “#” 开 始 的 部 分 发 生变 
化 时 ， 浏 览 器 将 触发 一 个 hashchange 事 件 。 这 可 能 是 因为 一 个 脚本 改变 


了 Location 对 象 的 hash 属 性 ， 也 可 能 是 因为 用 户 使 用 了 浏览 器 的 “ 返 
回 ”* 或 < 前进” 按钮 在 浏览 器 的 历史 中 罕 行 。 这 两 种 情况 都 会 触发 一 个 


hashchange 事 件 。 对 应 的 事件 对 象 是 HashChangeEvent。 关 于 
location.hash 的 历史 管理 以 及 hashchange 事 件 的 更 多 信息 请 参考 22.2T。 


属性 


readonly string newURL 


这 个 属性 保存 location.href 的 新 值 。 注 意 这 是 完整 的 UREL， 而 不 仅仅 是 
它 的 hash 部 分 。 


readonly string oldURL 
这 个 属性 保存 location.href 的 老 值 。 


History 
窗口 的 浏览 历史 


History 对 象 表示 窗口 的 浏览 历史 。 但 是 ， 由 于 隐私 原因 ， 它 不 允许 脚 
本 读 取 曾经 访问 过 的 真实 的 URL 。 History 对 象 的 方 法 允许 脚本 将 窗口 
在 浏览 历史 中 辐 前 或 癌 后 移动 ， 也 可 以 添加 新 的 条 目 到 浏览 历史 中 。 


属性 
readonly long length 


这 个 属性 指明 浏览 器 历史 列表 中 的 条 目 数 目 。 由 于 无 法 知道 当前 显示 
ee 因此 知道 这 个 列表 的 大 小 没什么 特别 的 
方法 

void back() 

back0 方 法 将 让 当前 History 对 象 所 属 的 窗口 或 框架 页 面 重新 访问 在 当前 


URL 之 前 刚 访问 过 的 URL (如 果 存 在 的 话 ) 。 调 用 这 个 方法 效果 等 同 
于 单 击 浏览 器 的 “后 退 ” 按 钮 。 也 等 同 于 : 


history.go(-1); 


void forward() 


forward() 方 法 将 让 当前 History 对 象 所 属 的 窗口 或 框架 页 面 重 新 访问 在 当 
前 URL 之 后 紧 接 着 访问 过 的 URL (如 果 存 在 的 话 ) 。 调 用 这 个 方法 效 
果 等 同 于 单 击 浏览 右 的 “前 进 ” 按 钮 。 也 等 同 于 : 


history.go(1); 


void go([long delta]) 


History.g00) 方 法 需要 一 个 整数 参数 ， 将 引发 浏览 器 访问 由 History 对 象 维 
护 的 浏 贤 器 历史 中 的 距 当 前 位 置 指定 数目 位 置 的 URL。 如果 参数 为 正 
数 ， 则 浏 蜗 器 沿 着 列表 癌 前 移动 ， 如 果 为 负数 则 同 后 移动 。 世 惑 是 

说 ， 调 用 history.go(-1) 等 同 于 调用 history.back()， 也 与 单 击 “ 后 退 ”* 按 钮 效 
J 。 如果 参数 为 0 或 者 没有 参数 ， 这 个 方法 将 重新 加 载 当 前 显示 的 


void pushState(any data,string title,[string url]) 


这 个 方法 添加 一 个 新 的 条 目 到 窗口 的 浏览 历史 中 ， 保 存 一 个 由 data 以 及 
指定 的 tite 和 un 组 成 的 结构 化 副本 〈 参 见 22.2 节 的 “结构 性 复制 >” 。 如 
采用 户 玉 些 使 用 浏 硕 融 的 历史 导航 机 制 回 到 这 个 保存 的 状态 ， 一 个 
popstate 事 件 将 在 当前 窗口 上 触发 ， 对 应 的 PopStateEvent 对 象 将 在 它 的 
state 属 性 中 维护 data 的 男 一 个 副本 。 


参数 title 提 供 当前 状态 的 名 字 ， 浏 览 器 可 能 会 在 它 的 历史 UI 中 显示 这 个 
名 字 。 (在 写作 本 书 的 时 候 ， 浏 览 器 忽略 这 个 参数 ) 。 如 果 指 定 参数 
url， 它 将 显示 在 地 址 栏 中 ， 并 且 当 前 状态 将 可 永久 保存 并 可 保存 为 书 
签 或 与 他 人 分 享 。unl 是 相对 于 当前 文档 的 地 址 解析 。 如 果 u 是 一 个 绝 
对 URL， 它 必须 与 当前 文档 同 源 。 使 用 URL 的 一 个 通用 方法 是 只 使 用 
以 of" 开 头 的 片段 标识 符 。 


void replaceState(any data,string title, [string url]) 


这 个 方法 类 似 于 pushState()， 不 同 之 外 是 它 不 是 在 窗口 的 浏览 历史 中 创 
建 一 个 新 的 条 日， 而 是 将 当前 条 目 用 新 的 状态 data、title 以 及 unl 更 新 。 


HTMLCollection 
可 用 键 和 名 或 数字 访问 的 元 素 集 合 


HTMLCollection 是 一 个 由 Element 对 象 组 成 的 只 读 的 类 数组 对 象 ， 它 也 
定义 了 与 集合 的 元 素 的 name 及 id 值 对 应 的 属性 。Document 对 象 定 义 了 
如 forms 和 image 等 HTMLCollection 属 性 。 


HTMLCollection 对 和 象 定义 了 item() 和 namedItem() 方 法 ， 用 于 根据 位 置 或 
名 字 检 索 元 素 ， 不 过 几乎 没有 使 用 它们 的 必要 : 可 以 简单 地 将 
HTMLCollection 当 做 JavaScript 对 象 处 理 并 访问 它 的 属性 及 数组 元 到 。 
比如 : 


document .images[0]//HTMLCollection 中 一 个 编号 的 元 素 


document .forms.address//HTMLCollection 中 一 个 命名 的 元 素 


属性 

readonly unsigned long length 
当前 集合 中 的 元 素数 目 。 

方法 

Element item(unsigned long index) 


返回 集合 中 索引 为 Index 的 元 素 ， 如 果 index 出 界 了 则 返回 null。 也 可 以 
向 持 地 用 在 数组 方 插 号 中 指定 位 置 的 方式 来 代 巷 显 式 地 调用 这 个 方 


法 。 


object namedItem(string name) 


从 集合 中 返回 第 一 个 id 或 name 属 性 值 为 参数 name 的 元 素 ， 如 采 不 存在 
对 应 元 素 则 返回 null。 也 可 以 通过 在 数组 方 括号 中 指定 元 系 名 的 方式 来 
代 奉 显 式 地 调用 这 个 方法 。 


HTMLDocument 


参见 Document 

HTMLElement 

参见 Element 

HTMLFormControlsCollection 

表单 控件 的 一 个 类 数组 对 象 

HTMLEFormControlsCollection 是 一 种 特殊 的 HTMLCollection， 用 于 Form 

元 素 表 示 表 单 控 件 的 集合 。 类 似 于 HTMLCollection， 可 以 像 数 组 一 样 

使 用 数字 作为 它 的 索引 ， 也 可 以 将 它 看 做 一 个 对 象 并 通过 表单 控件 的 

name 或 id 进行 检索 。HTML 表 单 经 销 包 含 多 个 name 属 性 值 相同 的 控件 
(通常 是 单 选 按钮 或 复 选 框 ) ，HTMLFormControlsCollection 处 理 它们 

的 方式 与 普通 的 HIMLCollection 不 同 。 


读 取 HTMLFormControlsCollection 的 属性 时 ， 如 果 表 单 包 售 多 个 同名 的 
元 素 ，HTMLEFormControlsCollection 返 回 一 个 包含 共享 这 个 名 字 的 所 有 
表单 控件 组 成 的 类 数组 对 象 。 另 外 ， 返 回 的 类 数组 对 象 有 一 个 value 属 
性 ， 值 为 第 一 个 选中 的 叫 这 个 名 字 的 单 选 按钮 的 value 属 性 值 。 甚 至 还 
可 以 通过 设置 这 个 value 属 性 来 选中 对 应 value 的 单 选 按钮 。 


HTMLOptionsCollection 
Option 元 素 的 集合 


HTMLCollection 


HTMLOptionsCollection 是 一 种 特殊 的 HIMLCollection ， 表 示 一 个 Select 
元 素 中 的 Option 元 素 。 它 重 写 了 namedItem() 方 法 以 便 处 理 同 名 的 多 个 
Option 元 素 ， 它 也 定义 了 添加 和 删除 元 素 的 方法 。 由 于 历史 原因 ， 


HTMLOptionsCollection 定 义 了 一 个 可 写 的 length 属 性 ， 可 通过 设置 这 个 
属性 来 截 短 或 扩展 对 应 的 集合 。 


属性 

unsigned long length 

这 个 属性 返回 集合 中 的 元 素 的 数目 。 然 而 ， 与 常规 HTMLCollection 的 
length 属 性 不 同 的 是 ， 它 不 是 只 读 的 。 如 末 将 它 设置 为 一 个 比 当 前 值 小 
的 数字 ，Option 元 素 的 集合 将 被 截 短 ， 不 在 集合 中 的 元 素 将 从 包含 的 


Select 元 素 中 移 除 。 如 果 将 length 设 置 为 一 个 比 当前 值 大 的 数字 ， 衬 < 
option/> 元 素 将 被 创建 并 添加 到 Select 元 素 以 及 对 应 的 集合 


long selectedIndex 


集合 中 第 一 个 被 选中 的 Option 的 索引 ， 如 采 没 有 Option 家 选中 则 为 -1。 
可 以 通过 设置 这 个 属性 来 改变 选中 的 元 素 。 


方法 
void add(Element option,[any before]) 


将 option (必须 是 一 个 <option > 或 者 < optgroup > 元素 ) 插入 到 当前 集 
合 (以 及 当前 Select 元 素 ) 中 before 指 定 的 位 置 处 。 如 果 before 为 null， 
将 插入 到 尾部 。 如 果 before 是 一 个 整数 索引 ， 将 插入 到 这 个 索引 指定 的 
元 素 的 前 面 。 如 果 before 是 另 一 个 Element，option 将 被 插入 到 这 个 元 素 
前 面 。 


Element item(unsigned long index) 


HTMLOptionsCollection 从 HTMLCollection 那 儿 继 承 了 这 个 方法 。 它 将 
返回 指定 index 处 的 元 素 ， 如 果 index 出 界 了 则 返回 null。 也 可 以 用 直接 
使 用 方 括号 检索 集合 的 方式 代替 显示 调用 这 个 方法 。 


object namedItem(string name) 


这 个 方法 返回 集合 中 具有 指定 名 字 或 ID 的 所 有 Option 元 素 。 如 果 没有 匹 
配 元 素 ， 它 将 返回 null。 如 琳 有 一 个 Option 匹 配 ， 它 将 返回 这 个 元 素 。 
如 膝 有 多 个 元 系 匹 配 ， 它 将 返回 由 这 些 元 素 组 成 的 一 个 NodeList。 注 


意 ， 可 以 通过 使 用 name 作 为 属性 名 的 方式 直接 检索 一 个 
HTMLOptionsCollection 而 无 须 显 式 调用 这 个 方法 。 


void remove(long index) 


个 方法 移 除 集合 中 位 于 指定 index 处 的 <option > 元 素 。 如 果 调 用 时 没 
参数 或 者 参数 越界 了 ， 它 可 能 会 移 除 集合 中 的 第 一 个 元 素 。 


IFrame 
HTML < iframe > 


Node、Element 


IFrame 对 象 表示 HTML 文档 中 的 一 个 <iframe> 元 素 。 如 果 使 用 
getElementById0 或 关羽 的 查 询 画 数 来 坦 找 一 个 <ifame> ， 将 得 到 一 个 
IFrame 对 象 。 但 是 ， 如 果 通 过 Window 对 象 的 frames 属 性 来 查 找 <iframe 
> ， 或 者 将 < Ti 的 name 作 为 包含 的 窗口 的 属性 来 查找 ， 得 到 的 将 
是 该 <iframe > 代表 的 Window 对 象 。 


属性 


readonly Document contentDocument 


当前 <ifame> 元 素 包 含 的 文档 。 如 果 <iframe> 中 显示 的 文档 来 目 不 
同 的 源 ， 同 源 策略 ( 见 13.6.2 节 ) 将 会 阻止 对 该 文档 的 访问 。 


readonly Window contentWindow 


<iframe> 的 Window 对 象 。 (这 个 Window 对 象 的 frameElement 义 反问 
引用 这 个 IFrame 对 象 。) 


string height 


当前 <iframe> 的 高 度 ， 单 位 为 CSS 像 素 。 这 个 属性 反映 对 应 的 HTML 
height 属 性 


string name 


<iframe> 的 名 字 。 这 个 属性 反映 对 应 的 HTML name 属 性 ， 它 的 值 可 用 
于 Link 或 Form 对 象 的 target 。 


readonly DOMSettableTokenList sandbox 


本 属性 反映 HTML5 sandbox 必 性， 允许 将 它 作为 一 个 字符 串 或 者 一 组 
独立 标记 来 查询 及 设置 。 


sandbox 属 性 指明 浏览 絮 应 该 对 <iframe> 中 的 不 可 信 的 内 容 实施 额外 

的 安全 限制 。 如 果 指 定 了 sandbox 但 值 为 空 ，<iframe> 的 内 容 将 当做 

来 自 不 同 的 源 进 行 处 理 ， 将 不 允许 运行 脚本 ， 不 允许 显示 表单 ， 也 不 

允许 改变 它 包 含 的 窗口 的 地 址 。sandbox 属 性 也 可 以 设置 为 一 个 由 空格 
分 隔 的 标记 列表 ， 其 中 每 一 项 都 指定 一 个 额外 的 安全 限制 。 可 用 的 标 

记 有 "allow-same-origin"、"allow-scripts"、"allow-forms" 以 及 "allow-top- 
navigation”" ° 


写作 本 书 的 时 候 ，sandbox 必 性 还 没有 广泛 实现 。 更 多 细节 请 参考 
HTML 文 档 。 


boolean seamless 


这 个 属性 反映 HTML 的 seamless 必 性。 如 果 它 的 值 为 tue， 浏 贤 器 将 演 
染 对 应 <iframe> 的 内 容 ， 让 它 看 起 来 像 是 包含 的 文档 的 一 部 分 。 这 意 
味 着 ， 某 种 程度 上 ， 浏 览 器 必须 将 包含 的 文档 的 CSS 样 式 应 用 到 < 
iframe> 的 内 容 上 。 


seamless 属 性 作为 HIML5 的 一 部 分 引入 ， 在 写作 本 书 的 时 候 还 没有 广 
泛 实 现 。 


string src 
这 个 属性 反映 <iframe> 的 src 属 性 ， 它 指定 该 框架 内 容 的 URL 。 
string srcdoc 


这 个 属性 反映 对 应 的 srcdoc HTML 属 性 ， 它 以 一 个 字符 串 的 形式 指定 < 
iframe> 的 内 容 。srcdoc 属 性 最 近 才 作为 HTML5 的 一 部 分 引入 ， 在 写作 
本 书 的 时 候 还 没有 广泛 实现 。 


string width 


当前 <iframe> 的 宽度 ， 单 位 为 CSS 像 素 。 这 个 属性 反映 对 应 的 HTML 
width 属性 。 


Image 
HTML 文 档 中 的 <img> 
广 态 、 元 素 


Image 对 象 以 <img > 标签 的 形式 ， 代 表 藤 入 HTML 文 档 中 的 一 幅 图 
片 。 出 现在 文档 中 的 图 片 都 被 收集 在 document.images[] 数 组 中 。 


Image 对 象 的 src 属 性 是 最 有 趣 的 一 个 。 如 果 设 置 了 这 个 属性 ， 浏 贤 圳 将 
加 载 并 显示 新 的 值 指定 的 图 片 。 可 以 利用 这 个 特性 实现 一 些 可 视 化 效 
果 ， 比 如 图 片 翻转 以 及 动画 。 示 例 请 参见 21.1 休 。 


可 以 通过 简单 地 使 用 document.createElementO 或 Inage0 构 造 函 数 创建 一 
个 新 的 <img> 元 素来 创建 一 个 屏幕 外 Image 对 象 。 注 意 ， 这 个 构造 函 
数 没 有 用 于 指明 要 加 载 的 图 片 的 参数 : 要 加 载 图 片 ， 只 须 简 单 地 设置 
对 应 的 Image 对 象 的 src 属 性 。 要 实际 显示 这 张 图 片 ， 只 须 将 该 Image 对 
象 插 入 到 文档 中 。 


构造 玉 数 

new Image([unsigned long width,unsigned long height]) 

可 以 通过 document.createElement( 方 法 ， 像 创建 其 他 HTML 元 素 一 样 创 
建 一 个 新 的 Image 元 素 。 不 过 ， 由 于 历史 原因 ， 客 户 端 JavaScript 也 定义 
了 Image0 构 造 男 数 用 于 完成 同样 的 任务 。 如 采 指 定 了 width 或 height 参 
数 ， 它 们 将 为 对 应 <img > 标签 的 width 和 height 属 性 。 

属性 


除了 这 儿 列 出 的 属性 ，Image 元 素 也 有 下 面 的 HTML 属 性 ， 可 作为 
JavaScript 属 性 访问 : 


alt 、 usemap 、ismap. 


readonly boolean complete 


如 琳 没 有 指定 图 片 的 srce， 或 者 图 片 已 经 完全 下 载 完成 ， 则 此 属性 为 


true; 否则 为 false。 


unsigned long height 
图 片 在 屏幕 上 显示 的 高 度 ， 单 位 为 CSS 像 素 。 设 置 这 个 值 将 改变 图 片 的 
同上 肥 。 


readonly unsigned long naturalHeight 
图 片 的 固有 高 度 。 

readonly unsigned long natural Width 
图 片 的 固有 宽度。 

string src 


图 片 的 URL。 设 置 这 个 属性 将 会 下 载 指定 的 图 片 。 如 果 Image 对 象 已 插 
入 到 文档 中 了 ， 则 新 的 图 片 将 会 显示 。 


unsigned long width 


图 片 在 屏幕 上 显示 的 实际 宽度 ， 单 位 为 CSS 像 素 。 设 置 这 个 值 将 改变 图 
片 在 屏幕 上 的 宽度 。 


ImageData 
<canvas > 的 像素 数据 数组 


ImageData 对 象 保存 一 块 矩 形 区 域 的 像素 的 红 、 绿 、 监 以 及 alpha 〈 透 明 
度 ) 分 量 。 可 通过 < canvas > 标签 的 CanvasRenderingContext2D 对 象 的 
createImageData() 或 者 getImageData() 方 法 来 得 到 一 个 ImageData 对 象 。 


width 和 height 属 性 指定 像素 矩形 区 域 的 矿 寸 。data 属 性 是 一 个 包含 对 应 
像素 数据 的 数组 。data[] 数 组 中 的 像素 以 从 左 到 右 、 从 上 到 下 的 顺序 出 
现 。 每 一 个 像素 由 4 个 子 广 值 组 成 ,分 别 表示 R、G、B 及 A 分 量 。 也 整 


是 说 ， 在 一 个 ImageData 对 和 象 中 ， 位 于 (xy) 处 的 像素 的 颜色 组 成 可 以 以 
类 似 这 样 的 方式 访问 : 


Var offset=(x+t+y*image.width)*4; 
var red=image.data[offset]; 

var green=image.data[offset+1]; 
var blue=image.data[offset+2]; 


var alpha=image.data[offset+3]; 


data[] 数 组 不 是 一 个 真正 的 JavaScript 数 组 ， 它 是 一 个 优化 过 的 类 数组 对 
象 ， 其 元 素 的 值 为 0~255 之 间 的 整数 。 元 素 站 村 读 写 的 ”但 儿 组 的 长 
度 是 固定 的 。 对 任意 一 个 ImageData 对 和 象 i 来 说 ，i.data.length 总 是 等 
i.width*i.height*4 ° 


属性 


readonly byte[jdata 

一 个 只 读 的 引用 ， 指 代 一 个 元 素 为 字 节 的 可 读 写 的 类 数组 对 象 。 
readonly unsigned long height 

Image data 的 行 数 。 

readonly unsigned long width 

data 每 行 的 像 聚 数 。 

Input 

HTML<input> 元素 


Node、Element、FormControl 


Input 对 象 表示 HTML 表 单 中 的 <input> 元 素 。 它 的 外 观 和 行为 取决 于 
它 的 type 属 性 ， 比 如 ， 一 个 Input 元 素 可 能 表示 一 个 人 简单 的 文本 输入 框 、 
1) ed a 
input> 元 素 可 以 表示 如 此 多 种 表单 控件 ， 因 此 Input 元 系 是 最 复杂 的 元 
素 之 一 。 关 于 HTML 表 单 及 表单 元 素 的 概览 可 参见 15.9 节 。 注 意 Input 元 
素 的 一 些 重要 属性 (比如 type、value、name 以 及 form) 的 文档 在 
FormControl 参 考 页 中 。 


属性 
除了 这 儿 列 出 的 属性 ，Input 元 素 也 实现 了 Element 和 FormControl 定 义 的 


所 有 属性 。 这 个 列表 中 标 有 星 号 的 属性 是 HTML5 新 定义 的 ， 在 写作 本 
书 的 时 候 还 没有 广泛 实现 。 


string accept 
当 type 属 性 为 "fle" 时 ， 这 个 属性 是 一 个 以 逗号 分 隔 的 列表 ， 包 含 可 选择 


的 文件 的 MIME 类 型 。 字 符 串 "audio/*"、"video/x" 以 及 "image/*" 也 是 合 
法 的 值 。 这 个 属性 是 accept 属 性 的 一 个 映射 。 


string autocomplete 


如 宁 浏 斋 屡 可 以 根据 之 前 访问 会 话 的 值 预 填 这 个 mput 元 素 则 此 属性 为 
true。 肌 射 autocomplete 必 性。 也 可 参见 Form 的 autocomplete 属 性 。 


boolean checked 


运用 于 可 选中 的 input 元 系 ， 这 个 属性 指定 当前 元 素 征 合 “ 挝 中 ”。 设 置 
这 个 属性 的 值 将 改变 对 应 input 元 素 的 可 视 外 观 。 


boolean defaultChecked 

适用 于 可 选中 的 input 元 素 ， 这 个 属性 指定 元 素 初 始 状 态 时 的 选中 情 
况 。 当 表单 被 重 置 后 ， 该 元 素 的 checked 属 性 将 被 重 置 为 这 个 属性 的 
值 。 它 是 checked 属 性 的 映射 。 


string defaultValue 


适用 于 有 具有 文本 值 的 元 素 ， 这 个 属性 保存 元 素 显示 的 初始 值 。 当 表单 
被 重 置 时 ， 元 素 将 被 重 置 为 这 个 值 。 它 是 value 属 性 的 映射 。 


readonly File[jfles 


适用 于 type 为 "fle" 的 元 素 ， 这 个 属性 为 一 个 类 数组 对 象 ， 由 用 户 选 中 的 
File 对 象 或 其 他 对 象 组 成 。 


string formAction* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 action 属 
性 。 它 是 formaction 属 性 的 映射 。 


string formEnctype* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 窗 盖 包含 的 表单 的 enctype 
属性 。 它 是 formenctype 属 性 的 映射 。 


string form Method* 


| 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 method 
属性 。 它 是 formethod 属 性 的 上 映射。 


boolean formNoValidate* 


i 这 个 属性 定义 的 值 将 履 盖 包含 的 表单 的 
noValidate 属 性 。 它 是 formnovalidate 必 性 的 映射 。 


string formTarget* 


适用 于 提交 按钮 元 素 ， 这 个 属性 定义 的 值 将 禾 盖 包含 的 表单 的 target 属 
性 。 它 是 formtarget 属 性 的 映射 。 


boolean indeterminate 


适用 于 复 选 框 ， 这 个 属 性 指定 该 元 素 是 否 处 于 不 确定 状态 ( 即 个 是 乏 
中 也 不 是 未 选中 ) 。 这 个 属性 不 是 某 个 HTML 属 性 的 映射 ， 只 能 通过 
JavaScript 进 行 设置 。 


readonly Element list* 


一 个 <datalist> 元 素 ， 其 包含 的 <option> 元素 可 被 浏览 器 用 做 提示 或 
目 动 完成 值 。 


string max* 
当前 Input 元 素 允 许 的 最 大 有 效 值 。 
long maxLength 


如 条 type 为 "text" 或 "password"， 这 个 属性 将 指定 允许 用 户 输入 的 最 大 字 
符 数 。 注 意 它 与 size 属 性 不 一 样 。 它 是 maxlength 属 性 的 映射 。 


string min* 
当前 Input 元 素 人 允许 的 最 小 有 效 值 。 
boolean multiple* 


如 果 对 心 input 元 素 可 能 接受 指定 type 的 多 个 值 则 本 属性 为 true。 它 是 
multiple 属 性 的 映射 。 


string pattern* 


一 个 正则 表达 式 文 本 ， 输 入 的 内 容 必 须 与 它 匹 配 ， 否 则 将 被 视 为 无 
效 。 这 个 属性 使 用 JavaScript 正 则 表达 式 语 法 (但 没有 开头 和 结尾 的 斜 
杠 ) ， 不 过 要 注意 这 个 属性 是 一 个 字符 串 ， 而 不 是 一 个 RegExp 对 象 。 
也 要 注意 ， 为 了 有 效 起 见 ， 整 个 输入 字符 串 都 必须 与 正则 表达 式 匹 
配 ， 而 不 只 是 一 个 子囊。 《了 束 像 正则 表达 式 以 ^ 开 头 并 以 $ 结 尾 一 

样 。) 这 个 属性 是 pattern 属 性 的 映射 。 


string placeholder 


作为 对 用 户 的 提示 出 现在 Input 元 素 中 的 一 小 段 文本 字符 串 。 当 焦点 处 
于 该 元 隶 上 时 ， 占 位 文本 将 消失 ， 同 时 输入 光标 将 出 现 。 这 个 属性 是 
placeholder 属 性 的 映射 。 


boolean readOnly 


如 果 为 tue， 当 前 Input 元 素 将 不 可 编辑 。 它 是 readonly 属 性 的 映射 。 
boolean required* 


如 果 为 tue， 如 果 用 户 没有 在 该 Input 元 素 中 输入 内 容 ， 则 容器 表单 将 被 
视 为 无 效 。 它 是 required 属 性 的 映射 。 


readonly Option selectedOption* 


如 果 指 定 了 list 属 性 ， 并 且 multiple 为 false， 这 个 属性 将 返回 列表 中 选中 
的 Option 元 素 子 下 点 ， 如 有 条 存在 这 样 的 和 节点 的 话 。 


unsigned long selectionEnd 


返回 或 设置 选中 文本 之 后 的 第 一 个 输入 字符 的 索引 。 也 可 参见 


setSelectionRange()° 


unsigned long selectionStart 


返回 或 设置 <textarea> 中 第 一 个 选中 字符 的 索引 。 也 可 参见 
setSelectionRange()° 


unsigned long size 


适用 于 允许 文本 输入 的 Input 元 素 ， 本 属性 指定 了 元 素 的 宽度 占 多 少 字 
符 。 它 是 size 属 性 的 映射 。 注 意 与 maxLength 的 不 同 。 


string step* 

适用 于 数字 输入 类 型 (包括 日 期 及 时 间 输 入 ) ， 这 个 属性 指定 了 允许 
输入 的 值 的 粒度 或 步 长 大 小 。 这 个 属性 可 以 是 字符 串 "any" 或 者 一 个 浮 
点 数 。 它 是 step 属 性 的 映射 。 

Date valueAsDate* 

将 对 应 元 素 的 value (参见 FormControl) 作为 一 个 Date 对 象 返回 。 


double value AsNumber* 


将 对 应 元 素 的 value (参见 FormControl) 作为 一 个 数字 返回 。 


方法 


除了 这 儿 列 出 的 方法 ，Input 元 素 也 实现 了 Element 和 FormControl 所 定义 
的 所 有 方法 。 本 列表 中 带 有 星 号 标记 的 方法 是 在 HTML5 新 定义 的 ， 在 
写作 本 书 的 时 候 ， 还 没有 广泛 实现 。 


void select() 
这 个 方法 选中 当前 Input 元 素 中 显示 的 所 有 文本 。 在 大 多 数 浏 哆 癸 中 ， 


这 意味 着 对 应 文本 将 高 之 显示 ， 同 时 用 户 新 输入 的 文本 将 蔡 换 这 段 高 
腕 显示 的 文本 ， 而 不 是 在 它 后 面 奶 加。 


void setSelectionRange(unsigned long start,unsigned long end) 


这 个 方法 移 中 当前 Input 元 素 中 显示 的 文本 ， 从 位 于 start 处 的 字符 开始 ， 
直到 (但 不 包含 ) 位 于 end 处 的 字符 。 


void stepDown([long n])* 

适用 于 文 持 step 属 性 的 元 素 ， 将 当前 值 减少 n 个 步 长 (step) 

void stepUp([long n])* 

适用 于 文 持 step 属 性 的 元 素 ， 将 当前 值 增加 n 个 步 长 。 

jQuery 

jQuery 1.4 

jQuery 库 

描述 

这 是 jQuery 库 的 一 个 快速 参考 。 头 于 这 个 库 的 完整 细 广 以 及 用 例 见 第 19 
章 。 本 段 参考 的 组 织 与 格式 与 该 部 分 的 其 余 参 考 页 有 些 不 同 。 在 方法 
签名 中 它 使 用 了 下 面 的 转换 。 参 数 sel 是 jQuery 选择 器 。 参 数 idx 是 整数 
索引 。 人 参数 elt 或 elts 是 文档 元 系 或 由 文档 元 素 组 成 的 类 数组 对 象 。 人 参数 { 


是 回调 函数 ， 磐 套 的 圆 括号 用 于 声明 jQuery 将 传 入 提供 的 函数 的 参数 。 
方 括号 声明 可 选 参数 。 如 采 一 个 可 选 参数 后 面 紧 跟 着 一 个 等 号 和 一 个 


Ny 


值 ， 那 个 值 将 在 参数 省 略 时 作为 玲 认 值 。 右 圆 括号 和 冒号 之 后 是 函数 
2 法 的 返回 值 。 没 有 指定 返回 值 的 方法 将 返回 调用 它们 的 jQuery 对 


jQuery 工厂 函数 


jQuery 函数 是 若干 应 用 函数 的 一 个 命名 空间 ， 0. 
jQuery 对 象 的 工厂 方法 。 jQuery0 可 以 以 下 面 展示 的 各 种 方式 调用 | 
总 是 返回 一 个 表示 一 个 文档 集合 (或 者 文档 对 象 本 身 ) 
符号 $ 是 jQuery 的 别名 ， 在 下 面 的 各 种 方法 法 中 都 可 以 使 用 $0 来 代替 
jQueryO: 


jQuery(sel[,context=document]) 


返回 一 个 新 的 jQuery 对 象 ， 该 对 象 表示 的 文档 元 素 为 context 的 子 朱 市 
点 ， 并 且 匹 配 选 择 字符 串 sel 。 


jQuery(elts) 


返回 一 个 表示 指定 元 素 的 新 的 jQuery 对 象 。elts 可 以 是 单个 文档 元 素 ， 
也 可 以 是 一 个 由 文档 元 素 组 成 的 数组 或 类 数组 对 象 (比如 一 个 NodeList 
或 其 他 jQuery 对 象 ) 。 


jQuery(html,[props]) 


将 html 作 为 一 个 HTML 格 式 的 字符 串 进行 解析 并 返回 一 个 新 的 jQuery 对 
象 ， 这 个 对 象 包含 html 字 符 串 中 定义 的 一 个 或 多 个 顶级 元 素 。 如 果 html 
描述 了 一 个 单独 的 HIML 标 签 ， 则 参数 props 可 以 为 一 个 对 象 其 中 可 
定义 这 个 新 建 元 素 的 HTML 属 性 或 事件 处 理 程序 。 


jQuery(f) 


注册 函数 f， 当 document 加 载 完 成 并 且 了 吏 绪 时 调用 。 如 de 忆 经 
就 绪 ，{ 将 作为 document 对 象 的 一 个 方法 立即 调用 。 返 回 一 个 只 包含 
document 对 象 的 jQuery 对 象 。 


| 


jQuery 选择 絮语 法 


jQuery 选择 器 语法 与 CSS3 选 择 语 法 非 溃 类 似 ，19.8.1 节 有 详细 介绍 。 下 
面 是 摘要 : 


简单 的 标签 、 类 以 及 ID 选 择 絮 


- tagname .Classname #id 

组 合 选 择 般 
A B 8 是 A 的 子孙 节点 
A >B 8 是 A 的 子 节点 
A+B 8B 是 紧 跟 着 A 的 兄弟 节点 
A~B  B 是 A 的 兄弟 节点 

属性 过 滤器 

[attr] 具有 某 个 属性 


[attr=val] 具有 值 为 val 的 属性 

[attr!=val] 没有 值 为 val 的 属性 

[attr^=val] 属性 以 val 开 头 

[attr$=val] 属性 以 val 结 尾 

[attr*=val] 属性 包含 val 

[attr~=val] 属性 包含 单词 形式 的 val 
[attr|=val] 属性 以 val 及 一 个 可 选 的 连 字 符 开 始 


元 素 类 型 过 滤器 
:button :header :password :submit 
:Checkbox :image :Tadio :text 
:file :input :reset 


元 素 状 态 过 滤 嘴 


:animated :disabled 
:checked :enabled : 
选择 位 置 过 滤器 
:eq(n) ‘first 
:even :gt(n) 
文档 位 置 过 滤 需 
:first-child 
:last-child 
:only-child 
其 他 过 滤 履 
:contains(text) 
:empty 
:has(selector) 
基本 jQuery 方法 及 属性 


:hidden :visible 
:selected 


:last :nth(n) 
:ttn :odd 


:nth-child(n) 


:nth-child(even) 
:nth-child(odd) 
:nth-child(xn+y) 


:not (selector) 


:parent 


这 些 是 jQuery 对 象 的 基本 方法 和 属性 。 会 改变 选项 或 选中 的 元 
素 ， 只 是 允许 查询 或 交代 这 个 选中 元 素 的 集合 。 细 节 请 参见 19.1.2 订 。 


context 


进行 选择 的 上 下 文本 或 根 忆 点 
Document 对 象 。 


each(f(idx,elt)) 


是 $0 的 第 二 个 参数 ， 大 不 指定 则 是 


将 f 作 为 每 一 个 选中 元 素 的 方法 并 调用 一 次 。 如 果 该 琅 数 返回 false 则 停 
让 位 区 刁 沁 有 它 的 jQuery 对 象 。 


get(idx):elt 
get():array 


返回 jQuery 对 和 象 中 指定 索引 的 选中 元 素 。 也 可 以 使 用 常规 的 方 括号 数组 
索引 。 如 果 没 有 参数 ， 则 get0 和 toArray0 功 能 一 样 。 


index():int 

index(sel):int 

index(elt):int 

如 宁 不 市 参数 ， 则 返回 第 一 个 选中 的 元 素 在 它 的 兄弟 和 点 中 的 索引 。 
如 果 带 一 个 选择 絮 参 数 ， 运 回 正本 光泽 澡 咎 的 元 素 介 合 中 第 一 个 选中 
元 系 的 索引 ， 如 采 没 有 找到 对 应 元 素 则 返回 -1。 如 果 带 一 元 系 参 数 ， 
则 返回 elt 在 选中 元 素 中 的 索引 ， 如 果 没 有 找到 对 应 元 素 则 返回 -1 。 
is(sel):boolean 

如 果 至 少 有 一 个 选中 元 素 也 匹配 sel 则 返回 true 。 

length 

选中 元 素 的 数目 。 

map(f(idx,elt)):jQuery 


将 f 作 为 每 一 个 选中 元 素 的 方法 并 调用 一 次 ， 返 回 一 个 保存 返回 值 的 新 
0 0 略 ， 并 且 数 组 值 是 平整 


selector 
最 初 传 给 $() 的 选择 字符 串 。 


size():int 


返回 length 属 性 的 值 。 

toArray():array 

将 选中 元 素 作为 一 个 真实 的 数组 返回 。 

jQuery 选择 方法 

这 儿 描 述 的 方法 将 改变 选中 元 素 的 集合 ， 通 过 对 它们 的 过 滤 ， 可 能 会 
添加 新 的 元 素 ， 或 者 将 选中 元 素 作为 一 个 新 的 选择 的 起 点 。 在 jQuery 


1.4 及 之 后 的 版 本 中 ，jQuery 选 择 结果 总 是 按 文 档 中 的 顺序 排序 并 且 不 
包 侣 重复 元 素 。 参 见 19.8.2m。 


add(sel,[context]) 
add(elts) 

add(html) 

add() 的 参数 将 传 入 $()， 返 回 的 选择 结果 将 与 当前 选择 结果 合并 。 
andSelf() 

将 前 一 个 选中 的 元 素 集 合 (从 栈 中 ) 添加 到 当前 选择 结果 中 。 
children([sel]) 


选择 选中 元 素 的 子 万 点 。 如 有 条 不 指明 参数 则 选中 所 有 子 节 点 。 如 于 指 
明 一 个 选择 右 ， 则 只 选择 匹配 的 子 节 后 。 


closest(sel,[context]) 


选择 离 每 一 个 已 选择 元 素 最 近 的 信 先 元 素 ， 这 些 元 素 匹 配 sel 并 旦 是 
context 的 子孙 元 素 。 如 果 省 略 context， 将 会 使 用 对 应 的 jQuery 对 象 的 
context 属 性 。 


contents() 


选择 每 一 个 选中 元 素 的 全 部 子 节 点 ， 包 括 文 本 点 及 注释 。 


end() 
ee 并 将 选择 结果 重 置 为 最 后 一 次 产生 改变 的 选择 方法 之 前 


eq(idx) 


只 碗 择 已 克 中 元 素 中 指定 index 的 元 素 。 在 jQuery 1.4 中 ， 人 负数 系 引 将 从 
尾部 开始 计数 。 


filter(sel) 

filter(elts) 

filter(f(idx):boolean) 

过 滤 选 择 结 采 ， 让 它 只 包 售 也 匹配 选择 癸 sel 的 元 素 ， 或 者 只 包含 在 类 


数组 对 象 elts 中 的 元 素 ， 或 者 只 包含 将 断言 函数 f 作 为 元 素 的 方法 调用 时 
返回 true 的 元 素 。 


find(sel) 

选择 某 个 选中 元 素 的 所 有 匹配 sel 的 子孙 元 素 。 
first() 

只 选择 第 一 个 已 选中 的 元 和 聚 。 

has(sel) 

has(elt) 


过 滤 选 择 结 末 ， 让 它们 只 包含 这 些 选 中 元 素 : 它们 要 么 有 一 个 匹配 sel 
的 子孙 元 隶 ， 要 么 站 elt 的 祖先 元 素 。 


last() 
只 选择 最 后 一 个 选中 的 元 素 。 


next([sel]) 


选择 每 个 已 选中 元 陛 的 下 一 个 兄弟 节点 。 如 时 指定 了 sel， 将 排除 那些 
不 匹配 的 元 聚 。 


nextAll([sel]) 


选择 每 个 已 选中 元 系 后 面 的 所 有 兄弟 下 点。 如 采 指 定 了 sel， 将 排除 那 
些 不 匹配 的 元 素 。 


nextUntil(sel) 


选择 每 个 已 选中 元 素 后 面 的 所 有 兄弟 节点 ， 直 到 (但 不 包含 ) 第 一 个 
匹配 se@l 的 兄 第 节点 。 


not(sel) 

not(elts) 

not(f(idx):boolean) 

这 是 fter() 的 反方 法 。 它 过 滤 选 择 结果 ， 并 排除 匹配 sel 的 元 素 ， 或 者 包 
含 在 elts 中 的 元 素 ， 或 者 使 4 返回 true 的 元 素 。elts 可 以 是 一 个 单独 的 元 
素 ， 或 者 是 一 个 由 元 素 组 成 的 类 数组 对 象 。f 将 作为 每 一 个 选中 元 素 的 
方法 调用 。 

offsetParent() 

选择 距离 每 个 选中 元 素 位 置 最 近 的 祖先 元 素 。 

parent([sel]) 

选择 每 个 选中 元 素 的 父 元 素 。 如 果 指 定 了 sel， 将 排除 那些 不 匹配 的 元 


parents([sel]) 


0 0 。 如 采 指 定 了 sel， 将 排除 那些 不 匹配 的 
元 素 。 


parentsUntil(sel) 


选择 每 个 选中 元 素 的 祖先 元 素 ， 直 到 (但 不 包含 ) 第 一 个 匹配 sel 的 元 


prev([sel]) 


选择 每 个 选中 元 于 的 前 一 个 兄 币 元 素 。 如 来 指定 了 sel， 将 排除 那些 不 
匹配 的 元 杂 。 


prevAl([sel]) 


选择 每 个 选中 元 于 之 前 的 所 有 兄 第 元 素 。 如 琳 指 定 了 sel， 将 排除 那些 
不 匹配 的 元 聚 。 


prevUntil(sel) 


3 
元素。 


pushStack(elts) 


将 当前 选择 结果 压 入 栈 中 ， 以 便 之 后 可 以 使 用 end0) 方 法 还 原 它 ， 然 后 
选择 elts 数 组 (或 类 数组 对 象 ) 中 的 元 素 。 


siblings([sel]) 


选择 每 个 选中 元 聚 的 兄弟 万 点 ， 不 包含 该 元 素 目 己 。 如 采 指 定 了 sel， 
将 排除 所 有 不 亚 配 的 兄弟 节点 。 


slice(startidx, [endidx]) 


过 小 选择 结果 ， 使 它 只 包含 索引 大 于 等 于 startidx 并 小 于 (但 不 等 于 ) 
endidx 的 元 素 。 负 索引 将 从 选择 结果 的 尾部 开始 计数 。 如 果 省 略 
endidx， 将 使 用 length 属 性 。 


jQuery 元 素 方法 


这 儿 描 述 的 方法 用 于 查询 及 设置 元 素 的 HIML 属 性 和 CSS 样 式 必 性 。 春 
有 名 为 current 的 参数 的 setter 回 调 函 数 将 被 传 入 它 正在 计算 新 值 的 任何 
对 象 的 当前 值 。 参 见 19.2 节 。 


addClass(names) 


addClass(f(idx,current):names) 


添加 指定 的 一 个 或 多 个 CSS 类 名 到 每 一 个 选中 元 陛 的 class 属 性 中 。 或 者 
将 f 作 为 每 个 元 到 的 方法 调用 并 计算 出 要 添加 的 类 名 。 


attr(name):value 

attr(name,value) 

attr(name,f(idx,current):value) 

attr(obj ) 

如 果 只 传 入 一 个 字符 串 参 数 ， 则 返回 第 一 个 选中 元 素 的 指定 名 字 的 属 
性 值 。 如 果 传 入 两 个 参数 ， 则 将 所 有 选中 元 素 的 指定 名 字 的 属性 设置 
为 指定 的 value， 或 者 将 f 作 为 每 个 元 素 的 方法 调用 以 计算 出 新 的 值 。 如 


果 只 传 入 一 个 对 象 参 数 ， 则 将 这 个 对 象 的 属性 名 作为 元 素 的 属性 名 ， 
同时 对 象 的 属性 值 为 作 元 素 的 属性 值 或 属性 计算 本数。 


css(name):value 

css(name,value) 

css(name,f(idx,current):value) 

css(obj) 

类 似 于 attr0， 但 它 查 询 或 设置 CSS 格 式 属性 ， 而 不 是 HTML 属 性 。 
data():obj 

data(key):value 

data(key,value) 


data(obj ) 


如 果 不 带 参数 ， 则 返回 第 一 个 选中 元 素 的 data 对 象 。 如 果 传 入 一 个 字符 
串 参 数 ， 则 返回 对 应 data 对 象 的 指定 名 字 的 属性 的 值 。 如 果 传 入 两 个 参 
数 ， 则 将 所 有 选中 元 素 的 对 应 data 对 象 指定 名 字 的 属性 设置 为 指定 
value。 如 果 传 入 一 个 对 象 参 数 ， 则 用 它 替 换 所 有 选中 元 素 的 data 对 象 。 
hasClass(name):boolean 

如 果 任 意 一 个 选中 元 素 的 class 属 性 中 包含 name 则 返回 true。 

height():int 

height(h) 

height(f(idx,current):int) 

返回 第 一 个 选中 元 素 的 高 度 (不 包含 内 边 距 、 边 框 和 外 边 距 ) ， 或 者 


| 中 元 素 的 高 度 设 为 h， 或 者 将 f 作 为 每 个 元 素 的 方法 调用 后 计算 


innerHeight():int 
返回 第 一 个 选中 元 素 的 高 度 加 上 内 边 距 。 

innerWidth():int 

返回 第 一 个 选中 元 素 的 宽度 加 上 内 边 距 。 

offset():coords 

offset(coords) 

offset(f(idx,current):coords) 

返回 第 一 个 选中 元 素 (在 ) 的 X 及 Y 位 置 ， 或 者 将 所 有 选中 元 素 的 位 置 
设 为 coords 或 将 f 作 为 每 个 元 素 的 方法 调用 计算 出 来 的 值 。 坐 标 是 一 个 
对 象 ， 具 有 top 和 left 属 性 。 


offsetParent():jQuery 


选择 距离 每 个 选中 元 素 位 置 最近 的 祖先 元 素 ， 并 在 一 个 新 的 jQuery 对 和 象 
中 返回 它们 。 


outerHeight([margins=false]):int 


返回 第 一 个 选中 元 素 的 高 度 加 内 边 距 和 边框 的 值 ， 如 果 margins 为 true， 
则 再 加 上 外 边 距 。 


outerWidth([margins=false]):int 


返回 第 一 个 选中 元 素 的 宽度 加 内 边 距 和 边框 的 值 ， 如 果 margins 为 true， 
则 再 加 上 外 边 距 。 


position():coords 


返回 第 一 个 选中 元 素 相对 于 它 位 置 最 近 的 祖先 的 位 置 。 返 回 值 是 一 个 
带 top 和 ]left 属 性 的 对 象 。 


removeAttr(name) 

从 所 有 选中 元 素 中 移 除 指定 名 字 的 属性 。 

removeClass(names) 

removeClass(f(idx,current):names) 

从 所 有 选中 元 素 的 class 属 性 中 移 除 一 个 或 多 个 指定 的 类 和 名。 如果 传 入 


的 不 是 字符 串 而 十 贸 数 ， 则 将 它 作为 每 个 元 素 的 方法 调用 并 生成 要 删 
除 的 一 个 或 多 个 类 名 。 


removeData([key]) 


从 每 个 选中 元 素 的 data 对 象 中 删除 指定 名 字 的 属性 。 如 果 没 有 指定 属性 
名 ， 则 删除 整个 data 对 象 。 


scrollLeft():int 


scrollLeft(int) 


返回 第 一 个 选中 元 素 的 水 平 滚动 条 的 位 置 ， 或 者 设置 所 有 选中 元 素 的 
9 的 位 置 。 


ScrollIopO:int 
scrollTop(int) 


返回 第 一 个 选中 元 系 的 垂直 滚动 条 的 位 置 ， 或 者 设置 所 有 选中 元 素 的 
生计 滚动 条 的 位 和 


toggleClass(names,[add]) 
toggleClass(f(idx,current):names,[add]) 


切换 每 个 选中 元 素 的 一 个 或 多 个 指定 类 名 。 如 果 指 是 f， 则 将 它 作 为 每 
个 选中 元 素 的 方法 调用 以 便 计算 出 要 切换 的 一 个 或 多 个 类 名 。 如 果 add 
为 true 或 false， 则 添加 或 删除 对 应 的 类 名 ， 而 不 是 切换 它们 。 
val():value 


val(value) 


val(f(idx,current)):value 


退回 第 一 个 选中 元 素 的 表单 值 或 选中 状态 ， 或 将 所 有 选中 元 素 的 值 或 
痊 中 状态 设置 为 5 或 者 将 为 每 个 元 到 的 方法 调用 计算 出 的 值 。 


width():int 
width(w) 
width(f(idx,current):int) 
返回 第 一 个 选中 元 素 的 宽度 (不 包括 内 边 距 、 边 框 和 外 边 距 ) ， 或 将 
所 有 让 中 元 的 和 设置 w 或 将 f 作 为 每 个 元 素 的 方法 调用 计算 出 


jQuery 插入 及 删除 方法 


这 儿 描 述 的 方法 将 插入 、 删 除 或 蔡 换 文档 内 容 。 在 下 面 的 方法 声明 
中 ， 参数 content 可 能 是 一 六 jQuery 对 象 、 一 个 HTML 字 符 串 或 者 一 个 独 
立 的 文档 元 素 ， 参 数 target 可 能 是 一 个 jQuery 对 象 、 一 个 独立 的 文档 元 
素 或 者 一 个 选择 絮 字 符 串 。 更 多 细 广 请 参见 19.2.5 记 或 19.3 广 。 
after(content) 


after(f(idx):content) 


在 每 个 选中 元 素 后 面 插入 content， 或 者 将 f 作 为 每 个 选中 元 素 的 方法 调 
用 ， 并 将 它 的 返回 值 插入 到 每 个 对 应 选中 元 素 后面 。 


append(content) 
append(f(idx,html):content) 


把 content 奶 加 到 每 个 选中 的 元 了 后 面 ， 或 将 f 作 为 每 个 选中 元 到 的 方法 
调用 ， 将 将 它 的 返回 值 追 加 到 每 个 选中 元 素 后 面 。 


appendTo(target):jQuery 


将 选中 元 素 妃 加 到 每 个 指定 target 元 素 的 尾部 ， 如 果 有 多 个 目标 ， 必 要 
时 复制 选中 元 素 。 


before(content) 

before(f(idx):content) 

类 似 于 after0， 但 在 选中 元 素 之 前 而 不 是 之 后 插入 。 
clone([data=false]):jQuery 

对 每 个 选中 元 素 进 行 党 试 复制 ， 返 回 一 个 表示 这 些 复制 对 象 的 新 jQuery 
对 象 。 如 果 data 为 tue， 则 也 会 复制 选中 元 素 对 应 的 data (包含 事件 处 理 
仁厚 六 

detach([sel]) 


类 似 于 remove()， 但 不 删除 分 离 元 素 对 应 的 data 。 


empty(O) 

删除 所 有 选中 元 素 的 内 容 。 

html():string 

html(htmlText) 

html(f(idx,current):htmlText) 

如 果 不 市 参数 ， 则 将 第 一 个 选中 元 素 以 HTML 格 式 化 的 字符 串 返 回 。 如 
果 传 入 一 个 参数 ， 则 将 所 有 迹 中 元 素 的 内 容 设 置 为 指定 的 htmlText， 或 
者 设置 为 将 f 作 为 这 些 元 素 的 方法 调用 时 的 返回 值 。 
insertAfter(target):jQuery 

在 每 个 targetZ 素 之 后 插入 选中 的 元 素 ， 如 和 有 多 个 目标 ， 必 要 时 复制 


选中 元 素 。 


insertBefore(target):jQuery 


在 每 个 target 元 素 之 前 插入 选中 的 元 素 ， 如 条 有 多 个 目标 ， 必 要 时 复制 


选中 元 素 。 


prepend(content) 
prepend(f(idx,html):content) 


类 似 append()， 但 它 在 每 个 选中 元 素 的 开头 部 分 插入 content， 而 不 是 在 
结尾 部 分 。 


prependTo(target):jQuery 
类 似 appendTo()， 除 了 选中 元 素 是 插入 到 目标 元 素 的 开头 部 分 而 不 是 结 
尾部 分 。 


removel([sel]) 


从 文档 中 移 除 所 有 选中 元 素 或 所 有 匹配 sel 的 选中 元 素 ， 同 时 移 除 所 有 
与 它们 相关 的 数据 (包括 事件 处 理 程 序 ) 。 注 意 ， 移 除 的 元 素 将 不 再 


是 文档 的 一 部 分 ， 但 还 是 返回 的 jQuery 对 象 的 成 员 。 
replaceAll(target) 


将 选中 元 素 插 入 到 文档 中 并 替换 每 一 个 target 元 聚 ， 如 果 有 多 个 目标 ， 
必要 时 将 复制 选中 元 聚 。 


replaceWith(content) 
replaceWith(f(idx,html):content) 


使 用 content 玲 换 每 个 选中 元 系 ， 或 将 f 作 为 每 个 克 中 元 素 的 方法 调用 ， 
传 入 元 素 的 索引 及 当前 HTML 内 容 ， 然 后 用 返回 值 茶 换 对 应 元 素 。 


text():string 

text(plainText) 

text(f(idx,current):plainText) 

如 末 不 市 参数 ， 则 以 纯 文本 了 字符 串 的 形式 返回 第 一 个 选中 元 素 的 内 
容 。 如 果 传 入 一 个 参数 ， 则 将 所 有 人 选中 元 素 的 内 容 设 置 为 指定 的 
plainText 或 将 f 作 为 这 些 元 素 的 方法 调用 时 的 返回 值 。 

unwrap() 

移 除 每 个 选中 元 素 的 父 玉 点 ， 将 它们 替换 为 选中 元 素 及 其 兄弟 元 素 。 
wrap(wrapper) 

wrap(f(idx):wrapper) 

使 用 wrapper 将 每 一 个 这 中 元 素 包 右 起 来 ， 如 打 有 多 个 选中 元 素 ， 必 要 
时 会 复制 这 个 包 凑 元素。 如 有 宁 传 入 的 是 一 个 国 数 ， 则 将 它 作为 每 个 选 
中 元 素 的 方法 调用 以 计算 出 wrapper。wrapper 可 以 是 一 个 元 素 、 一 个 


jQuery 对 象 、 一 个 选择 器 或 者 一 段 HTML 字 符 串 ， 但 它 必须 只 有 一 个 最 
内 层 元 素 。 


wrapAll(wrapper) 


使 用 wrapper 将 所 有 选中 元 素 作为 一 组 包 囊 起 来 ， 方 式 为 将 wrapper 插 入 
到 第 一 个 选中 元 素 的 位 置 ， 然 后 把 所 有 选中 元 素 复 制 到 wrapper 的 最 内 
层 元 素 中 。 

wrapInner(wrapper) 


wrapInner(f(idx):wrappem) 


类 似 wrapO0， 但 它 使 用 wrapper (或 {的 返回 值 ) 将 每 一 个 选中 元 素 的 内 
容 包 庄 起 来 ， 而 不 是 把 元 素 目 身 包 囊 起 来 。 


jQuery 事件 方法 
本 节 的 方法 用 于 注册 事件 处 理 程序 以 及 触发 事件 。 参 见 19.4 节 。 


event-type() 


event-type(f(event)) 


将 f 注 册 为 event-type 的 处 理 程序 ， 或 触发 一 个 event-type 类 型 的 事件 。 
jQuery 定义 了 下 面 这 些 使 用 这 个 模式 的 便捷 方法 : 


ajaxComplete() blur() focusin() mousedown() mouseup() 
ajaxError() change() focusout() mouseenter() resize() 
ajaxSend() click() keydown() mouseleave() scrol]() 
ajaxStart() dblclick() © keypress() mousemove() select() 
ajaxStop() error() keyup() mouseout() submit() 
ajaxSuccess() focus() lo0ad() mouseover() unload() 


bind(type,[datal,f(event)) 
bind(events) 


在 每 个 选中 元 素 上 将 {注册 为 指定 type 的 事件 的 处 理 程序 。 如 果 指 定 了 
data， 则 在 调用 {之 前 先 将 它 添加 到 事件 对 象 上 。type 可 能 定义 了 多 种 事 
件 类 型 ， 也 可 能 包含 命名 空间 。 


如 果 传 入 了 一 个 单独 的 对 象 ， 则 将 它 视 为 一 个 事件 类 型 到 处 理 程序 函 
数 的 映射 ， 并 在 每 个 选中 元 素 上 为 所 有 指定 的 事件 注册 处 理 程序 。 


delegate(sel,type,[datal,f(event)) 

将 f 注 册 为 一 个 实时 事件 处 理 程序 。 当 类 型 为 type 的 事件 在 匹配 sel 的 某 
个 元 素 上 发 生 并 冒 泡 到 任意 一 个 选中 元 素 上 时 触发 f。 如 果 指 定 了 
data， 将 在 调用 f 之 前 把 它 添加 到 事件 对 象 中 。 

die(type,[f(event)]) 


注销 由 live0 在 当前 选中 元 素 中 匹配 选择 需 字 符 串 的 元 素 上 注册 的 类 型 
为 type 的 事件 的 实时 事件 处 理 程序 。 如 果 指 定 了 特定 的 事件 处 理 程序 函 
数 f， 则 只 注销 这 一 个 。 


hover(f(event)) 


hover(enter(event),leave(event)) 


在 所 有 选中 元 素 上 为 "mouseenter" 和 "mouseleave" 事 件 注册 处 理 程序 。 
如 果 只 指定 了 一 个 方法 ， 则 将 它 同时 用 做 两 个 事件 的 处 理 程序 。 


live(type,[datal,f(event)) 


将 f 注 册 为 类 型 为 type 的 事件 的 实时 事件 处 理 程序 。 如 果 指 定 了 data， 则 
在 调用 f 之 前 将 它 添 加 到 事件 对 象 中 。 这 个 方法 不 使 用 选中 元 素 的 集 
合 ， 但 它 的 确 要 用 到 选择 器 字符 串 以 及 当前 jQuery 对 象 的 context 对 象 。 
当 类 型 为 type 的 事件 冒 泡 到 context 对 象 (通常 为 document) 并 且 事 件 的 
目标 元 素 匹 配 选 择 絮 上 时， 将 触发 f。 参见 delegate()。 


one(type,[data],f(event)) 


one(events) 


0 ， 不 同 之 处 是 注册 的 事件 处 理 程 序 将 在 执行 一 次 之 后 自动 注 


ready({()) 


注册 { 为 当 文档 就 绪 时 调用 ， 或 者 如 果 文 档 已 经 就 绪 则 立刻 调用 它 。 这 
个 方法 用 不 到 选中 的 元 系 ， 它 和 $( 同 义 。 


toggle(fl(event),f2(event),...) 


在 所 有 选中 元 素 上 注册 一 个 "click" 事 件 处 理 程 序 ， 这 个 处 理 程序 会 在 指 
定 的 处 理 程序 函数 中 改变 〈 或 切换 ) 。 


trigger(type,[params]) 
trigger(event) 


在 所 有 选中 元 素 上 触发 一 个 类 型 为 type 的 事件 ， 并 将 params 作 为 一 个 额 
外 的 参数 传 给 事件 处 理 程序 。params 可 以 省 略 ， 可 以 是 一 个 单独 的 

值 ， 也 可 以 是 一 个 值 数 组 。 如 果 传 入 一 个 event 对 象 ， 则 它 的 type 属 性 
其 余 属性 将 复制 到 将 传 入 处 理 程序 的 事件 对 象 


triggerHandler(type,[params]) 
类 似 trigger()， 但 不 允许 触发 的 事件 冒 泡 或 触发 济 贤 絮 的 默认 行为 。 
unbind([typel],[f(event)]) 


如 果 不 带 参 数 ， 则 在 所 有 选中 元 素 上 注销 全 部 jQuery 事件 处 理 程序 。 如 
条 传 入 一 个 参数 ， 则 在 所 有 选中 元 系 上 注销 类 型 为 type 的 事件 的 事件 处 
理 程序 。 如 果 传 入 两 个 参数 ， 则 在 所 有 选中 元 素 上 类 型 作为 type 事 件 的 
处 理 程序 注销 f。type 可 以 指定 多 个 事件 类 型 ， 也 可 以 包含 命名 空间 。 


undelegate() 

undelegate(sel,type,[f(event)]) 

如 果 不 带 参数 ， 则 注销 选中 元 素 委派 的 所 有 实时 事件 处 理 程序 。 如 果 
传 入 两 个 参数 ， 则 注销 所 胸中 元 素 中 匹配 sel 的 元 素 委 派 的 类 型 为 type 
的 实时 事件 处 理 程序 。 如 采 传 入 三 个 参数 ， 则 只 注销 处 理 程序 f 。 


jQuery 特效 及 动画 方法 


这 儿 摘 述 的 方法 提供 目 定 义 动画 。 它 们 大 多 数 都 返回 调 
用 自己 的 jQuery 对 象 。 参 见 19.5 字 。 


动画 选项 
complete duration easing queue specialEasing step 


jQuery.fx.off 
将 这 个 属性 设置 为 tue 会 禁用 所 有 特效 及 动画 。 
animate(props,opts) 


使 用 由 opts 定 义 的 选项 ， 在 每 个 选中 元 素 上 以 动画 方式 改变 由 props 对 
象 指定 的 CSS 属 性 。 这 两 个 对 象 的 细节 请 参见 19.5.2 节 。 


animate(props,[duration],[easing],[fO]) 

使 用 指定 的 duration 和 easing 函 数 ， 在 每 个 选中 元 素 上 以 动画 方式 改变 
0 。 动画 完成 时 将 ff 为 每 个 选中 元 素 的 方法 
clearQueue([qname="fx"]) 

为 每 个 选中 元 素 清 除 特效 队列 或 指定 名 字 的 队列 。 
delay(duration,[gqname="fx"]) 

添加 指定 duration 的 延 时 到 特效 队列 或 指定 名 字 的 队列 中 。 
dequeue([qname="fx"]) 


移 除 并 调用 特效 队列 或 指定 名 字 队 列 中 的 下 一 个 函数 。 一 般 不 需要 执 
行 这 个 操作 。 


fadeIn([duration=400],[fO]) 


fadeOut([duration=400],[f()]) 


以 动画 的 方式 ， 在 指定 的 duration 室 秒 内 改变 选中 元 素 的 透明 度 ， 以 便 
使 它 淡 入 或 淡出 。 完 成 时 ， 如 有 果 调 用 f， 则 将 它 作为 每 个 选中 元 素 的 方 
法 调用 。 

fadeTo(duration,opacity,[f()]) 


以 动画 的 方式 ， 在 指定 的 duration 毫 秒 内 将 选中 元 素 的 透明 度 改 变 为 
opacity。 完 成 时 ， 如 末 调 用 f， 则 将 它 作 为 每 个 克 中 元 素 的 方法 调用 。 


hide() 

hide(duration,[fO]) 

如 条 没有 指定 参数 ， 则 立刻 隐藏 每 个 选中 元 素 。 人 否则 ， 以 动画 的 方式 
改变 每 个 选中 元 素 的 尺寸 及 透明 度 ， 让 它们 在 duration 上 毫秒 之 后 隐藏 。 
完成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 素 的 方法 调用 。 


slideDown([duration=400],[fO]) 


slideUp([duration=400],[fO]) 

slideIoggle([duration=400],[fO]) 

以 动画 的 方式 ， 在 指定 的 duration 时 间 内 改变 每 个 选中 元 素 的 高 度 ， 以 
便 显 示 、 隐藏 或 兰 切换 元 系 的 可 见 性 。 完 成 时 ， 如 条 调用 f， 则 将 它 作 
为 每 个 选中 元 素 的 方法 调用 。 

show!() 

show(duration,[fO]) 

如 果 不 带 参数 ， 则 立刻 显示 每 个 选中 元 素 。 和 否则， 以 动画 的 方式 改变 
每 个 选中 元 素 的 矿 才 及 透明 度 ， 让 它们 在 duration 坚 秒 之 后 完全 可 见 。 
完成 时 ， 如 果 调 用 f， 则 将 它 作 为 每 个 选中 元 素 的 方法 调用 。 
stop([clear=false],[jump=false]) 


在 所 有 选中 元 素 上 停止 当前 动画 (如 果 有 正在 运行 中 ) 。 如 果 clear 为 
true， 则 同时 也 清除 每 个 元 素 的 特效 队列 。 如 果 jump 为 tue， 则 在 停止 


之 前 跳 到 动画 的 最 终 效 果 。 

toggle([show]) 

toggle(duration,[f0]) 

如 果 show 为 ture， 则 调用 show0 立 刻 显示 选中 元 素 。 如 果 show 为 false， 
i 中 元 素 。 如 果 show 省 略 ， 则 切换 元 素 的 可 见 


如 果 指 十 duration， 则 在 指定 时 间 内 ， 通 过 以 动画 改变 选中 元 素 的 尺寸 
和 透明 度 的 方式 ， 切 换 元 素 的 可 见 性 。 完 成 时 ， 如 果 调 用 f， 则 将 它 作 
为 每 个 选中 元 素 的 方法 调用 。 

queue([gname="fx"]):array 


queue([qgname="fx"],f(next)) 


queue([gname="fx"],newq) 


如 琳 不 市 参数 或 只 有 一 个 队列 名 ， 则 返回 第 一 个 选中 元 素 的 指定 名 字 
的 队列 。 如 琳 传 入 一 个 函数 参数 ， 则 将 f 深 加 到 所 有 选中 元 素 的 指定 名 
字 的 队列 中 。 如 果 传 入 一 个 数组 参数 ， 则 将 所 有 选中 元 素 的 指定 名 字 
的 队列 蔡 换 为 由 函数 组 成 的 新 数组 newq 。 


jQuery Ajax 函数 


jQuery Ajax 大 多 数 相关 的 功能 采用 了 工具 画 数 的 形式 ， 而 不 是 方法 。 
下 面 是 部 分 jQuery 库 中 最 复杂 的 函数 。 完 整 细节 请 参见 19.6 节 。 


Ajax 状 态 码 


SUCCeSS error notmodified timeout parsererror 
Ajax 效 据 类 型 


text html xml script json jsonp 


Ajax 事件 


ajaxStart ajaxSend ajaxSuccess ajaxError ajaxComplete ajaxStop 


Ajax 选项 
async context global processData type 
beforeSend data ifModified scriptCharset url 
cache dataFilter jsonp SUCCess username 
complete dataType JsonpCallback timeout xhr 
contentType error password traditional 


jQuery.ajax(options):XMLHttpRequest 


这 是 一 个 复杂 但 完全 通用 的 Ajax 函 数 ， 是 jQuery 的 所 有 Ajax 工 具 的 基 
础 。 它 只 需要 一 个 对 象 作为 参数 ， 该 对 象 的 属性 指定 了 对 应 的 Ajax 请 
求 的 所 有 细节 以 及 人 处理 服务 器 的 响应 的 处 理 程序 。 最 常用 选项 的 摘 壕 
在 19.6.3 节 ， 回 调 选 项 的 摘 述 也 在 19.6.3 广 。 


jQuery.ajaxSetup(options) 


这 个 函数 设置 jQuery 的 Ajax 选项 的 默认 值 。 传 入 的 选项 对 象 的 类 型 与 传 
入 jQuery.ajax0 的 一 样 。 如 果 后 续 的 Ajax 请 求 没 有 指定 目 己 的 值 ， 则 会 
使 用 这 儿 指 定 的 值 。 这 个 函数 没有 返回 值 。 


jQuery.getJSON(Curl,[dataj],[f(objectstatus)]):XMLHttpRequest 
异步 请 求 指定 的 ul， 同时 添加 任意 指定 的 data。 接 收 到 响应 时 ， 将 它 解 


析 为 JSON， 然 后 将 啊 应 文本 传 入 到 回调 函数 f 中 。 如 果 存 在 用 于 请 求 的 
XMLHttpRequest 对 象 ， 则 返回 这 个 对 象 。 


jQuery.getScript(url,[f(text,status)]):XMLHttpRequest 


异步 请 求 指 定 的 url。 响 应 到 达 时 ， 将 它 作 为 一 个 脚本 执行 ， 然 后 将 响 
应 文本 传 入 f。 如 果 存 在 用 于 请 求 的 XMLHttpRequest 对 象 ， 则 返回 这 个 
对 象 。 人 允许 器 域 ， 但 路 域 时 不 会 传 入 脚本 文本 给 f， 也 不 会 返回 
XMLHttpRequest 对 象 。 


jQuery.get(url,[data],[f(data,status,xhr)],[type]):XMLHttpRequest 


生成 一 个 到 url 的 异步 HTTP GET 请 求 ， 如 采 指 明了 data， 则 将 它 作 为 查 

询 参 数 部 分 添加 到 URL 中 。 收 到 响应 时 ， 将 它 解释 为 指定 type， 或 者 根 

据 啊 应 的 Content-Type 头 指定 的 类 型 ， 必 要 时 还 会 执行 或 解析 它 。 最 

后 ,将 (可 能 解析 过 的 ) 响应 数据 连同 jQuery 状态 码 、 对 应 的 用 于 请 求 

的 XMLHttpRequest 对 象 传 入 到 回调 函数 f 中 。 该 XMLHttpRequest 对 象 
(如 果 存 在 的 话 ) 也 是 jQuery.get0 的 返回 值 。 


jQuery.post(url,[data],[f(data,status,xhm],[type]):XMLHttpRequest 


类 似 jQuery.get()， 但 生成 一 个 HTTP POST 请 求 ， 而 不 是 一 个 GET 请 
求 o 


jQuery.param(o,[old=false]):string 


以 www-form-urlencoded 格 式 序列 化 o 的 属性 名 和 属性 值 ， 以 便 将 它 添加 
到 一 个 URL 中 或 作为 一 个 HTTP POST 请 求 的 正文 。 如 果 作 为 data 参 数 传 
入 一 个 对 象 ， 大 多 数 jQuery Ajax 函数 会 自动 完成 这 个 转换 。 如 果 你 想 
要 jQuery 1.3 风 格 的 浅 序列 化 ， 请 把 true 作 为 第 二 个 参数 传 入 。 


jQuery.parseJSON(text):object 


解析 JSON 格 式 的 文本 并 返回 生成 的 对 象 。 当 请 求 JSON 编 码 的 数据 时 ， 
jQuery 的 Ajax 函数 会 隐 式 调用 这 个 方法 。 


load(url,[datal,[f(text,status,xhr)]) 

异步 请 求 url， 同 时 添加 指定 的 data。 收 到 响应 时 ， 将 它 解 释 为 一 个 
HIML 字 符 串 ， 并 将 它 揪 入 到 每 个 这 中 元 素 的 位 置 ， 蔡 换 现存 的 内 容 。 
最 后 ， 将 f 作 为 每 个 选中 元 素 的 方法 调用 ， 参 数 为 啊 应 文本 、jQuery 状 
态 码 以 及 当前 请 求 的 XMLHttpRequest 对 象 。 


如 果 ur 包 含 一 个 空格 ， 则 该 空格 之 后 的 文本 将 用 做 选择 器 ， 响 应 文档 
中 只 有 匹配 选择 需 的 部 分 才 会 插入 到 选中 元 素 中 。 


不 同 于 大 多 数 jQuery Ajax 工具 ，1load0 是 一 个 方法 ， 不 是 一 个 函数 。 类 
似 于 大 多 数 jQuery 方法 ， 它 返回 调用 它 的 jQuery 对 象 。 


serialize():string 


序列 化 选中 表单 及 表单 元 素 的 名 字 与 值 ， 返 回 一 个 www-form- 
urlencoded 格 式 的 字符 串 。 


jQuery 工具 函数 
这 些 是 杂项 jQuery 函数 和 属性 (不 是 方法 ) 。 更 多 细节 请 参见 19.7 节 。 


jQuery.boxModel 


jQuery.support.boxModel 的 一 个 充 用 的 同义词 。 
jQuery.browser 


这 个 属性 指 代 一 个 标识 浏览 右 广 商 和 版 本 的 对 象 。 在 这 个 对 象 中 ， 
Internet Explorer 具 有 属性 msie，Firefox 具 有 属性 mozilla，Safari 和 
Chrome 具 有 属性 webkit，Opera 具 有 属性 opera。 它 的 version 属 性 就 是 浏 
响 志 的 版 本 号 。 


jQuery.contains(a,b):boolean 
如 果 文 档 元 素 a 包 售 元 素 b 则 返回 true 。 


jQuery.data(elt):data 


jQuery.data(elt,key):value 
jQuery.data(elt,data) 


jQuery.data(elt,key,value) 


data(0 方 法 的 一 个 低级 版 本 。 如 果 传 入 一 个 元 素 参 数 ， 则 返回 该 元 素 的 
data 对 象 。 如 果 传 入 一 个 元 素 以 及 一 个 字符 串 ， 则 从 该 元 素 的 data 对 象 
中 返回 指定 名 字 的 值 。 如 果 传 入 一 个 元 素 以 及 一 个 对 象 ， 则 设置 该 元 
素 的 data 对 象 。 如 果 传 入 一 个 元 素 、 一 个 字符 串 以 及 一 个 值 ， 则 设置 该 
元 素 的 data 对 象 中 指定 名 字 的 值 为 传 入 的 值 。 


jQuery.dequeue(elt,[qname="fx"]) 


移 除 并 调用 指定 元 素 指 定名 字 的 队列 中 的 第 一 个 国 数 。 与 
$(elb.dequeue(qnqme) 相 同 。 


jQuery.each(o,f(name,value)):o 
jQuery.each(a,f(index,value)):a 


为 0 的 每 个 属性 调用 一 次 f， 传 入 对 应 的 属性 名 和 属性 值 ， 并 将 f 作 为 属 
性 值 的 方法 调用 。 如 末 第 一 个 参数 是 一 个 数组 ， 或 一 个 类 数组 元 素 ， 
则 将 f 作 为 数组 中 每 个 元 取 的 方法 调用 ， 将 数组 的 索 引 和 和 元素 值 作为 参 
J ° 如果 f 返 回 false 则 送 代 将 停止 。 这 个 函数 返回 它 的 第 一 个 参 


jQuery.error(msg) 


抛 出 一 个 包含 msg 的 异常 。 可 以 在 插件 中 调用 这 这 个 函数 ， 也 可 以 在 调试 
时 重 写 (例如 jQuery.error=alert) 它 。 


jQuery.extend(obj):object 
jQuery.extend([deep=false],target,obj…):object 


如 条 传 入 一 个 参数 ， 将 obj 的 属性 复制 到 全 局 的 jQuery 命名 空间 中 。 如 
果 传 入 两 个 或 更 多 参数 ， 则 按 顺 序 复 制 第 二 个 及 之 后 的 对 象 的 属性 到 
target 对 象 中 。 如 果 可 洗 参 数 deep 为 true， 则 将 执行 次 拷贝 ， 属 性 将 会 递 
归 复 制 。 返 回 值 为 扩展 的 对 象 。 


jQuery.globalEval(code):void 


执行 指定 JavaScript code， 就 像 它 们 是 顶级 < script> 一 样 。 没 有 返回 
值 。 


jQuery.grep(a,f(eltidx):boolean,[invert=false]):array 


返回 一 个 新 数组 ， 其 中 只 包含 a 中 令 f 返 回 true 的 元 素 。 或 者 ， 如 果 invert 
为 true 的 话 ， 则 只 返回 令 f 返 回 false 的 元 下 。 


jQuery.inArray(v,a):integer 


在 数组 或 类 数组 对 象 中 寻找 元 素 v， 如 果 找 到 则 返回 元 素 的 索引 ， 否 
则 返回 -1 。 


jQuery.isArray(x):boolean 

仅 当 x 是 一 个 真正 的 JavaScript 数 组 时 返回 true。 
jQuery.isEmptyObject(x):boolean 

仅 当 x 不 包含 可 枚 举 属性 时 返回 true 。 
jQuery.isFunction(x):boolean 

仅 当 x 是 一 个 JavaScript 函 数 时 返回 true。 
jQuery.isPlainObject(x):boolean 


仅 当 x 是 一 个 普通 JavaScript 对 象 时 返回 true， 比 如 一 个 由 对 象 直接 量 
(object literal) 创建 的 对 象 。 


jQuery.isXMLDoc(x):true 

仅 当 x 是 一 个 XML 文 档 或 一 个 XML 文 档 的 元 素 时 返回 true 。 
jQuery.makeArray(a):array 

返回 一 个 新 的 JavaScript 数 组 ， 其 中 包含 和 类 数组 对 象 a 相 同 的 元 素 。 
jQuery.map(a,f(eltidx)):array 


返回 一 个 新 的 数组 ， 值 为 对 于 数组 〈 或 类 数组 对 象 ) a 的 每 一 个 元 素 依 
次 调用 f 的 返回 值 。 值 为 null 的 返回 值 将 名 上 略 ， 返 回 的 数组 是 平整 的 。 


jQuery.merge(a,b):array 


0 并 返回 a。 参数 可 以 是 类 数组 对 和 象 或 真正 
4 数组。 


jQuery.noConflict([radical=false]) 


将 符号 $ 重 置 为 jQuery 库 加 载 前 的 值 并 返回 jQuery。 如 有 条 radical 为 true， 
则 也 还 原 符 号 jQuery 的 值 。 


jQuery.proxvy(f,o):function 
jQuery.proxy(o,name):function 


返回 一 个 范 数 ， 该 函数 将 f 作 为 的 一 个 方法 调用 ， 或 者 将 o[name] 作 为 o 
的 一 个 方法 调用 。 


jQuery.queue(elt,[qgname="fx"],[f]) 


查询 或 设置 elt 的 指定 名 字 的 队列 ， 或 添加 一 个 新 的 函数 f 到 这 个 队列 
中 。 和 $(elt).queue(qname,f) 等 同 。 


jQuery.removeData(elt,[name]):void 

从 elt 的 data 对 象 中 移 除 指定 名 字 的 属性 ， 或 移 除 对 应 的 data 对 象 本 里。 
jQuery.support 

一 个 对 象 ， 包 含 看 干 描述 当前 浏 抠 大 的 特性 与 bug 的 属性 。 大 多 属性 只 
有 插件 开发 者 感 兴趣 。 在 怪异 模式 (quirks mode) 的 下 浏览 器 下 
jQuery.support.boxModel 为 false ° 

jQuery.trim(s):string 

返回 字符 串 s 的 一 个 副本 ， 其 中 去 摊 了 头 部 和 尾部 的 空白 字符 。 
KeyEvent 

参见 Event 

Label 

适用 于 表单 控件 的 <label > 


Node、Element 


Label 对 象 表示 HIML 表 单 中 的 <label> 元 素 。 
属性 
readonly Element control 


当前 标签 天 联 的 FormControl。 如 果 指 定 htmlFor， 这 个 属性 为 该 属性 指 
定 的 控件 。 否 则 ， 这 个 属性 为 该 <label> 的 第 一 个 FormControl 子 元 


readonly Form form 


这 个 属性 指 代 包含 当前 标签 的 Form 元 素 。 或 者 ， 如 果 设 置 HTML form 
属性 ， 则 指 代 那 个 ID 标识 的 Form 元 素 。 


string htmlFor 


这 个 属性 是 HTML for 属 性 的 映射 。 由 于 for 是 JavaScript 中 的 保留 词 ， 
此 为 了 创建 一 个 合法 的 标识 符 ， 这 个 属性 名 以 "html" 为 前 缀 。 如 采 设 置 
这 个 值 ， 这 个 属性 应 该 指定 与 本 标签 关联 的 FormControl 的 ID 。 (不 
过 ， 通 常 有 更 简单 的 方法 ， 只 需要 简单 地 将 该 FormControl 作 为 本 Label 
的 一 个 子孙 元 素 即 可 。) 


Link 


HTML 超 链接 
Node 、Element 


HTML 链 接 由 <a>、<area> 以 及 <link> 元 素 创建 。<a> 标 签 用 于 
在 文档 正文 中 创建 超 链接 。< area> 标签 是 一 个 较 少 用 到 的 特性 ， 用 于 
创建 “图 片 热 区 ”。<1link> 标签 用 于 在 文档 的 <head> 中 引用 外 部 资 
源 ， 如 样式 表 、 图 标 等 。<a> 和 <area> 元 素 在 JavaScript 中 的 表示 方 
式 相 同 。<link>> 元 素 在 JavaScript 中 的 表示 方式 有 些 不 同 ， 为 了 方便 ， 
这 两 类 链接 的 文档 在 这 儿 编 写 在 了 一 起 。 


ee <a>> 元 素 的 Link 对 象 用 做 字符 串 时 ， 它 将 返回 它 的 href 属 


属性 

除了 这 儿 列 出 的 属性 ， 链 接 对 象 也 有 反映 基本 的 HTML 特 性 的 属性 : 
hreflang、media、ping、rel、sizes、target 以 及 type。 注 意 ， 返 回 链接 的 
href 的 URL 分 解 decomposition) 属性 (如 host 和 pathname) 只 适用 于 


<a>> 以 及 <area> 元 素 ， 不 适用 于 <link> 元素， 同时 ，sheet、 
disabled 以 及 relList 元 素 只 适用 于 引用 样式 表 的 <link> 元 素 。 


boolean disabled 


适用 于 指 代 样 式 表 的 <link> 元 素 ， 这 个 属性 控制 该 样式 表 坪 人 否 应 用 到 
当前 文档 中 。 


string hash 

href 的 片断 标识 符 ， 包 含 开 头 的 哈 希 (#) 标记 ， 例 如 "#results"。 
String host 

href 的 主机 名 和 端口 部 分 ， 例 如 "http://ww.oreilly.com:1234"。 
string hostname 

href 的 主机 名 部 分 ， 例 如 "http://www.oreilly.com"。 


string href 


链接 的 href 属 性 。 当 一 个 <a> 或 <area> 元素 用 做 字符 串 时 ， 它 将 是 这 
个 属性 返回 的 值 。 


string pathname 

href 的 path 部 分 ， 例 如 "catalog/search.html"。 
string port 

href 的 端口 部 分 ， 例 如 “1234”。 


String protocol 


href 的 协议 部 分 ， 包 括 尾部 的 冒号 ， 例 如 "http:"。 
readonly DOMTokenList relList 


类 似 Element 的 classList 必 性， 这 个 属性 让 从 <link> 元素 的 HTML rel 属 
性 中 查询 、 设 置 以 及 删除 操作 更 容易 。 


string search 

href 的 查询 部 分 ， 包 括 开 头 的 问号 ， 例 如 "?gq=JavaScript&m=10"。 
readonly CSSStyleSheet sheet 

适用 于 引用 样式 表 的 <link> 元 隶 ， 这 个 属性 表示 已 连接 的 样式 表 。 
string text 

<a> 或 <area> 元 素 的 纯 文本 内 容 。 等 同 于 Node.textContent 。 

string title 

所 有 HTML 元 素 都 文 持 title 属 性 ， 一 般 它 用 于 指定 该 元 素 的 工具 提示 信 
已 文本。 如 果 在 rel 设 置 为 "alternate stylesheet" 的 <link> 元 素 上 设置 这 
个 属性 ， 将 为 它 提 供 一 个 名 字 ， 用 户 将 可 以 通过 这 个 名 字 局 用 或 茶 用 


该 样式 表 ， 如 来 浏 唤 紫 支持 耕 换 样式 表 的 话 ， 指 定 的 title 还 可 能 以 某 种 
形式 出 现在 浏览 如 的 用 户 界 面 上 。 


Location 
代表 并 控制 浏 贤 絮 的 地 址 


Window 或 Document 对 和 象 的 location 属 性 指 代 一 个 Location 对 象 ， 这 个 对 
象 代 表 当 前 文档 的 页 面 地 址 ( 即 "location") 。href 属 性 包含 该 文档 的 完 
整 UREL，Location 对 象 的 其 他 属性 各 目 描述 了 这 个 URE 的 一 部 分 。 这 些 
属性 很 像 Link 对 象 的 URL 属 性 。 当 Location 对 象 用 做 字符 串 时 ， 将 返回 
href 属 性 的 值 。 这 意味 着 可 以 在 使 用 location.href 表 达 式 的 地 方 使 用 


location ° 


除了 代表 当前 浏览 器 地 址 ，Location 对 象 也 控制 这 个 地 址 。 如 果 把 一 个 
包含 URL 的 字符 串 赋值 给 Location 对 象 或 它 的 href 属 性 ，Web 浏 览 器 将 
加 载 并 显示 这 个 URL。 也 可 以 通过 设置 其 他 Location 属 性 改变 当前 URL 
的 一 部 分 的 方式 ， 让 浏览 絮 加 载 一 个 新 的 文档 。 例 如 ， 如 果 设 置 search 
属性 ， 浏 览 器 将 以 一 个 妃 加 的 新 查询 字符 串 重 新 加 载 当 前 URL。 如果 
设置 hash 属 性 ， 浏 贤 器 不 会 加 载 新 的 文档 ， 但 它 会 创建 一 个 新 的 历史 记 
孙 。 并 且 ， 如 果 该 hash 属 性 标识 文档 中 的 一 个 元 素 ， 则 浏览 右 将 滚动 文 
档 ， 以 便 让 该 元 素 可 见 。 


属性 


Location 对 象 的 属性 指 代 当 前 文档 的 UREL 的 多 个 部 分 。 在 下 面 描述 的 属 
性 中 ， 给 出 的 例子 都 是 这 个 〈 虚 构 的 ) URL 的 一 部 分 : 


http://www.oreilly.com:1234/catalog/search.html?q=JavaScript&m=10#results 


string hash 


URL 的 锚 部 分 ， 包 括 开 头 的 哈 希 (#) 符号 ， 例 如 "#esults"。 文 档 URL 
的 这 个 部 分 指定 文档 中 某 个 销 的 名 字 。 


string host 

URE 的 主机 名 和 端口 部 分 ， 例 如 "http:/www.oreilly.com:1234" 。 

string hostname 

URL 的 主机 名 部 分 ， 例 如 "http://www.oreilly.com"。 

string href 

文档 的 URL 的 完整 文本 ， 不 同 于 其 他 只 指定 URL 的 一 部 分 的 Location 属 
性 。 将 这 个 属性 设置 为 一 个 新 的 URL 将 导致 浏览 器 读 取 并 显示 新 URL 
的 内 容 。 把 一 个 值 直 接 赋 值 给 Location 对 象 将 设置 这 个 属性 ， 把 一 个 
Location 对 象 用 做 一 个 字符 串 将 使 用 这 个 属性 的 值 。 


string pathname 


URL 的 路 径 名 部 分 ， 例 如 "/catalog/search.html"。 
string port 


URL 的 端口 部 分 ， 例 如 “1234”。 注 意 这 个 属性 是 一 个 字符 串 ， 而 不 是 
一 作 类 上 二 
| 数字 9 


string protocol 

URL 的 协议 部 分 ， 包 括 尾部 的 冒号 ， 例 如 "http:"。 

string search 

URL 的 查询 部 分 ， 包 括 开 头 的 问号 ， 例 如 "?g=JavaScript&m=10"。 
方法 

void assign(string url) 

加 载 并 显示 指定 url 的 内 容 ， 等 同 于 href 属 性 设置 为 url 。 

void reload() 

重新 加 载 当前 显示 的 文档 。 

void replace(string url) 


加 载 并 显示 指定 unl 的 内 容 ， 在 浏 咒 右 的 历史 记录 中 替换 挥 当前 文档 ， 
这 样 浏览 锅 的 “后 退 ? 控 钮 将 把 浏览 硕 市 到 前 一 个 显示 的 文档 。 


MediaElement 
媒体 播放 元 系 


Node 、Element 


MediaElement 是 <audio > 和 <video>> 元 素 共 同 的 超 类 。 这 两 个 元 素 定 
义 的 API 儿 乎 一 模 一 样 ， 这 些 相同 的 API 在 这 儿 有 描述 ， 不 过 ， 音 频 和 
视频 相关 的 细节 请 参见 Audio 及 Video。 关 于 这 些 媒体 元 素 的 介绍 请 参见 
21.2 节 。 


A 于 
吊 量 


NETWORK 常 量 是 networkState 可 能 的 值 ，HAVE 常 量 是 readyState 属 性 
可 能 的 值 。 


unsigned short NETWORK_EMPTY=0 
3 前 元 素 还 没有 开始 使 用 网 络 。 在 src 属 性 设置 之 前 可 能 处 于 这 个 状 


unsigned short NETWORK_IDLE=1 

当前 元 素 现 在 不 在 从 网 络 加 载 数据 。 它 可 能 已 经 加 载 完 全 部 资源 了 ， 
或 者 它 可 能 已 经 缓存 了 它 现在 需要 的 数据 ， 也 或 者 可 能 是 它 的 preload 
设置 为 "none"， 并 且 还 没有 要 求 加 载 或 播放 媒体 。 

unsigned short NETWORK_LOADING=2 

当前 元 素 当 前 正在 使 用 网 络 加 载 媒 体 数 据 。 

unsigned short NETWORK_NO_SOURCE=3 

当前 元 素 没有 使 用 网 络 ， 因 为 它 找 不 到 可 以 播放 的 媒体 资源 。 
unsigned short HAVE_NOTHING=0 

没有 媒体 数据 或 无 数据 已 加 载 。 

unsigned short HAVE_METADATA=1 


媒体 元 数据 已 加 载 ， 但 当前 播放 位 置 的 数据 还 没有 加 载 。 这 意味 着 可 
以 查询 该 媒体 的 时 长 或 视频 的 大 小 ， 并 且 可 以 通过 设置 currentTime 来 
搜索 媒体 ， 但 浏览 右 现 在 不 能 播放 currentTime 位 置 的 媒体 。 


unsigned short HAVE_CURRENT_DATA=2 
currentTime 的 媒体 已 加 载 ， 但 还 没有 加 载 足 够 的 数据 以 允许 媒体 开始 


播放 。 对 视频 来 说 ， 通 常 这 意味 着 当前 帧 已 加 载 ， 但 下 一 帧 还 没有 。 
在 音频 或 视频 的 结尾 也 会 发 生 这 个 状态 。 


unsigned short HAVE_FUTURE DATA=3 


己 下 载 了 足以 开始 播放 的 媒体 数据 ， 但 如 采 不 暂停 以 便 加 载 更 多 数据 
的 话 ， 数 据 可 能 将 不 足以 持续 播放 到 媒体 结束 。 


unsigned Short HAVE_ENOUGH DATA=4 


已 加 载 了 足够 的 数据 ， 浏 览 器 有 可 能 可 以 在 不 暂停 的 情况 下 一 直播 放 
到 媒体 结束 。 


属性 


boolean autoplay 


如 果 为 tue， 对 应 媒体 元 素 将 在 下 载 了 足够 数据 时 自动 开始 播放 。 本 属 
性 为 对 应 的 HTML autoplay 属 性 的 映 映 。 


readonly TimeRanges buffered 
当前 缓存 的 媒体 数据 的 时 间 范 围 。 
boolean controls 


如 果 为 tue， 则 对 应 媒体 元 素 应 该 显示 一 系列 的 播放 控件 。 本 属性 为 对 
应 的 HTML controls 属 性 的 映射 。 


readonly string currentSrc 


媒体 数据 的 URL， 来 上 自 src 属 性 ， 或 者 当前 元 素 的 一 个 <source 子 市 
点， 如 果 没 有 指定 媒体 数据 ， 则 为 空 字符 串 。 


double currentTime 


当前 播放 时 间 ， 单 位 为 秒 。 设 置 这 个 属性 将 使 媒体 元 素 跳 到 一 个 新 的 
播放 位 置 。 


double defaultPlaybackRate 
正常 播放 的 播放 速度 。 默 认 值 为 1.0。 


readonly double duration 


当前 媒体 的 时 长 ， 单 位 为 秒 。 如 果 长 度 未 知 〈 比 如 元 数据 还 没有 加 
载 ) ， 这 个 属性 将 为 NaN。 如 果 媒 体 为 一 个 不 确定 长 度 的 流 ， 则 这 个 
属性 将 为 Infinity。 

readonly boolean ended 

如 果 已 到 达 媒 体 的 结尾 则 本 属性 为 true 。 


readonly MediaError error 


发 生 错 误 时 会 设置 这 个 属性 ， 其 他 情况 下 它 为 null。 它 指 代 一 个 对 象 ， 
该 对 象 的 code 属 性 描述 错误 的 种 类 。 


readonly double initial Time 


初始 播放 位 置 ， 单 位 为 秒 。 这 个 属性 通常 为 0%， 但 有 些 媒 体 (比如 流 媒 
体 ) 可 能 有 不 同 的 起 点 。 


boolean loop 


如 果 为 true， 则 当前 媒体 元 素 将 在 每 次 到 达 结 尾 时 上 自动 重新 开始 。 本 属 
性 是 HTML loop 属 性 的 映射 。 


boolean muted 

指定 当前 音频 是 否 静 音 。 可 以 通过 设置 这 个 属性 来 让 一 段 音频 静音 或 
取消 静音 。 对 <video > 元 素 而 言 ， 可 以 用 一 个 audio="muted" 属 性 来 让 
媒体 默认 静音 。 


readonly unsigned short networkState 


当前 是 否 正在 加 载 媒体 数据 。 合 法 的 值 在 上 面 常量 部 分 列 出 了 。 


readonly boolean paused 
如 果 当 前 播放 暂停 了 则 此 属性 为 true 。 


double playbackRate 


当前 播放 速度 。1.0 是 正常 播放 。 如 有 果 值 大 于 1.0 表 示 快 进 。 值 在 0~1.0 
之 间 表 示 慢 放 。 如 果 值 小 于 0， 则 媒体 将 回放 。 (回放 时 ， 媒 体 总 是 处 
于 静音 状态 ， 同 时 ， 如 果 播 放 速 度 特别 快 或 特别 慢 也 将 静音 。) 
readonly TimeRanges played 

已 经 播放 的 时 间 范 围 。 

string preload 

这 个 属性 是 同名 的 HTML 属性 的 映射 ， 可 以 通过 它 设 置 在 用 户 请 求 媒体 
播放 之 前 ， 浏 览 器 应 该 获取 多 少 媒体 数据 。 值 "none" 表 示 不 需要 预 加 载 
数据 。 值 "metadata" 表 示 浏 虎 器 应 该 取得 媒体 的 元 数据 〈 例 如 时 间 长 
度 ) ， 但 不 用 获取 实际 的 数据 本 身 。 值 "auto" (或 者 空 字符 串 ， 如 果 设 


置 preload 属 性 但 是 没有 指定 值 ) 表示 一 旦 用 户 决 定 播放 该 媒体 ， 浏 览 
故 可 以 加 载 整个 媒体 资源 。 


readonly unsigned short readyState 


媒体 播放 的 准备 状态 ， 基 于 已 缓存 的 数据 的 数量 。 合 法 的 值 为 上 面 定 
义 的 以 HAVE 开头 的 常量 。 


readonly TimeRanges seekable 
可 设置 currentTime 的 时 间 范 围 。 播 放 简 单 媒体 文件 时 ， 这 个 值 一 般 为 0 


~duration 之 间 的 一 个 时 间 。 但 对 流 巡 体 而 言 ， 过 去 的 时 间 可 能 不 再 在 
缓存 中 ， 将 来 的 时 间 可 能 还 不 可 用 。 


readonly boolean seeking 


当 媒 体 元 素 正 在 切换 到 一 个 新 的 currentTime 播 放 位 置 时 ， 本 属性 为 
true。 如果 新 的 播放 位 置 已 经 在 缓存 中 ， 这 个 属性 将 只 有 很 短 的 一 段 时 
则 为 tr ue。 但 如 果 媒 体 元 到 必须 加 载 新 的 媒体 数据 的 话 ，seeking 将 保持 
true 状 态 一 段 较 长 的 时 间 。 


string src 


这 个 属性 是 巡 体 元 素 的 HTML src 属 性 的 映 映 。 通 过 设置 这 个 属性 ， 可 
证 媒体 元 素 加 载 新 的 媒体 数据 。 注 意 这 个 属性 和 currentSrc 不 一 样 。 


readonly Date startOffsetTime 


播放 时 间 为 0 的 位 置 对 应 的 真实 时 间 的 日 期 及 时 间 ， 如 果 媒 体 的 元 数据 
包含 这 个 信息 的 话 。 (比如 ， 视 频 文件 可 能 包含 录制 它 的 时 间 。) 


double volume 


这 个 属性 查询 或 设置 音频 播放 的 音量 。 它 的 值 应 该 在 0~1 之 间 。 也 可 
参见 muted 属 性 。 


事件 处 理 程序 


<audio> 和 <video> 标 签 定义 了 下 面 这 些 事 件 处 理 程序 ， 它 们 都 可 以 
作为 HTML 属 性 或 JavaScript 属 性 使 用 。 在 写作 本 书 时 ， 有 一 些 浏 览 器 
还 不 支持 这 些 属性 ， 需 要 使 用 addEventListener() (参见 EventTarget) 来 
注册 事件 处 理 程 序 。 媒 体 事 件 不 会 冒 泡 ， 也 没有 可 取消 的 默认 行为 。 
相关 的 事件 对 象 是 一 个 常规 的 Event 对 象 。 


事件 处 理 程序 


onabort 


oncanplay 


oncanplaythrough 


ondurationchange 


onemptied 
onended 


onerror 


onloadeddata 


onloadedmetadata 


onloadstart 
onpause 
onplay 
onplaying 


onprogress 


onratechange 
onseeked 


onseeking 


onstalled 
onsuspend 


ontimeupdate 


触发 条 件 


元 素 已 停止 加 载 数据 ， 一 般 是 基于 用 户 的 请 求 。error.code 为 
error .MEDIA_ERR_ABORTED 

已 加 载 了 足够 的 媒体 数据 ， 可 以 开始 播放 ， 不 过 可 能 需要 更 多 的 缓 促 
数据 


已 加 载 了 足够 的 媒体 数据 ， 媒 体 可 能 可 以 在 不 暂停 以 便 缓冲 更 多 数据 
的 情况 下 持续 播放 


duration 长 度 属性 已 改变 
一 个 错误 或 退出 导致 networkState 返 回 NETNORK_EMPTY 的 中 止 
由 于 已 到 达 媒 体 的 结尾 ， 播 放 终止 


网 络 连接 或 其 他 错误 阻止 媒体 数据 加 载 。error.code 为 一 个 不 是 
MEDIA_ERR_ABORTED 的 值 (参见 MediaError) 


当前 播放 位 置 的 数据 第 一 次 加 载 

媒体 的 元 数据 已 加 载 ， 媒 体 的 时 长 和 大 小 已 就 绪 

元 素 开 始 请 求 媒 体 数据 

pause() 方 法 被 调用 ， 播 放 已 暂停 

play() 方 法 被 调用 ， 或 者 autoplay 属 性 引发 了 相同 的 事件 
媒体 已 经 开始 播放 


网 络 活动 正在 继续 加 载 媒体 数据 。 一 般 每 秒 触发 2~ 8 次 。 注 意 ， 
与 这 个 事件 关联 的 对 象 是 一 个 简单 的 Event 对 象 ， 而 不 是 其 他 触发 
“progress” 事 件 的 API 中 使 用 的 ProgressEvent 对 象 


playbackRate 或 defaultPlaybackRate 已 改变 
seeking 属 性 已 改 回 false 


脚本 或 用 户 请 求 播放 跳 到 媒体 的 一 个 未 缓存 的 位 置 ， 正 在 加 载 数据 ， 
期 间 播放 将 停止 。seeking 属 性 为 true 


元 素 正 尝试 加 载 数据 ， 但 没有 数据 到 达 
元 素 已 缓存 了 足够 数据 ， 已 临时 停止 下 载 


currentTime 属 性 已 改变 。 在 正常 的 播放 过 程 中 ， 这 个 事件 每 秒 触 发 
4 一 60 次 


事件 处 理 程序 。 触发 条 件 

onvolumechange ”音量 (volume) 或 静音 (muted) 属性 已 改变 

onwaiting 由 于 没有 缓冲 足够 的 数据 ， 不 能 开始 播放 ， 或 者 播放 已 经 停止 。 当 
准备 好 足够 的 数据 时 ， 会 触发 一 个 播放 事件 


a2 

string canPlayType(string type) 

这 个 访问 询问 媒体 元 素 它 是 否 能 播放 指定 MIME type 的 媒体 。 如 采 播 放 

亏 确 定 不 能 播放 这 个 类 型 ， 写 将 返回 至 字符 串 。 如 条 它 认 为 目 己 可 以 
(但 不 确定 ) 播放 这 个 类 型 ， 它 将 返回 字符 串 "probably"。 媒 体 元 素 通 

尝 不 会 返回 "probably"， 除 非 type 包 含 一 个 列 出 指定 媒体 编码 的 codecs= 

人 参数。 如 采 媒 体 元 素 不 确定 它 是 否 可 以 播放 指定 type， 这 个 方法 将 返 
回 "maybe"。 

void load() 


这 个 方法 重 置 媒 体 元 素 ， 让 它 选 择 一 个 媒体 资源 并 开始 加 载 数 据 。 当 
媒体 元 素 首 先 插入 到 文档 中 ， 或 当 设置 了 它 的 src 属 性 时 ， 这 个 动作 会 
目 动 发 生 。 但 是 ， 如 果 添 加 、 移 除 或 修改 了 对 应 媒体 元 素 的 <source> 
子孙 元 素 ， 必 须 显 式 地 调用 load0 。 

void pause() 

暂停 媒体 的 播放 。 

void play() 

开始 播放 媒体 。 

MediaError 


<audio> 或 <video > 错误 


当 <audio> 或 <video> 标 签 上 发 生 错误 时 ， 将 触发 一 个 错误 事件 ， 对 
应 的 error 属 性 将 设置 为 一 个 MediaError 对 象 。 对 应 的 code 属 性 将 指明 发 
生 的 错误 的 类 型 ， 下 面 的 常量 定义 该 属性 可 能 的 值 。 


常量 

unsigned short MEDIA ERR ABORTED=1 

用 户 请 求 浏览 器 停止 加 载 媒 体 。 

unsigned Short MEDIA ERR_ NETWORK=2 

媒体 类 型 正确 ， 但 一 个 网 络 错误 阻止 它 的 加 载 。 

unsigned Short MEDIA ERR DECODE=3 

娩 体 类 型 正确 ， 但 一 个 编码 错误 阻止 它 的 解码 及 播放 。 

unsigned Short MEDIA ERR_ SRC_NOT_SUPPORTED=4 

由 src 属 性 指定 的 媒体 不 是 浏 蜗 郁 可 播放 的 类 型 。 

属性 

readonly unsigned short code 

这 个 属性 描述 发 生 的 媒体 错误 的 类 型 。 它 的 值 将 是 上 面 的 音量 之 一 。 
MessageChannel 

一 对 已 连接 的 MessagePorts 

MessageChannel 简 单 来 说 是 一 对 已 连接 的 MessagePort 对 象 。 在 任何 一 
方 上 调用 postMessage0 都 将 在 另 一 方 上 触发 一 个 消 轧 事件 。 如 采 想 用 
Window 或 Worker 线 程 建立 一 个 私有 的 通信 通道 ， 只 需要 创建 一 个 


MessageChannel 并 将 MessagePort 对 中 的 一 个 成 员 传 入 对 应 的 Window 或 
Worker (使 用 postMessage() 的 ports 参 数 ) 


MessageChannel 和 MessagePort 类 型 是 HTML5 的 高 级 特性 ， 在 写作 本 书 
的 时 候 ， 一 些 浏览 器 支持 跨 域 消息 ( 见 22.3 节 ) I ( 见 
22.4 节 ) ， 但 还 不 支持 MessagePort 类 型 的 私有 通信 通道 。 


构 千 函数 


new MessageChannel() 


这 个 不 带 参数 的 构造 画 数 返回 一 个 新 的 MessageChannel 对 象 。 
属性 
readonly MessagePort port1 


readonly MessagePort port2 


这 年 定义 了 通信 通道 的 两 个 已 连接 的 端口 。 两 者 是 对 称 的 : 为 代码 保 
留 某 一 个 或 另 一 个 ， 将 另 一 个 传 入 到 你 想 与 之 通信 的 Window 或 
Worker ° 


MessageEvent 
从 男 一 个 执行 上 下 文 来 的 消息 
人 


有 很 多 API 都 使 用 消息 事件 来 在 不 相关 的 执行 上 下 文中 实现 异步 通信 。 
Window、Worker、WebSocket、EventSource 以 及 MessagePort 对 象 都 定 
义 了 用 于 处 理 消 电 岂 事 件 的 onmessage 属 性 。 与 消 轧 事件 天 联 的 消 忌 可 以 
是 任意 能 像 22.2 和 描述 的 “结构 性 复制 ?那样 复制 的 JavaScript 值 。 消 息 将 
被 一 个 MessageEvent 对 象 包 半 起 来 ， 可 以 通过 data 属 性 访问 。 各 种 依赖 
消息 事件 的 API 也 在 MessageEvent 对 象 中 定义 一 些 人 额外 的 属性 。 消 忆 事 
件 不 会 冒 泡 ， 也 没有 可 取消 的 默认 行为 。 


属性 


readonly any data 


个 属性 保存 正在 发 送 的 消息 。data 可 以 是 能 通过 结构 化 复制 算法 ( 参 
站 2 节 的 “结构 性 复制 *”) 的 任意 类 型 : 这 包括 对 象 以 及 数组 这 样 的 核 
心 JavaScript 值 ， 但 不 包括 函数 。 尽管 Blob 和 ArrayBuffer 可 以 使 用 ， 但 
是 Document 和 Element 世 点 等 客户 端的 值 不 可 以 使 用 。 


readonly string lastEventld 


适用 于 EventSource ( 见 18.3 节 ) 上 的 消息 事件 ， 这 个 字段 包含 由 服务 器 
发 送 的 lastEventId 字 符 串 ， 如 果 存 在 的 话 。 


readonly string origin 


适用 于 EventSource 〈《 见 18.3 节 ) 或 Window ( 见 22.3 节 ) 上 的 消 轧 事 
件 ， 这 个 属性 包含 消 恩 发 送 者 的 原始 URL 。 


readonly MessagePort[ jports 


适用 于 Window 〈 见 22.3 节 ) 、Worker 〈 见 22.4 节 ) 或 MessagePort 上 的 
消息 事件 ， 如 果 在 对 应 的 postMessage() 的 调用 中 传 入 了 MessagePort 对 
象 ， 这 个 属性 将 以 数组 的 形式 包含 这 些 MessagePort 对 象 。 


readonly Window source 


适用 于 Window 〈 见 22.3 世 ) 上 的 消息 事件 ， 这 个 属性 指 代 消 息 发 送 自 
的 Window。 


MessagePort 
传递 异步 消息 
EventIarget 


MessagePort 用 于 事件 张 动 的 异步 消息 传递 ， 通 党 在 JavaScript 执 行 上 下 
文 之 中 ， 如 window 或 worker 线 程 。MessagePort 必 须 以 成 对 相连 的 形式 
使 用 : 参见 MessageChannel。 在 MessagePort 上 调用 postMessage() 将 在 与 
它 连 接 的 MessagePort 上 触发 一 个 消 轧 事件 。 跨 域 的 消 恩 API ( 见 22.3 
) 以 及 Web Worker ( 见 22.4 节 ) 也 使 用 postMessage() 方 法 和 消息 事件 
来 通信 。 这 些 API 实 际 上 使 用 的 是 隐 式 的 MessagePort 对 象 。 显 式 地 使 用 


MessageChannel 和 MessagePort 将 局 用 额外 的 私有 通信 通道 ， 例 如 ， 人 多 
许 在 两 个 兄弟 Worker 线 程 中 直接 通信 。 


MessageChannel 和 MessagePort 类 型 是 HTML5 的 高 级 特性 ， 在 写作 本 书 
的 上 时候， 一 些 浏览 器 支持 跨 域 消息 ( 见 22.3 季 ) 以 及 worker 线 程 ( 见 
22.4 节 ) ， 但 不 支持 MessagePort 类 型 的 私有 通信 通道 。 


方法 
void closel() 


这 个 方法 将 MessagePort 从 它 已 连接 的 端口 (如 果 有 的 话 ) 断 开 。 之 后 
继续 调用 postMessage() 将 没有 效果 ， 并 且 将 不 再 发 送 消 居 事 件 。 

void postMessage(any message,[MessagePort[]ports]) 

通过 指定 疹 口 发 送 指定 的 message 的 一 个 副本 ， 并 将 它 以 消息 事件 的 格 
式 发 送 到 它 已 连接 的 端口 。 如 采 指 定 了 ports， 也 将 它们 当做 消息 的 一 
部 分 一 起 发 送 。message 可 以 是 适用 结构 性 复制 算法 〈“ 结 构 性 复制 ”， 
见 22.2 节 ) 的 任意 值 。 

void start() 

这 个 方法 将 让 MessagePort 开 始 触发 消 思 事件。 在 这 个 方法 调用 之 前 ， 
任何 通过 器 口 发 送 的 数据 都 处 于 绥 存 中 。 这 样 延 述 消 晨 的 方式 允许 肢 
本 在 发 送 消 息 之 前 先 注册 好 所 有 事件 处 理 程 序 。 注 意 ， 只 有 在 使 用 


EventTarget 方 法 addEventListener0 时 才 需 要 调用 这 个 方法 。 如 果 只 是 简 
单 地 设置 onmessage 属 性 ，start0 将 隐 式 地 调用 。 


事件 处 理 程 序 
onmessage 


这 个 属性 定义 一 个 适用 于 消息 事件 的 事件 处 理 程序 。 消 息 事 件 由 
MessagePort 对 象 触 发 ， 它 们 不 会 冒 泡 ， 也 没有 默认 行为 。 注 意 ， 设 置 
这 个 属性 将 调用 start() 方 法 开始 请 奶 事 件 的 发 送 。 


Meter 


图 形 标尺 或 计量 恬 
Node 、Element 


Meter 对 和 象 表 未 HTML < meter>> 元 素 ， 以 图 形 化 的 表示 方式 显示 可 能 的 
值 中 的 范围 ， 这 个 范围 可 以 标注 区 域 为 低 、 适 合 以 及 高 。 


这 个 对 象 的 大 部 分 属性 简单 地 映射 了 同名 的 HTML 属 性 。JavaScript 属 
性 为 数 子 ， 虽然 对 应 的 HTML 属 性 为 子 符 串 。 


<meter> 是 一 个 HTML5 元 素 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 地 支 
持 。 


属性 
readonly Form form 


当前 元 素 的 祖先 Form 元 素 ， 或 者 由 HTMLform 属 性 指定 的 Form 元 素 ， 
如 果 存 在 的 话 。 


double high 


0 则 表示 high 和 max 之 间 值 的 属性 应 该 图 形 化 地 表示 
为 "high" 。 


readonly NodeList labels 
由 与 当前 元 素 关 联 的 Label 元 素 组 成 的 类 数组 对 象 。 


double low 
如 有 果 指 定 ， 则 表示 min 和 low 之 同 值 的 属性 应 该 图 形 化 地 表示 为 "low"。 
double max 


当前 <meter> 可 显示 的 最 大 值 。 默 认为 1 。 


double min 


当前 <meter> 可 显示 的 最 小 值 。 默 认为 0 。 


double optimum 

如 果 指 是， 这 个 值 将 被 认为 是 最 佳 值 。 

double value 

当前 <meter> 表示 的 值 。 

MouseEvent 

参见 Event 

Navigator 

天 于 Web 浏 多 如 的 信息 

Navigator 对 象 包含 一 些 描 述 正在 其 中 运行 代码 的 Web 浏 览 右 的 属性 。 可 
以 使 用 这 些 属性 来 实现 对 特定 平台 的 定制 。 这 个 对 象 的 名 字 是 对 
Netscape Navigator 浏 览 右 的 引用 ， 但 所 有 浏览 圳 都 文 持 它 。Navigator 


对 象 只 有 一 个 实例 ， 可 以 通过 任意 Window 对 象 的 navigator 属 性 引用 
它 o 


历史 上 ，Navigator 对 象 曾 用 于 “客户 端 串 探 "， 对 不 同 的 浏览 器 运行 不 
同 的 代码 。 例 14-3 显 示 了 这 种 用 途 的 一 个 简单 方法 ，14.4 丰 中 接 下 来 的 
文字 描述 了 依赖 Navigator 对 象 的 缺陷 。 跨 浏览 器 兼容 的 更 好 的 方法 在 
13.4.3 广 有 描述 。 


属性 


readonly string appName 


浏览 器 的 名 字 。 对 基于 Netscape 的 浏览 器 而 言 ， 这 个 属性 的 值 
为 "Netscape"。 在 IE 中 ， 这 个 属性 的 值 为 "Microsoft Internet Explorer" 。 
为 了 兼容 现 有 的 代码 ， 许 多 浏 贤 器 返回 较 老 的 或 欺 驴 性 的 信息 。 


readonly string appVersion 


浏览 器 版 本 及 平台 信息 。 为 了 兼容 现 有 的 代码 ， 大 多 数 浏览 器 对 于 这 
个 属性 返回 过 时 的 旧 值 。 


readonly Geolocation geolocation 


当前 浏览 器 的 Geolocation 对 象 的 一 个 引用 。 该 对 象 的 方法 允许 脚本 请 
求 用 户 的 当前 地 理 位 置信 息 。 


readonly boolean onLine 


如 果 浏 览 右 不 会 从 网 络 上 下 载 任何 东西 ， 则 这 个 属性 为 false。 这 可 能 
是 因为 浏览 絮 确 信 计 算 机 当前 没有 连接 到 网 络 ， 或 者 用 户 将 浏览 器 设 
置 为 无 网 络 状 态 。 如 果 浏 览 器 将 尝试 下 载 (因为 计算 机 可 能 在 线 ) ， 
这 个 属性 将 为 tue。 当 这 个 属性 的 状态 改变 时 ， 浏 贤 右 将 在 Window 对 
象 上 触发 online 和 offline 事 件 。 


readonly string platform 


运行 当前 浏览 器 的 操作 系统 以 及 /或 硬件 平台 。 这 个 属性 没有 标准 的 值 
集合 ， 不 过 一 些 典 型 的 值 是 "Win32"、"MacPPC" 以 及 "Linux i586" 。 


readonly string userAgent 


浏 蚁 器 用 于 HTTP 请 求 的 user-agent 头 信息 的 值 。 例 如 : 


Mozilla/5.0(X11;U;Linux i686;en-US) 
ApplewebKit/534.16(KHTML, like Gecko) 
Chrome/10.0.648.45 


Safari/534.16 


方法 
void registerContentHandler(string mimeType,string url,string title) 


这 个 方法 作为 处 理 程序 请 求 指定 url 的 注册 方式 显示 指定 mimeType 的 内 
容 。title 十 一 个 可 供 人 阅读 的 丫 反 标题 ， 浏 览 右 可 能 会 同 用 户 显 示 。unl 
参数 必须 包含 字符 串 "9%s"。 当 这 个 内 容 处 理 程序 用 于 处 理 指定 


mimeType 的 网 页 时 ， 该 网 页 的 URL 将 编码 并 插入 到 url 的 "%s" 的 位 置 ， 
然后 浏览 器 将 访问 这 个 生成 的 URL。 这 是 HTML5 的 一 个 新 属性 ， 可 能 
有 些 浏览 万 还 未 实现 。 


void registerProtocolHandler(string Scheme,string url,string title) 


这 个 方法 类 似 于 registerContentHandler()， 但 和 它 将 一 个 网 站 注册 为 用 做 
URL 协 议 scheme 的 处 理 程序 。scheme 应 该 是 一 个 类 似 "mailto" 或 "sms" 的 
不 带 冒 号 的 字符 串 。 这 是 HTML5 的 一 个 新 属性 ， 可 能 有 些 浏览 器 还 未 
实现 。 


void yieldForStorageUpdates() 


使 用 Document.cookie 或 Window.localStorage 或 Window.sessionStorage 
(参见 Storage 及 第 20 章 ) 的 脚本 无 法 知道 同时 运行 在 其 他 窗口 中 的 
〈( 同 源 ) 脚本 对 存储 的 改变 。 浏 览 器 可 以 (虽然 在 写作 本 书 时 ， 还 不 

是 所 有 浏览 器 都 可 以 ) 用 类 似 数据 库 的 锁 机 制 来 阻止 同时 更 新 。 在 文 

持 这 种 机 制 的 浏览 右 中 ， 这 个 方法 将 显示 地 释放 锁 ， 并 且 可 能 消除 其 

他 窗口 中 同时 运行 的 脚本 的 阻塞 。 调 用 这 个 方法 后 ， 检 索 到 的 存储 的 

值 可 能 与 调用 它 之 前 的 值 不 一 样 。 


Node 


文档 树 上 的 所 有 对 象 (包括 Document 对 象 本 身 ) 都 实现 Node 接 口 ， 这 
些 接 口 提供 了 遍历 及 操作 这 个 树 的 基本 属性 和 方法 。parentNode 属 性 和 
childNodes[] 数 组 允许 在 这 个 文档 树 中 上 下 移动 。 枚 举 给 定 和 点 的 方式 
有 两 种 ， 明 历 childNodes[] 的 元 素 ， 或 者 使 用 firstChild 和 nextSibling 属 性 

(或 lastChild 及 previousSibling 属 性 ， 用 于 反 向 循环 ) 。appendChild0 、 
insertBefore()、removeChild() 以 及 replaceChild0) 方 法 允许 通过 改变 一 个 
节点 的 子 节 点 的 方式 修改 文档 树 。 


文档 树 中 的 每 个 对 象 都 同时 实现 了 Node 接 口 和 一 个 更 专业 化 的 子 接 
口 ， 比 如 Element 或 Text。nodeType 属 性 指明 一 个 节点 实现 的 是 哪 种 子 
接口 。 可 以 在 使 用 更 专业 化 的 接口 的 属性 和 方法 之 前 ， 先 用 这 个 属性 
测试 万 点 的 类 型 。 例 如 : 


党 


的 节点 


var n;// 保 存 当 前 正在 使 


if(n.nodeType==1){// 也 可 以 使 用 常量 Node .ELEMENT_NODE 


var tagname=n.,tagName;// 如 果 节 点 是 一 个 Element， 这 个 值 将 是 它 的 标签 名 


} 


1 = 多 


吊 蛙 

unsigned Short ELEMENT_NODE=1 

unsigned Short TEXT_NODE=3 

unsigned short PROCESSING INSTRUCTION_NODE=7 

unsigned Short COMMENT_NODE=8 

unsigned short DOCUMENT_NODE=9 

unsigned Short DOCUMENT_TYPE_NODE=10 

unsigned short DOCUMENT_FRAGMENT_NODE=11 

这 些 常 量 是 nodeType 属 性 可 能 的 值 。 注 意 ， 它 们 是 Node0 构 造 男 数 的 静 
态 属性 ， 不 是 个 别 Node 对 象 的 属性 。 也 要 注意 ， 在 IE8 及 更 早 的 版 本 中 
ee 定义 。 如 果 需 要 兼容 ， 可 以 将 这 些 值 醒 编码 ， 或 者 定义 目 己 


unsigned short DOCUMENT_POSIIION_DISCONNECTED=0x01 


unsigned short DOCUMENT_POSIIION_PRECEDING=Ox02 
unsigned Short DOCUMENT_POSITION_FOLLOWING=0x04 
unsigned short DOCUMENT_POSIIION_CONTAINS=0x08 
unsigned short DOCUMENT_POSITION_ CONTAINED BY=0x10 


这 些 和 常量 定义 compareDocumentPosition() 的 返回 值 中 的 位 ， 可 能 为 on 或 
off 。 


属性 
readonly string baseURI 


个 属性 指定 本 Node 的 基准 URL， 相 对 URL 将 基于 这 个 基准 URL 进 行 
解析 。 对 HTML 文 档 中 的 所 有 节点 来 说 ， 这 是 由 文档 的 <base> 元 素 定 
义 的 URL， 或 仅仅 是 移 除 了 片断 标识 符 的 Document.URL 。 
readonly NodeList childNodes 


个 属性 为 一 个 类 数组 对 象 ， 包 含 当前 节点 的 子 节 点 。 这 个 属性 永远 
会 为 nul 1 对 没有 子 节 点 的 和 点 而 言 ，childNodes 是 一 个 langth 为 0 的 
数组 。 注意 ，NodeList 对 象 是 实时 的 ， 对 本 元 素 的 子 节 点 列表 的 任何 改 
变 都 将 立即 在 NodeList 中 可 见 
readonly Node frstChild 
当前 世上 点 的 第 一 个 子 节 点， 如 果 当 前 下 点 没有 子 季 点 则 为 null 。 
readonly Node lastChild 


当前 节点 的 最 后 一 个 子 节 后， 如 果 当 前 节点 没有 子玉 点 则 为 null。 


readonly Node nextSibling 


parentNode 的 childNodes[] 数 组 中 紧 跟 着 当前 和 点 的 兄弟 点 ， 如 果 没 有 
对 应 的 斑点 则 为 null。 


readonly string nodeName 


斑点 的 名 字 。 对 ElementT 点 而 言 ， 值 为 元 了 素 的 标签 名 ， 也 可 以 通过 
Element 接 口 的 tagName 属 性 得 到 。 对 大 多 数 其 他 类 型 的 和 点 而 言 ， 该 
值 为 一 个 取决 于 点 类 型 的 前 量 字符 绅 。 


readonly unsigned short nodeType 


点 的 类 型 ， 即 ， 当 前 节点 实现 了 哪个 子 接口 。 合 法 的 值 为 上 面 列 出 
的 常量 。 由 于 这 些 常 量 不 被 Internet Explorer 文 持 ， 人 而 ， 可 能 得 用 硬 编 
码 的 值 来 替代 对 应 的 常量 。 在 HITML 文 档 中 ， 这 这 个 属 性 常用 的 值 为 : 


Element 记 点 为 1，TextT 点 为 3，CommentT 点 为 8， 以 及 唯一 的 顶级 
Document 有 点 为 9 。 


string nodeValue 
节点 的 值 。 对 Text 节 扣 而 言 ， 它 的 值 为 对 应 的 文本 内 容 。 
readonly Document ownerDocument 


与 当前 节点 关联 的 Document 对 象 。 对 DocumentT 点 而 言 ， 这 个 属性 为 
null。 注 意 ， 即 使 一 个 节点 还 没有 插入 到 文档 中 ， 它 仍然 具有 owner 。 


readonly Node parentNode 


当前 节点 的 父 节 点 (或 容器 节点 ， 如 果 没 有 父 市 点 则 为 null。 注 意 ， 
Document 和 DocumentFragment 世 点 永远 没有 父 蔬 点。 同样 地 ， 对 于 已 
经 从 文档 中 删除 的 节点 ， 或 者 新 创建 并 且 还 没有 插入 到 文档 树 中 的 节 
点 ，parentNode 值 为 null 。 


readonly Node previousSibling 


parentNode 的 childNodes[] 数 组 中 在 当前 节点 前 方 并 与 当前 和 点 相 邻 的 兄 
第 节点 ， 如 果 没 有 对 应 的 节点 则 为 null。 


string textContent 


对 Text 和 Comment 廊 点 而 言 ， 这 个 属性 只 是 data 属 性 的 一 个 同义词 。 对 
Element 和 DocumentFragment 闻 点 而 言 ， 查 询 这 个 属性 将 返回 所 有 子孙 
Text 广 点 拼接 的 文本 内 容 。 设 置 Element 或 DocumentFragment 的 这 个 属 
性 业 角 次 访 元素 或 全 让 的 所 有 子孙 和 点 为 单个 内 容 为 指定 值 隐 Text 玫 
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方 状 
Node appendChild(Node newChild) 
这 个 方法 将 万 点 newChild 添 加 到 文档 中 ， 将 它 作 为 当前 和 点 的 最 后 一 


个 子 世 点 插入 。 如 有 果 newChild 已 经 在 文档 树 中 ， 它 将 移 从 文档 树 中 移 
除 ， 再 揪 入 到 新 的 位 置 。 如 果 newChild 是 一 个 DocumentFragment ( 文 


档 碎 片 ) 节点 ， 它 将 不 会 插入 它 本 身 ， 而 是 将 它 的 子 节 点 按 顺 序 追 加 
到 当前 节点 的 childNodes[] 数 组 后 面 。 注 意 ， 来 自 (或 创建 于 ) 一 个 文 
档 的 节点 不 能 插入 到 男 一 个 文档 中 。 这 束 古 说 ，newChild 的 
ownerDocument 属 性 必须 与 当前 节点 的 ownerDocument 属 性 一 致 。 ( 参 
见 Document.adoptNode()) 。 这 个 方法 返回 传 入 的 Node。 


Node cloneNode(boolean deep) 


在 世上 点 上 调用 cloneNode0) 方 法 将 返回 这 个 节点 的 一 份 副 本 。 如 果 传 入 
参数 true， 这 个 节点 的 子孙 节点 也 将 递归 地 复制 。 否 则 ， 它 只 复制 这 个 
节点 而 忽略 它 的 子 节 点 。 返 回 的 节点 不 是 文档 树 的 一 部 分 ， 它 们 的 
parentNode 属 性 为 null。 当 复制 一 个 Element 节 点 时 ， 它 的 所 有 属性 也 会 
复制 。 不 过 要 注意 ， 注 册 在 节点 上 的 事件 监听 函数 不 会 复制 。 


unsigned short compareDocumentPosition(Node other) 


这 个 方法 比较 当前 节点 与 指定 的 other 节点 在 文档 中 的 位 置 ， 并 返回 一 
个 数字 ， 这 个 数字 的 置 位 (set bit) 情况 描述 了 两 个 节点 的 关系 。 如 果 
两 个 节点 相同 ， 将 没有 位 置 位 ， 这 个 方法 返回 0。 否则 ， 返 回 值 的 一 个 
或 多 个 位 将 置 位 。 上 面 列 出 的 DOCUMENT_POSITION 常量 给 出 了 每 
一 位 的 符号 名 ， 各 项 含义 如 下 : 


DOCUMENT_POSITION _ 
DISCONNECTED 


PRECEDING 
FOLLOWING 
CONTAINS 


CONTAINED BY 


boolean hasChildNodes() 


值 


0X01 


0X02 
0X04 


0x08 


0x10 


宫 义 

这 两 个 节点 不 在 同一 个 文档 中 ， 所 以 它们 的 位 置 
无 法 比较 

Other 节点 出 现在 当前 节点 之 前 

Other 节点 出 现在 当前 书 点 之 后 

Other 节点 包含 当前 节点 。 当 该 位 置 位 时 ， 
PRECEDING 位 也 总 是 置 位 

当前 节点 包含 的 other 节 点 。， 当 该 位 置 位 时 ， 
FOLLOWING 位 也 总 是 置 位 


如 和 当前 斑点 有 一 个 或 多 个 子 世 点 则 返回 true; 如 采 不 包含 入 总则 返回 


false。 


Node insertBefore(Node newChild,Node refChild) 


这 个 方法 将 节点 newChild 作 为 当前 节点 的 子 广 点 插入 到 文档 树 中 ， 并 
返回 这 个 插入 的 点。 新 节点 将 添加 到 当前 世上 点 的 childNodes[D] 数 组 
中 ， 以 便 它 立即 出 现在 refChild 节 点 前 面 。 如 果 refChild 为 nu]l， 
newChild 将 搬入 到 childNodes[] 的 结尾 ， 和 appendChild0) 方 法 一 样 。 注 
意 ， 不 能 通过 不 是 当前 节点 的 子 节点 的 refChild 调 用 这 个 方法 。 


如 有 果 newChild 已 经 在 文档 树 中 了 ， 它 将 先 从 文档 树 中 移 除 ， 再 重新 插 
入 到 新 的 位 置 。 如 果 newChild 是 一 个 DocumentFragment 节 点 ， 插 入 的 
而 是 它 的 所 有 子 方 点 将 按 顺 序 插入 到 指定 的 位 


boolean isDefaultNamespace(string namespace) 


如 果 指 定 的 namespace URL 和 由 lookupNamespaceURI(null) 返 回 的 默认 
命名 空间 URL 一 样 ， 则 返回 true;， 否则 返回 false。 


boolean isEqual Node(Node other) 


如 朱 当 前 斑点 和 otherT 点 完全 相同 则 返回 tue， 包 括 相 同 的 类 型 、 标 俭 
名 、 属 性 以 及 递归 的 ) 子 节 点 。 如 果 两 个 节点 不 相同 则 返回 false 。 


boolean isSameNode(Node other) 


如 和 当前 节点 和 otherT 点 是 同一 个 下 点 则 返回 true; 否则 返回 false。 也 
可 以 商 单 地 使 用 “==” 损 作 符 。 


string lookupNamespaceURI(string prefx) 


这 个 方法 返回 与 指定 命名 空间 prefix 关 联 的 命名 空间 URL， 如 果 不 存在 
则 返回 null。 如 果 prefx 为 null， 则 返回 默认 命名 空间 的 URL 。 


string lookupPrefx(string namespace) 


这 个 方法 返回 与 指定 namespace URL 关 联 的 命名 空间 前 级 ， 如 果 不 存 在 
则 返回 null 。 


void normalize() 


这 个 方法 通过 合并 相 邻 节点 以 及 移 除 空 节点 的 方式 ， 让 当前 节点 的 文 
本 子孙 节点 标准 化 。 文 档 一 般 不 会 有 空 的 或 相 邻 的 文本 节点 ， 但 在 肢 
本 添加 或 移 除 节 点 时 这 种 情况 有 可 能 出 现 。 

Node removeChild(Node oldChild) 

这 个 方法 从 当前 市 点 的 childNodes[] 数 组 中 移 除 oldChild。 如 果 在 一 个 市 
点 上 调用 这 个 方法 ， 但 传 入 的 节点 不 是 它 的 子 市 点 将 会 出 错 。 
removeChild0 在 移 除 oldChild 节 点 后 将 返回 这 个 丰 点 。oldChild 仍 然 是 
一 个 有 效 的 节点 ， 可 以 在 稍 后 重新 插入 到 文档 中 。 


Node replaceChild(Node newChild,Node oldChild) 


这 个 方法 使 用 newChild 替 换 oldChild， 并 返回 oldChild。oldChild 必 须 是 
当前 节点 的 一 个 子 节点 。 如 果 newChild 已 经 是 当前 文档 的 一 部 分 ， 它 
将 先 从 文档 中 移 除 ， 再 重新 插入 到 新 的 位 置 。 如 果 newChild 是 一 个 
DocumentFragment， 插 入 的 将 不 是 这 个 节点 本 导 ， 而 是 它 的 子 世 点 将 
按 顺 序 插 入 到 原来 由 oldChild 占 据 的 位 置 。 


NodeList 
由 Node 组 成 的 只 读 的 类 数组 对 象 


NodeList 是 一 个 只 读 的 类 数组 对 象 ， 其 元 素 为 Node 对 象 (通常 为 
Element) 。 它 的 length 属 性 指明 这 个 列表 包含 多 少 节点 ， 可 通过 索引 0 
~length-1 来 笛 历 这 些 世 点 。 也 可 以 传 入 期 望 鸭 索引 到 item(0) 方 法 来 代替 
直接 检索 NodeList。NodeList 的 元 素 总 是 有 效 的 Node 对 象 ， 也 就 是 说 ， 
NodeList 绝 对 不 会 包含 null 元 素 。 


NodeList 很 钟 用 ， 例 如 ，Node 的 childNodes 属 性 ， 
Document.getElementsByTagName() 、 Element.getElementsByTagNamel() 
以 及 HTMLDocument.getElementsByName0) 方 法 的 返回 值 都 是 
NodeList。NodeList 征 类 数组 对 象 ， 但 是 ， 我 们 经 党 非 正 式 地 将 它们 当 
做 数组 来 引用 ， 用 到 的 语句 类 似 “childNodes[] 数 组 ”。 


需要 注意 ，NodeList 对 象 通常 是 实时 的 :它们 不 是 静态 快照 ， 而 会 实时 
反映 出 文档 树 的 改变 。 例 如 ， 如 果 有 一 个 代表 指定 节点 的 子 太 点 的 
NodeList， 然 后 删除 其 中 一 个 子 节 点 ， 则 该 子 太 点 也 会 从 NodeList 中 移 
除 。 在 遍历 一 个 NodeList 的 元 素 时 要 小 心 : 人 循环 体 中 的 代码 可 能 会 改变 
文档 树 (比如 删除 节点 ) ， 这 可 能 会 影响 到 NodeList 的 内 容 ! 


属性 


readonly unsigned long length 

当前 NodeList 中 的 市 点 的 数目 。 
方法 

Node item(unsigned long index) 


返回 指定 index 位 置 的 Node， 如 果 索 引 超 出 范围 则 返回 null。 


Option 
Select 元 际 中 的 <option> 
Node 、Element 


Option 对 ee 个 对 象 的 属性 指明 它 
征 否 默认 人选 中， 是 否 当 前 处 于 选中 状态 ， 人 关中 oe 对象 了 
options[] 孝 组 中 的 位 置 它 显 示 的 文本 ， 以 及 如 采 它 家 选中 ， 提 区 包 

的 表单 时 它 传 给 服务 器 的 值 。 


由 于 历史 原 Option 元 素 定 义 了 一 个 构造 函数 ， 可 以 用 它 来 创建 及 初 

台 化 新 的 Option 元 素 。 (当然 ， 也 可 以 使 用 普通 的 
Document.createElement() 方 法 。 一 旦 创建 新 的 OBO 3 它 束 可 以 
追加 到 某 个 Select 对 象 的 options 集 。 细 市 可 参见 
HTMLOptionsCollection ° 


构造 函数 
new Option([string text,string value,boolean defaultSelected,boolean selected]) 


Option0 构 造 函 数 可 创建 一 个 <option > 元 素 。4 个 可 选 参数 定义 了 元 素 
的 textContent (参见 Node) 、value 的 初始 值 、defaultSelected 以 及 选中 
selected 属 性 。 


属性 
boolean defaultSelected 


文 个 属性 对 应 HTML selected 属 性 。 它 定义 当前 选项 的 初始 选中 状态 ， 
当 表 单 重 置 时 也 会 使 用 这 个 值 。 


boolean disabled 


如 果 当 前 选项 禁用 则 为 tue。 如 果 Option 或 包含 它们 的 < optgroup > 有 
HTML disabled 属 性 的 话 ， 它 们 将 禁用 。 


readonly Form form 
当前 Option 元 素 所 属 的 <form > 元 素 ， 如 果 存 在 的 话 。 
readonly long index 


当前 Option 元 素 在 它 包含 的 Select 元 素 中 的 索引 。 (该 属性 的 相关 内 容 
也 可 参见 HTMLOptionsCollection) 。 


string label 


如 果 存 在 对 应 的 HTML label 属 性 鬼话 ， 返 回 这 个 属性 的 值 ; 否则 返回 
当前 Option 的 textContent (参见 Node) 。 


boolean selected 
如 果 本 选项 当前 处 于 选中 状态 则 为 tue; 否则 为 false。 
string text 


sh ye (参见 Node) ， 返 回 的 值 头 尾 的 空白 字符 
都 已 去 挥 ， 同 时 两 个 或 多 个 连续 的 空格 也 会 蕉 换 为 一 个 空格 。 


string value 


如 果 Option 存 在 HTML value 属 性 的 话 ， 返 回 这 个 属性 的 值 ， 否 则 返回 
当前 元 素 的 textContent 。 


Outpnut 
HTML 表 单 < output > 元 素 


Node、Element、FormControl 


Output 对 象 表示 HTML 表 单 中 的 < output> 元 素 。 在 文 持 它 的 浏 贤 
中 ，Output 对 象 实 现 FormControl 的 大 多 数 属 性 。 


属性 


string defaultValue 


这 个 属性 是 Output 元 素 的 textContent (参见 Node) 的 初始 值 。 当 表单 重 
置 时 ， 它 的 值 将 恢复 为 这 个 值 。 如 果 设 置 了 这 个 属性 ， 并 且 对 应 的 
Output 元 素 当 前 正在 显示 它 之 前 的 defaultValue， 则 新 的 值 将 显示 。 否 
则 ， 当 前 显示 的 值 将 不 会 改变 。 


readonly DOMSettableTokenList htmlFor 


<output> 元素 的 HTML for 属 性 是 一 个 空格 分 隔 的 由 元 聂 的 ID 组 成 的 列 
表 ， 这 些 元 素 的 值 都 会 影响 这 个 < output > 元素 显 示 的 计算 内 容 。 因 为 
for 是 JavaScript 的 一 个 保留 词 ， 所 以 对 应 的 JavaScript 属 性 名 为 htmlFor 。 
可 以 像 一 个 普通 字符 串 值 一 样 对 这 个 属性 进行 读 写 操作 ， 或 者 使 用 
DOMTokenList 的 方法 来 从 这 个 列表 查询 并 设置 单个 元 素 ID。 


PageTransitionEvent 
pageshow 和 pagehide 事 件 的 事件 对 象 
Event 


当 一 个 文档 下 次 加 载 时 ， 在 load 事 件 之 后 ， 浏 贤 级 将 触发 一 个 pageshow 
事件 ， 之 后 ， 每 次 这 个 页 面 从 内 存 历史 缓存 中 恢复 时 都 会 触发 一 个 新 
的 pageshow 事 件 。PageTransitionEvent 对 象 与 每 个 pageshow 事 件 关联 ， 
当 恢 复 而 不 是 加 载 或 重新 加 载 页 面 时 ， 这 个 对 象 的 persisted 属 性 将 为 


true ° 


pagehide 事 件 也 有 一 个 关联 的 PageTransitionEvent 对 象 ， 不 过 对 pagehide 
事件 而 言 对 应 的 persisted 属 性 总 是 为 true。 


pageshow 和 pagehide 事 件 在 Window 对 象 上 触发 。 它 们 不 冒 泡 ， 也 没有 
可 取消 的 默认 行为 。 


属性 


readonly boolean persisted 


对 pageshow 事 件 来 说 ， 当 从 网 络 或 硬盘 绥 存 加 载 (或 重新 加 载 ) 页 面 
时 ， 这 个 属性 为 false。 如 有 果 目 内 存 缓存 恢复 正在 显示 的 页 面 并 且 没 有 
重新 加 载 ， 则 这 个 属性 为 true。 


对 pagehide 事 件 来 说 ， 这 个 属性 总 是 为 true。 
PopStateEvent 
历史 转换 事件 


Event 


管理 自身 的 历史 (参见 22.2 广 ) 的 Web 应 用 程序 可 使 用 History 的 
pushState() 方 法 来 在 浏览 历史 中 创建 一 个 新 的 条 目 ， 并 将 一 个 状态 值 或 
对 象 与 之 关联 。 当 用 户 使 用 浏览 器 的 “后 退 * 或 “前 进 ” 按 钮 在 这 些 保存 的 
状态 之 间 导 航 时 ， 浏 览 器 将 在 window 对 象 上 触发 一 个 popstate 事 件 ， 并 
传 入 关联 的 PopStateEvent 对 象 中 已 保存 的 应 用 状态 的 一 个 副本 。 


属性 


readonly any state 


这 个 属性 保存 传 入 到 History.pushState() 或 History.replaceState() 方 法 中 的 
状态 值 或 对 象 的 一 个 副本 。state 可 以 是 任意 能 用 结构 复制 算法 ( 参 

见 “ 结 构 性 复制 "，22.2 节 ) 克隆 的 值 。 

Processinglnstruction 

XML 文 档 中 的 进度 指示 

Node 


这 个 不 常用 的 接口 表示 XML 文 档 中 的 处 理 指令 (Processing 
Instruction，PI) 。 使 用 HTML 文 档 的 程序 员 永 远 不 会 遇 到 


ProcessingInstruction 世 点 。 
属性 
string data 


处 理 指令 的 内 容 ( 即 ， 目 标 之 后 的 第 一 个 非 空 字 符 ， 直 到 但 不 包括 结 
尾 的 中 >?) 


readonly string target 


处 理 指令 的 目标 。 这 是 紧 跟 着 开头 的 <<?” 的 第 一 个 标识 符 ， 它 指定 当 
前 处 理 指令 的 目标 “处 理 器 ”。 


Progress 
进度 条 
Node 、Element 


Progress 对 象 表示 一 个 HIML < progress> 元素 ， 以 进度 条 的 一 个 图 形 化 
表示 方式 ， 显 示 某 种 任务 的 完成 度 。 


如 果 完 成 这 项 任务 所 需 的 工作 的 数量 或 时 间 未 知 ， 则 Progress 元 素 将 处 
于 不 确定 状态 。 在 这 种 状态 下 ， 它 只 是 简单 地 显示 某 种 “工作 ”动画 ， 
表示 有 些 事 正在 发 生 。 如 果 任 务 的 总 数 〈 或 时 间 、 字 节 ) 以 及 已 完成 
数量 都 已 知 ， 则 Progress 元 素 将 处 于 一 种 确定 状态 ， 可 以 以 某 种 图 形 化 
的 完成 百分比 的 形式 显示 进度 。 


<<progress> 是 一 个 HTML5 元 素 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 地 文 
持 。 


属性 
readonly Form form 


当前 元 下 对 应 的 Form 元 素 ， 如 果 存 在 的 话 ， 这 个 Form 一 般 为 当前 元 素 
的 祖先 ， 或 者 由 HTML form 属 性 标识 。 


readonly NodeList labels 

与 当前 元 素 关 联 的 Label 元 素 组 成 的 类 数组 对 象 。 

double max 

要 完成 的 工作 的 总 数 。 比 如 ， 在 使 用 Progress 元 素来 显示 一 个 


XMLHttpRequest 的 上 传 或 下 载 进 度 时 ， 可 以 将 这 个 属性 设置 为 要 传输 
的 总 的 字 节 数 。 这 个 属性 是 max 属 性 的 映射 。 默 认 值 为 1.0。 


readonly double position 


如 末 这 是 一 个 进度 可 确定 的 Progress 元 素 ， 这 个 属性 为 value/max 的 计算 
结果 。 否 则 ， 这 个 属性 将 是 -1。 


double value 


0~max 之 同 的 一 个 值 ， 标 识 已 经 完成 的 进度 。 这 个 属性 是 value 属 性 的 
映射 。 如 果 存 在 这 个 属性 ， 表 示 该 Progress 元 素 的 进度 可 确定 。 如 果 它 
不 存在 ， 则 表示 该 Progress 元 素 的 进度 不 可 人 确定。 如 果 想 从 进度 可 确定 
模式 切换 为 进度 不 可 确定 模式 (比如 由 于 来 自 MediaElement 的 停 浪 事 
件 ) ， 可 以 使 用 Element 的 removeAttribute() 方 法 。 


ProgressEvent 
下 载 、 上 传 或 文件 读 取 进度 
Event 


ApplicationCache、FileReader 以 及 (第 2 级 ) XMLHttpRequest 对 象 都 会 
触发 Progress 事 件 ， 通 知 感 兴趣 的 程序 的 数据 传输 过 程 的 进度 (比如 ， 
网 络 下 载 或 上 传 或 文件 读 取 ) 。 这 类 事件 一 般 称 为 Progress 事 件 ， 但 实 
际 上 只 有 一 个 这 样 的 事件 真 的 在 名 字 里 有 "progress"。 其 他 由 FileReader 
和 XMLHttpRequest 触 发 的 Progress 事 件 为 loadstart、load、]loadend、 
error 以 及 abort。XMLHttpRequest 也 会 触发 一 个 超时 Progress 事 件 。 
ApplicationCache 会 触发 很 多 事件 ， 但 只 有 那个 名 为 "progress" 的 事件 是 
这 儿 描 述 的 这 类 Progress 事 件 。 


Progress 事 件 依次 触发 ， 以 loadstart 事 件 开始 ， 并 总 是 以 loadend 事 件 结 
束 。loadend 之 前 的 事件 可 能 是 load、error 或 者 abort， 取 决 于 传送 数据 的 
操作 是 否 成 功 ， 以 及 如 果 不 成 功 的 话 是 如 何 失 败 的 。 在 开始 的 loadstart 
和 最 后 的 两 个 事件 之 间 ， 可 能 会 有 0 个 或 多 个 进度 事件 ( 沉 有 真实 的 事 
件 名 "progress") 触发 。 (ApplicationCache 对 象 会 触发 一 个 不 同 的 事件 
序列 ， 但 它 作 为 它 的 缓存 更 新 进程 的 一 部 分 触发 的 进度 事件 是 一 个 
Progress 事 件 。 ) 


一 个 定义 了 已 传送 了 多 少 字 节 的 数据 的 ProgressEvent 对 象 将 传 入 到 
Progress 事 件 的 事件 处 理 程 序 中 。 这 个 ProgressEvent 对 象 与 Progress 中 描 


述 过 的 HTML<progress> 元 系 没 有 关系 ， 但 传 给 XMLHttpRequest 的 
onprogress 事 件 处 理 程序 (例如 ) 的 ProgressEvent 对 象 可 用 来 更 新 < 
progress> 元素 的 状态 ， 以 便 向 用 户 显示 可 视 化 的 下 载 完成 百分比 值 。 


属性 
readonly boolean lengthComputable 


如 果 要 传送 的 字 市 的 总 数 已 知 则 为 tue， 否 则 为 false。 如 果 这 个 属性 为 
true， 一 个 ProgressEvent e 的 数据 传送 完成 百分比 可 以 像 这 样 计算 : 


var percentComplete=Math.floor(100*e.loaded/e.total); 


readonly unsigned long loaded 
到 目前 为 止 已 传送 了 多 少 字 节 。 
readonly unsigned long total 


如 果 知 道 竺 传送 的 字 贡 的 总 数 ， 则 返回 为 这 个 数字 ; 否则 返回 0。 例 
如 ， 这 个 信息 可 能 来 目 Blob 的 size 属 性 或 者 Web 服 务 絮 返 回 的 Content- 
Length 汰 信息 


Screen 
天 于 显示 屏 的 信息 


Window 的 screen 属 性 指 代 一 个 Screen 对 象 。 这 个 全 局 对 象 (Window) 
的 screen 属 性 包含 在 其 上 显示 对 应 浏 宽 絮 的 计算 絮 显 示 玫 的 信息 。 
JavaScript 程 序 可 以 根据 这 个 信息 来 优化 它们 的 输出 ， 以 便 适 应 用 户 的 
显示 功能 。 例 如 ， 一 个 程序 可 以 根据 显示 尺寸 ， 选 择 显 示 大 图 还 是 小 


O 〇 


属性 


readonly unsigned long availHeight 


指明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 可 用 高 度 ， 单 位 为 像素 。 这 个 可 
用 高 度 不 包含 垂直 方向 上 显示 固定 的 桌面 功能 的 空间 ， 比 如 在 屏幕 底 
部 的 工具 栏 或 停靠 栏 。 


readonly unsigned long avail Width 


指明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 可 用 宽度 ， 单 位 为 像素 。 
用 宽度 不 包含 水 平方 向 上 显示 固定 的 桌面 功能 的 空间 。 


readonly unsigned long colorDepth 

readonly unsigned long pixelDepth 

这 两 个 同 义 属性 都 指定 屏幕 每 像素 的 色彩 深度 的 位 。 
readonly unsigned long height 


指明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 总 高 度 ， 单 位 为 像素 。 也 可 参见 


availHeight ° 


readonly unsigned long width 


指明 在 其 上 显示 网 页 浏览 器 的 屏幕 的 总 宽度 ， 单 位 为 像素 。 也 可 参见 
avail Width ° 


Script 
HTML < script> 元素 
Node、Element 


Script 对 象 表示 HITML < script> 元素。 它 的 大 多 数 属性 只 是 同名 的 
HTML 属 性 的 简单 映射 ， 不 过 text 属 性 和 继承 目 Node 的 textContent 属 性 
的 工作 原理 类 似 。 


注意 ， 一 个 <script> 至 多 只 运行 一 次 。 改 变 一 个 已 存在 的 <script> 元 
素 的 src 或 text 属 性 不 会 使 它 运行 新 的 脚本 。 不 过 ， 可 以 通过 在 新 创建 的 
<script> 元 素 上 设置 这 些 属性 来 执行 一 个 脚本 。 还 需要 注意 ，<script 


> 标签 只 有 在 插入 一 个 Document 后 才 会 运行 。 在 src 或 type 被 设置 或 者 
当 它 插入 到 文档 时 执行 脚本 ， 这 取决 于 哪个 操作 最 后 发 生 。 


属性 

boolean async 

如 有 果 <script> 元 素 有 async 属 性 则 为 true; 否则 为 false。 参 见 13.3.1 节 。 
string charset 


由 src URL 指 定 的 脚本 的 字符 编码 。 通 闸 不 设置 这 个 属性 ， 默 认 使 用 包 
舍 的 文档 的 相同 编码 来 解析 当前 脚本 。 


boolean defer 

如 果 <script> 元 素 有 defer 属 性 则 为 true; 否则 为 false。 参见 13.3.1 廊 。 
string src 

要 加 载 的 脚本 的 URL 。 

string text 

在 <script> 标签 和 结束 的 </script> 标签 之 间 的 文本 。 

String type 

当前 脚本 语言 的 MIME 类 型 。 默 认为 "textWjavascript"， 和 常规 JavaScript 脚 
本 可 以 不 用 设置 这 个 属性 〈 或 对 应 的 HTML 属 性 ) 。 如 果 将 这 个 属性 设 
置 为 一 个 自 定义 的 MIME 类 型 ， 可 在 对 应 的 <script> 元 素 中 舱 入 其 他 
脚本 使 用 的 任意 文本 数据 。 

Select 

图 形 化 的 选择 列表 


Node、Element 、 FormControl 


Select 元 素 表 示 HTML < select> 标签 ， 用 于 辐 用 户 显 示 一 个 图 形 化 的 选 
择 列表 。 如 果 存 在 对 应 的 HTML mnultiple 属 性 ， 则 用 户 可 以 从 列表 中 选 
择 任 意 个 选项 。 如 果 这 个 属性 不 存在 ， 则 用 户 只 能 选择 一 个 选项 ， 同 
时 选项 将 有 类 似 单 选 按 钮 的 行为 一 一 选中 一 个 选项 的 同时 将 取消 之 前 
选中 的 任意 选项 。 


Select 元 素 中 的 选项 可 以 以 两 种 不 同 的 方式 显示 。 如 于 size 属 性 有 值 并 
且 值 大 于 1， 或 者 指定 了 multiple 属 性 ， 则 选项 将 在 浏览 絮 窗 口中 显示 为 
一 个 size 行 的 列表 框 。 如 果 size 比 选项 的 数目 小 ， 则 列表 框 将 包含 一 个 
滚动 条 。 另 一 方面 ， 如 采 size 为 1 并 且 没 有 指定 multiple 属 性 ， 则 当前 选 
中 的 选项 将 显示 在 单独 的 一 行 中 ， 其 他 选项 的 列表 可 通过 一 个 下 拉 菜 
单 访问 。 第 一 种 显示 样式 将 选项 显示 得 更 加 清晰 ， 但 需要 占用 浏览 右 
窗口 中 的 更 多 空间 。 第 二 种 显示 样式 需要 的 空间 最 少 ， 但 不 会 显 式 显 
示 其 他 可 移 选 项 。 当 设置 了 multiple 属 性 时 ，size 默 认 值 为 4， 否 则 size 
的 默认 值 为 1 。 


Select 元 素 的 options[] 属 性 最 值得 关注 。 它 是 一 个 由 <option> 元素 ( 参 
见 Option) 组 成 的 类 数组 对 象 ， 这 些 <option> 描述 Select 元 素 显 示 的 选 
项 。 由 于 历史 原因 ， 这 个 类 数组 对 象 在 添加 及 删除 <option> 元 素 时 有 
一 些 与 众 不 同 的 行为 。 细 节 可 参见 HTMLOptionsCollection 。 


对 没有 指定 multiple 属 性 的 Select 元 素来 说 ， 可 以 通过 selectedIndex 属 性 
来 判断 选中 了 哪个 选项 。 不 过 ， 如 宁 人 允许 复 选 的 话 ， 这 个 属性 束 只 能 

告诉 你 第 一 个 选中 的 选项 。 要 判断 选中 的 选项 的 完整 集合 ， 必 须 遇 历 

options[] 数 组 并 检查 每 一 个 Option 对 象 的 selected 属 性 。 


属性 
除了 这 儿 列 出 的 属性 外 ，Select 元 素 也 定义 了 Element 和 FormControl 的 


属性 ， 另 外 还 通过 下 面 的 JavaScript 属 性 映射 了 对 应 的 HIML 属 性: 
multiple、 required 以 及 size 。 


unsigned long length 


options 集 合 中 元 素 的 数目 。Select 对 象 本 吴 就 是 一 个 类 数组 对 象 ， 对 一 
个 Select 对 象 s 以 及 一 个 数字 n 来 说 ，s[n] 等 同 于 s.options[n] 。 


readonly HTMLOptionsCollection options 


当前 Select 元 素 包 含 的 Option 元 素 组 成 的 类 数组 对 象 。 关 于 这 个 集合 的 
历史 原因 造成 的 特殊 行为 ， 可 参见 HTMLOptionsCollection 。 


long selectedIndex 


选中 的 选项 在 options 数 组 中 的 位 置 。 如 果 没 有 选项 选中 ， 则 这 个 属性 
为 -1。 如 采 选 中 多 个 选项 ， 这 个 属性 返回 第 一 个 选中 的 选项 的 索引 。 


设置 这 个 属性 的 值 ， 将 导致 指 定 的 选项 选中 ， 同 时 所 有 其 他 选项 取消 
选中 ， 即 使 这 个 Select 对 象 指定 了 multiple 属 性 。 在 处 理 列表 框 选项 ( 当 
size>1) 时 ， 可 以 通过 设置 selectedIndex 为 -1 来 取消 选中 所 有 选项 。 注 
意 ， 用 这 种 方式 改变 选择 不 会 触发 onchange0 事 件 处 理 程序 。 


readonly HIMLCollection selectedOptions 


由 选中 的 Option 元 素 组 成 的 只 读 的 类 数组 对 象 。 这 是 HTML5 新 定义 的 
属性 ， 在 写作 本 书 的 时 候 ， 还 没有 广泛 文 持 。 
方法 


这 儿 列 出 的 方法 都 委托 给 options 属 性 的 同名 方法 ， 细 市 可 参见 
HTMLOptionsCollection。 除 了 这 些 方法 外 ，Select 元 素 也 实现 了 
Element 和 FormControl 的 方法 。 


void add(Element element,[any before]) 
这 个 方法 和 options.add0 一 样 ， 用 于 添加 一 个 新 的 Option 元 素 。 
any item(unsigned long index) 


这 个 方法 和 options.item0) 一 样 ， 返 回 一 个 Option 元 素 。 在 用 户 直 接 检 索 
Select 对 象 时 也 会 调用 这 个 方法 。 


any namedItem(string name) 
这 个 方法 和 options.namedItem() 一 样 。 参 见 HTMLOptionsCollection 。 


void remove(long index) 


这 个 方法 和 options.remove() 一 样 ， 用 于 移 除 一 个 Option 元 素 。 参 见 
HTMLOptionsCollection ° 


Storage 
客户 端 存 储 的 name/value 对 


Window 的 localStorage 和 sessionStorage 属 性 都 是 Session 对 象 ， 表 示 持 久 
的 客户 端 天 联 数组 ， 这 些 数 组 将 字符 串 键 与 值 对 应 。 理 论 上 ，Session 
对 象 可 以 存储 任意 可 用 结构 性 复制 算法 〈 参 见 “ 结 构 性 复制 >，22.2 节 ) 
复制 的 值 。 不 过 ， 在 写作 本 书 的 时 候 ， 各 浏览 硕 还 只 文 持 字 符 串 值 。 


Storage 对 象 的 方法 允许 添加 新 的 键 / 值 对 、 移 除 键 / 值 对 ， 以 及 查询 指定 
的 键 对 应 的 值 。 不 过 ， 不 需要 显 式 地 调用 这 些 方 法 : 可 以 使 用 数组 检 
索 或 delete 操 作 符 来 代替 ， 还 能 将 localStorage 和 sessionStorage 当 做 普通 
JavaScript 对 象 来 处 理 。 


如 有 果 改 变 了 某 个 Storage 对 象 的 内 容 ， 有 权限 访问 同一 个 存储 器 (因为 
它们 正在 显示 来 目 同一 个 源 的 文档 ) 的 任何 其 他 Window 都 将 通过 一 个 
StorageEvent 事 件 通知 这 个 改变 。 


属性 


readonly unsigned long length 
已 存储 的 键 / 值 对 的 数目 。 
2 

void clear() 

移 除 所 有 已 存储 的 健 / 值 对 。 
any getltem(string key) 


返回 与 key 对 应 的 值 。 (在 写作 本 书 时 各 大 浏览 器 的 实现 中 ， 返 回 值 总 
是 为 一 个 字符 串 。) 当 为 了 检索 名 为 key 的 属性 而 检索 Storage 对 象 时 ， 
会 隐 式 调用 这 个 方法 。 


string key(unsigned long n) 


返回 当前 Stroage 对 象 中 的 第 n 个 键 ， 如 果 n 大 于 或 等 于 length 则 返回 
nul。 注 意 ， 添 加 或 移 除 键 / 值 对 时 键 的 顺序 可 能 会 改变 。 


void removeItem(string key) 


从 当前 Storage 对 象 中 移 除 键 key 以 及 它 对 应 的 值 。 使 用 delete 操 作 删 除 当 
前 Storage 对 和 象 的 名 为 key 的 属性 时 ， 将 会 隐 式 调用 这 个 方法 。 


void setItem(string key,any value) 


添加 指定 的 key 和 value 到 当前 Storage 对 象 中 ， 如 果 已 经 存在 键 key， 册 
使 用 新 的 值 蔡 换 对 应 的 老 值 。 如 果 为 当前 Storage 对 象 的 名 为 key 的 属性 
赋值 value， 则 会 隐 式 调用 这 个 方法 。 这 就 是 说 ， 可 以 使 用 普通 的 
JavaScript 属 性 的 访问 及 赋值 语法 来 代替 显 式 地 调用 setItem()。 


9torageEvent 


Event 


Window 对 象 的 localStorage 和 sessionStorage 属 性 指 代 代表 客户 端 存储 区 
的 Storage 对 象 《参见 20.1 节 ) 。 如 果 多 个 窗口 、 标 签 或 框架 页 面 正 在 显 
示 来 目 同 一 个 源 的 文档 ， 则 这 些 窗口 将 有 权限 访问 同一 个 存储 区 。 如 

有 果 一 个 窗口 中 的 脚本 改变 了 某 个 存储 区 的 内 容 时 ， 在 其 他 共享 访问 这 
个 存储 区 的 Window 对 象 上 都 会 触发 一 个 存储 事件 。 (注意 ， 这 个 事件 
不 会 在 造成 这 个 改变 的 窗口 触发 。) 存储 事件 将 在 window 对 象 上 触 
发 ， 且 不 会 冒 泡 ， 也 没有 可 供 取消 的 默认 操作 。 与 存储 事件 天 联 的 对 
象 是 一 个 StorageEvent 对 象 ， 它 的 属性 描述 发 生 在 存储 区 的 改变 。 


属性 


readonly string key 


这 个 属性 为 刚 设置 或 删除 的 键 。 如 采 整 个 存储 区 被 Storage.clear() 方 法 
清空 了 ， 则 这 个 属性 (以 及 newValue 和 oldValue) 将 为 null 。 


readonly any newValue 


指定 key 的 新 值 。 如 果 对 应 的 键 移 除 ， 则 这 个 值 将 为 null。 在 写作 本 书 
的 时 候 ， 各 浏 咒 器 的 实现 还 只 允许 存储 子 符 串 值 。 


readonly any oldValue 


刚刚 改变 的 键 的 日 值 ， 如 有 果 这 个 键 是 新 添 加 到 存储 区 的 ， 则 这 个 值 为 
nul 1]。 在 写作 本 书 的 时 候 ， 各 浏 讽 大 的 实现 还 只 允许 存储 字符 串 值 。 


readonly Storage storageArea 


这 个 属性 等 同 于 接收 这 个 事件 的 Window 的 localStorage 或 sessionStorage 
属性 ， 指 明 哪 个 存储 区 发 生 了 改变 。 


readonly string url 


这 是 改变 了 存储 区 的 脚本 所 属 的 文档 的 URL 。 


Style 

HTML < style> 元 素 
Node、Element 
Style 对 象 表示 HTML < style> 标签 。 
属性 

boolean disabled 


将 这 个 属性 设置 为 true 将 禁用 与 这 个 <style>> 元 素 关 联 的 样式 表 ， 将 它 
设置 为 false 将 重新 启用 它 。 


string media 


这 个 属性 反映 了 HTML media 属 性 ， 指 定 了 当前 样式 应 用 的 媒体 。 


boolean scoped 


如 果 HTML scoped 属 性 出 现在 当前 <style> 元 素 上 ， 则 此 属性 为 true; 
否则 为 false。 在 写作 本 书 的 时 候 ， 各 浏览 右 还 不 文 持 这 个 属性 。 


readonly CSSStyleSheet sheet 

当前 <style> 元 素 定 义 的 CSSStyleSheet 。 

string title 

所 有 HTML 元 素 都 支持 一 个 ttle 属 性 。 在 <style> 元 素 上 设置 这 个 属性 
后 ， 用 户 将 可 以 通过 标题 来 选择 样式 表 〈 作 为 一 个 蔡 换 样式 表 ) ， 指 
定 的 标题 可 能 会 以 某 种 形式 显示 在 Web 浏 贤 万 的 用 户 界 面 上 。 

String type 


type 属 性 。 默 认 值 为 "text/css"， 一 般 不 需要 设置 这 个 
属 ' o 


Table 


HTML <table> 

Node 、Element 

Table 对 象 表示 HTML <table 元 素 ， 它 定义 了 若干 方便 的 属性 和 方法 
来 查询 及 修改 表格 的 各 个 部 分 。 这 些 方法 及 属性 让 表格 操作 更 简单 ， 
不 过 它们 的 功能 也 可 以 使 用 核心 DOM 方 法 来 复制 。 


HTML 表 格 由 段落 (section) 、 行 以 及 单元 格 组 成 。 参 见 TableCell、 
TableRow 以 及 TableSection 。 


属性 


除了 这 儿 列 出 的 属性 ，Table 元 叉 也 有 一 个 summary 必 性， 对 应 同名 的 
HTML 属 性 。 


Element caption 
指 代 当 前 表格 的 < caption> 元 素 ， 如 有 条 这 个 元 素 不 存在 则 为 null 。 


readonly HIMLCollection rows 


由 当前 表格 中 所 有 行 对 应 的 TableRow 对 象 组 成 的 类 数组 对 象 。 这 包含 
在 <thead>、<tfoot> 以 及 <tbody> 标 签 中 定义 的 所 有 行 。 


readonly HIMLCollection tBodies 
由 当前 表格 中 所 有 <tbody> 段 落 对 应 的 TableSection 对 象 组 成 的 类 数组 
对 象 。 


TableSection tFoot 

当前 表格 的 <tfoot> 元 素 ， 如 末 不 存在 对 应 的 元 素 则 为 null 。 
TableSection tHead 

当前 表格 的 <thead> 元 素 ， 如 果 不 存 在 对 应 的 元 素 则 为 null 。 
方法 

Element createCaption() 


这 个 方法 返回 一 个 对 应 当前 表格 的 <caption> 的 Element 对 象 。 如 果 当 
前 表格 已 经 有 一 个 <caption > ， 这 个 方法 将 简单 地 返回 它 。 如 采 当 前 
表格 没有 < caption > ， 则 这 个 方法 先 创建 一 个 新 的 ( 空 ) 标题 ， 将 它 
插入 表格 ， 然 后 再 返回 它 。 


TableSection createTBodyO) 


这 个 方法 创建 一 个 新 的 <tbody> 元素 ， 将 它 插入 到 表格 中 ， 并 返回 
. a 之 后 ， 或 者 搬入 到 表格 
9 年 必 处 


TableSection createTFoot() 


这 个 方法 返回 代表 当前 表格 中 第 一 个 <tftoot> 元 素 的 TableSection。 如 
果 当 前 表格 已 经 有 一 个 页 脚 ， 这 个 方法 将 人 简单 地 返回 它 。 如 果 当 前 表 
格 没有 <tfoot> ， 则 这 个 方法 先 创建 一 个 新 的 〈 空 ) <tfoot> ， 将 它 插 
入 表格 ， 然 后 再 返回 它 。 


TableSection createTHead() 


这 个 方法 返回 代表 当前 表格 中 第 一 个 <thead> 元 素 的 TableSection。 如 
果 当 前 表格 已 经 有 一 个 页 慎 ， 这 个 方法 将 人 徐 单 地 返回 它 。 如 果 当 前 表 
格 中 没有 <thead> ， 则 这 个 方法 先 创建 一 个 新 的 〈 空 ) <thead > 元 
素 ， 将 它 插入 表格 ， 然 后 再 返回 它 。 


void deleteCaption() 
移 除 当前 表格 的 第 一 个 <caption> 元素 ， 如 果 存 在 这 样 的 元 素 的 话 。 
void deleteRow(long index) 


这 个 方法 从 当前 表格 中 删除 指定 位 置 的 行 。 表 格 的 各 行 按 它们 在 文档 
源码 中 的 出 现 顺序 编号 。< thead> 和 < tfoot> 部 分 中 的 行 与 表格 中 其 
行 一 起 编号 。 


void deleteTFoot() 
移 除 当 前 表格 的 第 一 个 <tfoot> 元素 ， 如 果 存 在 这 样 的 元 素 的 话 。 
void deleteTHead() 


移 除 当前 表格 的 第 一 个 <thead> 元 素 ， 如 果 存 在 这 样 的 元 素 的 话 。 
TableRow insertRow([Llong index]) 

这 个 方法 创建 一 个 新 的 <tr> 元 素 ， 将 它 插 入 当前 表格 的 指定 index 处 ， 
并 返回 色 ” 

新 的 行将 插入 到 索引 为 index 处 的 已 有 行 前 方 相 邻 的 位 置 ， 并 与 这 个 指 
定 的 行 在 同一 个 部 分 中 。 如 果 index 等 于 当前 表格 的 行 数 (或 -1) ， 则 
新 行将 追加 到 当前 表格 的 最 后 一 个 部 分 中 。 如 果 表 格 初始 状态 为 空 ， 
则 这 个 新 行将 先 插入 到 一 个 新 的 <tbody> 段 落 ， 然 后 随 着 这 个 <tbody 
> 一 起 插入 到 表格 中 。 


可 以 使 用 方便 的 方法 TableRow.insertCell0) 来 添加 内 容 到 新 创建 的 行 中 。 
也 可 参见 TableSection 的 insertRow() 方 法 。 


TableCell 


HIML 表 格 中 的 单元 格 

Node、Element 

TableCell 对 象 表现 为 <td> 或 < 也 > 元 素 。 
属性 

readonly long cellIndex 

当前 单元 格 在 它 所 属 的 行 中 的 位 置 。 
unsigned long colSpan 

对 应 的 HTML conspan 属 性 的 值 ， 数 字形 式 。 
unsigned long rowSpan 

对 应 的 HTML rowspan 属 性 的 值 ， 数 字形 式 。 
TableRow 

HTML 表 格 中 的 <tr> 元 素 

Node 、 Element 


TableRow 对 象 表 示 HTML 表 格 中 的 一 行 (一 个 <tr> 元 素 ) ， 它 定义 了 
若干 操作 这 一 行 包含 的 TableCell 元 素 的 属性 及 方法 。 


属性 

readonly HTMLCollection cells 

由 代表 当前 行 中 的 <td> 或 < 也 > 元 素 的 TableCel 对 象 组 成 的 类 数组 对 
象 o 


readonly long rowIndex 


当前 行 在 表格 中 的 索引 。 


readonly long sectionRowIndex 


当前 行 在 所 属 的 部 分 中 (例如 ， 在 包含 它 的 <thead>>、<tbody> 或 < 
tfoot> 中 ) 的 位 置 。 


方法 
void deleteCell(long index) 
这 个 方法 在 当前 行 中 删除 指定 index 处 的 单元 格 。 


Element insertCell([long index]) 


这 个 方法 创建 一 个 新 的 <td> 元素， 将 它 插入 到 当前 行 的 指定 位 置 ， 并 
返回 这 个 元 素 。 新 的 单元 格 将 插入 到 当前 位 于 index 指 定 的 位 置 的 单元 
格 的 前 方 相 令 位置 。 如 果 index 省 略 、 值 为 -1 或 等 于 当前 行 中 单元 格 的 
数目 ， 则 新 的 单元 格 将 妃 加 到 当前 行 的 最 后 。 


注意 ， 这 个 方便 的 方法 只 插入 <td> 数据 单元 格 。 如 果 需 要 添加 一 个 标 
题 单元 格 到 一 行 中 ， 必 须 使 用 Document.createElement() 方 法 及 
Node.insertBefore(0) 或 相关 的 方法 来 创建 及 插入 < 也 > 元 素 。 


TableSection 
表格 的 页 眉 、 页 脚 或 正文 部 分 


Node、Element 


TableSection 对 象 表示 HTML 表 格 中 的 <tbody>、<thead> 或 <tfoot> 
元 素 。 表 格 的 tHead 和 tEFoot 属 性 是 TableSection 对 象 ，tBodies 属 性 是 由 
TableSection 对 象 组 成 的 一 个 HTMLCollection 。 


TableSection 包 含 若干 TableRow 对 象 ， 同 时 属于 某 个 Table 对 象 。 
属性 


readonly HTMLCollection rows 


由 TableRow 对 象 组 成 的 类 数组 对 象 ， 代 表 当 前 表格 中 本 部 分 的 所 有 
行 。 


方法 

void deleteRow(long index) 

这 个 方法 删除 当前 部 分 中 指定 位 置 的 行 。 
TableRow insertRow!([long index]) 


这 个 方法 创建 一 个 新 的 <tr> 元 素 ， 将 它 插入 到 当前 表格 部 分 中 的 指定 
位 置 ， 并 返回 这 个 元 素 。 如 果 index 为 -1 或 省 略 或 者 等 于 当前 部 分 中 的 
行 数 ， 则 新 的 行将 追加 到 当前 部 分 的 结尾 。 否 则 ， 新 的 行将 插入 到 当 
前 由 index 指 定位 置 处 的 行 前 方 相 邻 的 位 置 。 注 意 ， 在 这 个 方法 中 ， 
index 指 定 的 是 在 一 个 单独 的 表格 部 分 中 的 某 一 行 的 位 置 ， 而 不 是 在 整 
个 表格 中 的 位 置 。 


Text 

文档 中 的 一 串 文 本 

Node 

Text 玉 点 表现 为 文档 中 的 一 串 文 本 ， 通 常 在 文档 树 中 作为 菜 个 Element 
的 子 节 点 出 现 。Text 节 点 的 内 容 可 通过 data 属 性 或 hodeValue 以 及 继承 日 
Node 的 textContent 属 性 访问 。 可 使 用 Document.createTextNode() 方 法 创 
建新 的 Text 记 点 。Text 节 点 永远 不 会 有 子 节 点 。 

属性 

String data 

当前 市 点 包含 的 文本 。 

readonly unsigned long length 


当前 节点 对 应 文本 的 字符 长 度 。 


readonly string wholeText 


当前 节 扩 以 及 与 它 前 后 相 邻 的 文本 市 态 的 文本 内 容 。 如 来 在 父 太 后 上 
调用 过 normalize0) 方 法 ， 则 这 个 属性 的 值 将 与 data 的 值 相同 。 


方法 


0 竺 写 一 个 基于 Web 的 文本 编辑 絮 应 用 ， 不 然 这 些 方法 应 该 不 会 经 
党 | 


void appendData(string text) 
这 个 方法 追加 指定 的 text 到 当前 Text 节 点 结尾 处 。 
void deleteData(unsigned long offset,unsigned long count) 
文 个 方法 从 当前 TextT 点 中 删除 从 位 置 offset 的 字符 开始 的 count 个 字 


符 。 如 果 offset 加 上 count 大 于 当前 Text 节 点 中 的 字符 数目 ， 则 当前 字符 
串 中 从 offset 开 始 到 结尾 的 字符 都 将 删除 。 


void insertData(unsigned long offset,string text) 
这 个 方法 将 指定 的 text 插 入 到 Text 玫 点 的 offset 位 置 处 。 
void replaceData(unsigned long offset,unsigned long count,string text) 


文 个 方法 用 字符 串 text 的 内 容 替 换 目 offset 开 始 的 count 个 字符 。 如 果 
。 count 的 和 大 于 Text 节 点 的 长 度 ， 则 从 offset 开 始 的 所 有 字符 都 将 
链 换 。 


Text replace WholeText(string text) 


个 方法 创建 一 个 包含 指定 text 的 新 的 Text 节 点 。 然 后 ， 当 前 市 点 及 所 
有 人 Test 点 都 将 被 这 个 新 广 点 蔡 换 ， 最 后 返回 这 个 靳 的 节点 。 
见 上 面 的 wholeText 属 性 以 及 Node 的 normalize() 方 法 。 


Sh 


Text splitText(unsigned long offset) 


这 个 方法 将 TextT 点 在 指定 的 offset 处 切 分 为 两 个 。 原 来 的 TextT 点 会 改 
变 ， 它 将 由 从 开始 位 置 到 〈 但 不 包含 ) offset 的 所 有 文本 组 成 。 同 时 ， 
将 创建 一 个 新 的 Text 节 点 ， 包 含 从 〈 并 且 包含 ) offset 位 置 到 字符 串 结 
尾 的 所 有 字符 。 这 个 新 的 TextF 点 将 是 这 个 方法 的 返回 值 。 另 外 ， 如 果 
原来 的 Text 节 点 有 父 节点 parentNode， 则 新 节点 将 插入 到 这 个 父 节点 
中 ， 紧 女 在 原来 的 节操 后面 。 


string substringData(unsigned long offset,unsigned long count) 


这 个 方法 从 TextF 点 的 文本 中 提取 出 一 个 子 串 ， 内 容 为 目 位 置 offset 开 
始 的 count 个 字符 。 如 采 Text 廊 点 包含 的 文本 非常 多 ， 用 这 个 方法 可 能 
会 比 用 String.substring() 更 有 效率 。 


TextArea 
多 行文 本 输入 区 
Node、Element 、 FormControl 


TextArea 对 象 表示 HTML <textarea> 元 素 ， 通 常 在 HTML 表 单 中 用 于 创 
建 多 行 的 文本 输入 区 。 文 本 输入 区 的 的 初始 值 在 <textarea> 和 
</textarea > 标签 之 间 以 纯 文 本 格式 指定 。 可 以 使 用 value 属 性 碍 询 或 设 
置 显 示 的 文本 。 


TextArea 是 一 个 类 似 Input 和 Select 的 表单 控件 。 类 似 这 些 对 象 ， 它 也 定 
义 了 form、name、type、value 属 性 ， 以 及 FormControl 文 档 中 提 到 的 其 
他 属性 及 方法 。 


属性 

除了 这 儿 列 出 的 属性 ，TextArea 元 素 也 定义 了 Element 和 FormControl 的 
属性 ， 同 时 还 使 用 下 面 的 JavaScript 属 性 映射 了 和 若干 HTML 属性 : cols、 
maxLength ~、 rows ~ placeholder 、 readOnly 、 required 以 及 wrap 。 

string defaultValue 


当前 <textarea> 元素 的 初始 纯 文本 内 容 。 当 表单 重 置 时 ， 文 本 区 将 重 
置 为 这 个 值 。 这 个 属性 相当 于 从 Node 继 承 的 textContent 属 性 。 


unsigned long selectionEnd 


返回 或 设置 选中 文本 后 面 的 第 一 个 输入 字符 的 索引 。 也 可 参见 


setSelectionRange()° 


unsigned long selectionStart 


返回 或 设置 当前 <textarea> 中 第 一 个 选中 字符 的 索引 。 也 可 参见 


setSelectionRange()° 

readonly unsigned long textLength 

value 属 性 (参见 FormControl) 的 字符 数 。 
方法 


除了 这 儿 列 出 的 方法 ，TextArea 元 素 也 实现 了 Element 和 FormControl 的 
pa 


void select() 


个 方法 选中 当前 前 之 textarea 元 素 显 示 的 所 有 文本 。 征 信 多 数 测 请 站 
这 意味 着 这 些 文本 将 高 亮 显示 ， 用 户 新 输入 的 文本 将 替换 这 些 高 
亮 显示 的 文本 而 不 是 追加 到 它们 后 面 。 


void setSelectionRange(unsigned long start,unsigned long end) 


选中 当前 <textarea> 中 显示 的 文本 ， 从 位 置 start 处 的 字符 开始 ， 一 直到 
(但 不 包括 ) 位 置 end 处 的 字符 。 


TextMetrics 
字符 串 或 文本 的 度量 


TextMetrics 对 象 由 CanvasRenderingContext2D 的 measureText() 方 法 返 
回 。 它 的 width 属性 为 度量 过 的 文本 的 宽度 ， 单 位 为 CSS 像 素 。 将 来 可 
能 还 会 添加 更 多 的 度量 。 


属性 


readonly double width 

度量 过 的 文本 的 宽度 ， 单 位 为 CSS 像 素 。 

TimeRanges 

媒体 时 间 区 间 的 集合 

MediaElement 的 buffered、played 以 及 seekable 属 性 分 别 表示 媒体 时 间 轴 
的 一 部 分 缓存 了 数据 、 已 经 播放 过 了 以 及 可 以 从 当前 位 置 回放 。 时 间 
轴 的 这 些 部 分 可 能 包含 多 个 互 不 相交 的 时 间 区 间 (比如 ， 当 用 户 跳 到 
一 个 视频 的 中 间 时 ， 对 played 属 性 来 说 就 是 这 样 ) 。 一 个 TimeRanges 对 
象 代 表 0 个 或 多 个 互 不 相交 的 时 间 区 则 。 它 的 length 属 性 指明 区 间 的 数 
目 ，start0 和 end(0) 方 法 则 返回 每 个 区 间 的 边界 。 

由 MediaElement 返 回 的 TimeRanges 对 象 总 是 规范 化 的 (normalized) ， 


0 它们 包含 的 区 间 总 是 有 序 的 、 非 空 的 ， 也 不 会 相互 连接 或 


属性 


readonly unsigned long length 

当前 TimeRanges 对 象 代表 的 区 间 的 数目 。 
方法 

double end(unsigned long n) 


返回 时 间 区 间 n 的 结束 时 间 (单位 为 秒 ) ， 如 果 n 小 于 0 或 大 于 等 于 
length 则 抛 出 异常 。 


double start(unsigned long n) 


返回 时 间 区 间 n 的 开始 时 间 (单位 为 秒 ) ， 如 果 n 小 于 0 或 大 于 等 于 
length 则 抛 出 异常 。 


TypedArray 


固定 尺寸 的 二 进 制 数组 
ArrayBufferView 


TypeArray 是 一 个 ArrayBufferView， 它 将 一 个 基本 的 ArrayBuffer 的 字 广 
转换 为 一 个 由 数字 组 成 的 数组 ， 并 人 允许 读 或 写 这 个 数组 的 元 素 。 这 儿 
没有 单独 的 名 为 TypedArray 的 文档 ， 实 际 上 ， 它 包含 8 个 不 同类 型 的 类 
型 化 数组 (typed array) 。 这 8 种 类 型 都 是 ArrayBufferView 的 子 类 型 ， 
它们 彼此 之 间 的 不 同 只 在 于 每 个 数组 元 素 的 字 广 数 以 及 解释 这 些 字 市 
的 方式 。 这 8 种 类 型 是 : 


Int8Array 
每 个 数组 元 素 一 个 字 节 ， 解 释 为 一 个 有 符号 整数 。 
IntL6Array 


每 个 数组 元 素 两 个 字 节 ， 解 释 为 一 个 有 符号 整 效 ， 使 用 平台 字 节 居 
3 


Int32Array 

每 个 数组 元 素 4 个 字 节 ， 解 释 为 一 个 有 符号 整数 ， 使 用 平台 字 节 顺序 。 
Uint8Array 

每 个 数组 元 素 一 个 字 节 ， 解 释 为 一 个 无 符号 整数 。 

Uint16Array 


每 个 数组 元 素 两 个 字 节 ， 解 和 为 一 个 无 符号 整 歼 ， 使 用 平台 字 节 居 
予 ° 


Uint32Array 
每 个 数组 元 素 4 个 字 方 ， 解 释 为 一 个 无 符号 整数 ， 使 用 平台 字 节 顺序 。 
Float32Array 


每 个 数组 元 素 4 个 子 广 ， 解 释 为 一 个 浮 点 数 ， 使 用 平台 字 节 顺序 。 


Float64Array 
每 个 数组 元 素 8 个 字 节 ， 解 释 为 一 个 浮 点 数 ， 使 用 平台 字 节 上 顺序 。 


就 像 名 字 所 暗示 的 ， 这 些 都 是 类 数组 对 象 ， 可 以 通过 普通 的 方 括号 数 
组 记号 来 存 取 元 素 。 不 过 要 注意 ， 这 些 类 型 的 对 象 总 是 固定 长 度 的 。 


注意 上 面 的 描述 ，TypedArray 类 型 使 用 底层 平台 的 默认 字 节 顺序 。 关 于 
可 以 显 式 控制 字 顺 序 的 ArrayBuffer 视 图 请 参见 DataView 。 


构 千 函数 


new TypedArray(unsigned long length) 
new TypedArray(TypedArray array) 
new TypedArray(type[]jarray) 


new TypedArray(ArrayBuffer buffer, [unsigned long byteoffset], [unsigned long length]) 
8 种 TypedArray 的 构造 函数 都 可 以 用 上 面 4 种 方式 调用 。 构 造 函 数 如 下 工 
作 : 


如果 以 一 个 单独 的 数字 参数 调用 构造 函数 ， 它 将 创建 一 个 新 的 具有 指 
定数 目的 元 素 的 类 型 化 数组 ， 每 个 元 素 将 初始 化 为 0。 


.如 果 传 入 一 个 类 型 化 数组 对 象 ， 则 这 个 构造 画 数 将 创建 一 个 新 的 类 型 
化 数组 ， 其 元 素 的 数目 与 参数 数组 元 素 的 数目 一 致 ， 然 后 将 参数 数组 
的 元素 复制 到 新 创建 的 数组 中 “参数 才 组 的 类 型 可 与 和 创建 的 数组 的 
类 型 不 同 。 


.如 果 传 入 一 个 数组 (真实 的 JavaScript 数 组 ，， 则 构造 画 数 将 创建 一 个 
新 的 类 型 化 数组 ， 其 元 素数 目 与 参数 数组 元 素 的 数目 一 致 ， 然 后 将 参 
数 数 组 的 元 素 值 复制 到 新 数组 中 。 


最后， 如 果 传 入 一 个 ArrayBuffer 对 象 以 及 可 选 的 侦 移 和 长 度 参 数 ， 则 
构造 画 数 将 创建 一 个 新 的 类 型 化 数组 ， 这 个 数组 将 是 指定 ArrayBuffer 


的 指定 区 域 的 一 个 视图 。 新 的 TypedArray 的 长 度 取决 于 ArrayBuffer 区 域 
以 及 类 型 化 数组 的 元 素 尺 寸 。 


常量 
long BYTES_PER_ ELEMENT 


当前 数组 的 每 个 元 素 在 基本 的 ArrayBuffer 中 占用 的 字 世 数 。 这 个 销量 
的 值 可 能 为 1、2、4 或 8， 取 决 于 使 用 了 哪 种 类 型 的 TypedArray 。 


属性 


readonly unsigned long length 

数组 中 元 素 的 数目 。TypedArray 具 有 固定 长 度 ， 这 个 属性 的 值 永远 不 会 
改变 。 注 意 ， 这 个 属性 一 般 来 说 不 等 于 继承 自 ArrayBufferView 的 
byteLength 属 性 。 

方法 

void set(IypedArray array,[unsigned long offset]) 

从 索引 offset 处 开始 ， 复 制 array 的 元 素 到 当前 类 型 化 数组 中 。 


void set(number[]array,[unsigned long offset]) 


这 个 版 本 的 set0 和 上 面 一 个 类 似 ， 不 过 它 使 用 的 是 真实 的 JavaScript 效 
组 ， 而 不 是 类 型 化 数组 。 


TypedArray subarray(long start,1ong end ) 


返回 一 个 和 当前 TypedArray 使 用 同一 个 基本 ArrayBuffer 的 新 
TypedArray。 返 回 的 数组 的 第 一 个 元 素 是 当前 数组 的 start 位 置 处 的 元 
素 ， 同 时 返回 的 数组 的 最 后 一 个 元 素 是 当前 数组 的 end-1 位 置 处 的 元 
素 。 如 末 start 或 end 为 负数 ， 则 偏 移 量 将 从 当前 数组 的 尾部 开始 计算 。 


URL 


Blob URL 方 法 


Window 对 象 的 URL 属 性 指 代 这 个 URL 对 象 。 将 来 这 个 对 象 可 能 会 变 成 
一 个 URL 解 析 及 操作 工具 类 的 构造 函数 。 不 过 ， 在 写作 本 书 的 时 候 ， 
它 还 只 是 为 下 面 描述 的 两 个 Blob URL 方 法 提供 一 个 命名 空间 。 更 多 关 
于 Blob 和 Blob URL 的 内 容 请 参见 22.6 节 和 22.6.4 节 。 


在 写作 本 书 的 时 候 ，URL 对 象 还 很 新 ， 它 的 API 还 没有 稳定 。 可 能 需要 
带 上 厂商 定义 的 前 缀 来 使 用 它 ， 比 如 webkitURL 。 


string createObjectURL(Blob blob) 


根据 指定 的 blob 返 回 一 个 Blob URL。 对 这 个 URL 执 行 HTTP GET 请 求 将 
返回 对 应 的 blob 的 内 容 。 


void revokeObjectURL(string url) 


0 url， 之 后 它 将 不 再 与 任何 Blob 关 联 ， 也 不 可 以 再 加 
载 。 


Video 

HTML<video> 元 素 

Node 、 Element ~、 MediaElement 

Video 对 象 表 示 HTML <video>> 元 素 。<video> 和 <audio> 元 素 非 常 类 
似 ， 它 们 共同 的 属性 和 方法 的 文档 位 于 MediaElement 部 分 。 这 儿 和 是 
Video 对 象 专 有 的 一 些 属性 。 

属性 

DOMSettableTokenL ist audio 

这 个 属性 指定 当前 视频 的 音频 选项 。 对 应 的 选项 在 HTML audio 属 性 中 


以 至 格 分 隔 的 标记 列表 定义 ， 这 个 集合 在 JavaScript 中 映 届 为 一 个 
DOMSettableTokenList。 不 过 ， 在 写作 本 书 的 时 候 ，HTML5 标 准 还 只 


定义 了 一 个 合法 标记 ("muted") ， 因 此 ， 可 以 将 这 个 属性 当做 一 个 字 
符 吝 处理 。 


unsigned long height 


当前 <video > 元素 在 屏幕 上 的 高 度 ， 单 位 为 CSS 像 素 。 对 应 HTML 
height 属 性 。 


string poster 


0 0 0 。 对 应 HTML poster 
蜗 性 。 


readonly unsigned long videoHeight 


readonly unsigned long videoWidth 


这 两 个 属性 返回 当前 视频 的 原始 高 度 和 宽度 ( 即 ， 它 的 帧 的 尺寸 ) ， 
单位 为 CSS 像 素 。 在 <video> 元 素 加 载 视频 的 元 数据 (metadata) 之 前 
(readyState 仍 旧 是 HAVE_NOTHING，loadedmetadata 事 件 还 没有 被 分 

发 ) ， 这 两 个 属性 都 为 0。 


unsigned long width 


当前 <video > 元 素 在 屏幕 上 的 宽度 ， 单 位 为 CSS 像 素 。 对 应 HTML 
width 属性 。 


WebSocket 
一 个 双 回 的 类 套 接 字 的 网 络 连 接 
EventIarget 


WebSocket 表 示 一 个 文 持 WebSocket 协 议 的 到 某 个 服务 属 的 长 生命 周期 
的 、 双 同 的 、 类 套 接 字 的 网 络 连 返 。 这 个 网 络 连 接 模 型 和 HTTP 的 请 求 / 
响应 模型 有 着 根本 的 不 同 。 可 以 使 用 WebSocket(0) 构 造 范 数 创建 一 个 新 
的 连 授 ， 使 用 send0) 方 法 发 送 文 本 消 轧 到 服务 器， 同时 为 消 恩 事件 注册 
处 理 程 序 以 便 接 收 来 自 服务 器 的 消 轧 。 更 多 细节 可 参考 22.9 有 。 


ee API， 在 写作 本 书 的 时 候 ， 还 没有 被 所 有 浏览 需 
二 O 


构 千 函数 


new WebSocket(string url, [string[]jprotocols]) 


WebSocket0 构 造 范 数 创建 一 个 新 的 WebSocket 对 象 ， 并 开始 (异步 地 ) 
建立 一 个 到 WebSocket 服 务 器 的 连接 。url 参 数 指定 要 连接 的 服务 器 ， 必 
须 为 一 个 使 用 ws:/ 或 wss:WURL 模 式 的 绝对 URL。protocols 参 数 是 一 个 
由 子 协议 名 组 成 的 数组 。 如 采 指 定 这 个 参数 ， 则 客户 闯 将 告诉 服务 器 
端 可 以 “交谈 ?的 通信 协议 或 协议 碑 本 。 服 务 器 必须 从 中 选 一 个 并 通知 
客户 端 ， 这 一 切 都 是 连接 过 程 的 一 部 分 。protocols 也 可 以 以 一 个 字符 串 
的 形式 而 不 是 数组 的 形式 定义 :这 种 情况 下 ， 它 当做 一 个 长 度 为 1 的 数 
组 处 理 。 

常量 

下 面 的 常量 为 readyState 属 性 可 能 的 值 。 

unsigned Short CONNECTING=0 

连接 进程 正在 进行 。 

unsigned Short OPEN=1 

当前 WebSocket 已 连接 到 服务 器 ， 可 以 发 送 和 接收 消 轧 。 

unsigned short CLOSING=2 

连接 正在 关闭 。 

unsigned short CLOSED=3 

连接 已 关闭 。 

属性 


readonly unsigned long bufferedAmount 


刚刚 传 给 s en d0 方 法 但 还 没有 真正 发 送 的 文本 的 字符 数 。 如 果 要 发 送 
可 以 使 用 这 个 属性 来 避免 传送 消息 的 速度 比 它 们 可 发 送 
J 带 硫 快 。 


readonly string protocol 


如 和 革 给 WebSocketO0 构 造 男 数 传 入 一 个 子 协议 数组 ， 则 服务 需 选 择 的 那 
个 协议 将 保存 在 这 个 属性 中 。 注 意 ， 当 第 一 次 创建 WebSocket 上 时， 连接 
还 没有 建立 ， 服 务 器 的 选择 也 还 未 知 ， 所 以 这 个 属性 开始 时 为 一 个 空 

字符 串 。 如 琳 向 构造 函数 传 入 寿 干 协议 ， 则 当 open 事 件 被 触发 时 ， 这 

个 属性 将 改变 为 服务 占 选 择 的 于 协议 。 


readonly unsigned short readyState 


WebSocket 连 接 的 当前 状态 。 这 个 属性 的 值 为 上 面 列 出 的 和 常量 之 一 。 


readonly string url 
这 个 属性 保存 传 入 到 WebSocket() 构 造 画 数 中 的 URL 。 
方法 


void closel() 


如 果 当 前 连接 不 处 在 已 关闭 或 正在 关闭 的 状态 ， 则 这 个 方法 将 开始 关 
闭 它 ， 并 将 readyState 设 置 为 CLOSING。 即 便 在 调用 了 close() 方 法 之 
后 ， 仍 然 可 能 继续 触发 消息 事件 ， 直 到 readyState 改 变 为 CLOSED 并 且 
触发 close 事 件 。 


void send(string data) 


这 个 方法 将 指定 的 data 发 送 到 当前 WebSocket 连 接 的 另 一 端的 服务 右 。 
如 果 在 触发 open 事 件 之 前 ， 即 readyState 仍 然 为 CONNECTING 时 调用 这 
个 方法 将 抛 出 一 个 异常 。WebSocket 协 议 文 持 二 进 制 数据 ， 但 在 写作 本 
书 的 时 候 ，WebSocket API 还 只 人 允许 发 送 和 接收 字符 串 。 


事件 处 理 程序 


网 络 通信 本 来 是 异步 的 ， 类 似 于 XMLHttpRequest，WebSocket API 是 基 

于 事件 的 。WebSocket 定 义 了 4 个 事件 处 理 程序 注册 属性 ， 同 时 也 实现 

了 EventTarget， 所 以 也 可 以 使 用 EventTarget 方 法 来 注册 事件 处 理 程序 。 

下 面 描述 的 事件 都 在 WebSocket 对 象 上 和 触发， 它们 都 不 会 冒 泡 ， 也 都 没 

的 默认 行为 。 不 过 需要 注意 ， 它 们 各 自 有 着 不 同 的 关联 事 
对 象 。 


onclose 


WebSocket 连 接 关 闭 时 将 触发 一 个 close 事 件 (同时 readyState 将 改变 为 
0 。 关 联 的 事件 对 象 为 CloseEvent， 指 明 当 前 连接 是 否 干净 地 
关闭 了 。 


Onerror 


当 发 生 网 络 或 WebSocket 协 议 错 误 时 将 触发 一 个 error 事 件 。 关 联 的 事件 
对 和 象 为 一 个 简单 的 Event 。 


onmessage 


当 服 务 絮 通过 WebSocket 发 送 数 据 时 ， 这 个 WebSocket 将 触发 一 个 
message 事 件 ， 伴 随 着 一 个 关联 的 MessageEvent 对 象 ， 该 对 象 的 data 属 性 
指 代 接 收 到 的 消息 。 


onopen 
在 与 指定 url 之 间 的 连接 建立 起 来 之 前 ，WebSocket() 构 造 玉 数 就 返回 
了 。 当 连接 握手 完成 ，WebSocket 已 准备 好 发 送 和 接收 数据 时 ， 将 触发 
一 个 open 事 件 。 关 联 的 事件 对 象 为 一 个 简单 的 Event 。 

Window 

浏览 器 窗口 、 标 签 或 框架 页 面 

EventIarget 

Window 对 和 象 表示 一 个 浏览 器 窗口 、 标 签 或 者 框 染 页 面 。 它 的 详细 文档 


见 第 14 章 。 在 客户 端 JavaScript 中 ，Window 是 “全 局 对 象 "， 所 有 表达 式 
都 是 在 当前 Window 对 象 的 上 下 文中 计算 的 。 这 束 是 说 ， 引 用 当前 


window 不 需要 特殊 的 语法 ， 可 以 将 window 对 象 的 属性 像 全 局 变量 一 样 
人 使用。 例如， 可 以 将 window.document 写 成 document。 类 似 地 ， 可 以 像 
函数 一 样 使 用 当前 window 对 象 的 方法 ， 例 如 将 window.alertO 写 成 
alert() ° 


这 个 对 象 的 一 些 属性 及 方法 的 确 以 某 种 方式 查询 或 操作 浏览 器 窗口 ， 
而 另外 那些 列 在 这 儿 是 因为 它 是 全 局 对 象 。 除 了 这 儿 列 出 的 属性 和 方 
法 ，Window 对 象 也 实现 了 核心 JavaScript 定 义 的 所 有 全 局 属性 和 函数 。 
更 多 细节 参见 本 书 第 三 部 分 的 Global 。 


Web 浏 览 右 会 在 window 上 触发 很 多 种 事件 。 这 意味 着 Window 对 象 定 义 
了 相当 多 的 事件 处 理 程 序 ， 同 时 ，Window 对 象 也 实现 由 EventTarget 定 
义 的 各 个 方法 。 


Window 对 和 象 的 window 和 self 属 性 都 指 代 当前 窗口 对 象 本 身 。 可 以 使 用 
这 两 个 属性 来 显 式 引用 当前 窗口 。 


一 个 Window 可 以 包含 别 的 Window 对 象 ， 通 常 以 <iframe>> 标 签 的 形 

式 。 每 个 Window 都 是 由 符 套 的 Window 对 象 组 成 的 一 个 类 数组 对 象 。 不 
过 ， 一 般 不 采用 直接 检索 一 个 window 对 象 的 方法 ， 而 是 使 用 它 的 自 引 
用 的 frames 属 性 ， 把 这 个 属性 当做 对 应 的 类 数组 对 象 。Window 的 parent 
和 和 top 属性 则 指 代 当前 窗口 的 直接 容器 窗口 以 及 顶层 祖先 窗口 。 


可 以 使 用 Window.open() 方 法 来 创建 新 的 顶级 浏览 器 窗口 。 调 用 这 个 方 
法 时 ， 可 以 将 open0) 的 返回 值 你 存在 一 个 变量 里 ， 之 后 可 通过 这 个 变量 
来 引用 这 个 新 窗口 。 新 窗口 的 opener 属 性 则 指 回 打开 它 的 那个 窗口 。 


属性 


除了 这 儿 列 出 的 属性 ， 显 示 在 窗口 中 的 文档 内 容 也 会 生成 新 的 属性 。 
如 同 14.7 太 解释 过 的 ， 可 以 将 文档 中 的 元 素 的 id 属 性 值 作为 当前 window 
的 属性 来 引用 这 个 元 素 (并 且 由 于 window 是 全 局 对 象 ， 因 此 它 的 属性 


也 将 是 全 局 变量 ) 


readonly ApplicationCache applicationCache 


指 代 ApplicationCache 对 象 。 已 缓存 的 或 离线 的 Web 应 用 可 以 使 用 这 个 
对 象 来 管理 它们 的 缓存 更 新 。 


readonly any dialogArguments 


在 由 showModalDialog0 创 建 的 Window 对 象 中 ， 这 个 属性 是 传 入 到 
showModalDialog() 的 arguments 值 。 在 常规 Window 对 象 中 不 存在 这 个 属 
性 。 更 多 信息 可 参见 14.5 闻 。 


readonly Document document 
描述 当前 窗口 的 内 容 的 Document 对 象 (细节 参见 Document) 。 
readonly Event event[IE only] 


在 Internet Explorer 中 ， 这 个 属性 指 癌 描述 最 近 的 事件 的 Event 对 象 。 
0 事件 对 象 并 不 总 是 会 传人 到 什 处 理 程序 中 
时 只 能 通过 这 个 属性 来 访问 事件 对 象 。 更 多 细节 可 参见 第 17 章 。 


readonly Element frameElement 


如 果 当 前 Window 位 于 一 个 <iframe> 中 ， 这 个 属性 将 指 代 这 个 IFrame 
元 素 。 对 顶级 窗口 来 说 ， 这 个 属性 将 为 null 。 


readonly Window frames 


个 属性 类 似 于 self 和 window 属 性 ， 指 代 当 前 Window 对 象 本 身 。 每 个 
| 它 包 含 的 框 采 页面 组 成 的 类 数组 对 象 。 如 果 要 引用 
某 个 窗口 w 中 的 第 一 个 框架 页 面 ， 这 个 属性 允许 使 用 更 清晰 的 写法 
w.frames[0]， 而 不 是 w[0]。 


readonly History history 
当前 窗口 的 History 对 象 。 参 见 History。 
readonly long innerHeight 


readonly long innerWidth 


当前 窗口 显示 区 域 的 文档 的 高 度 和 宽度 ， 单 位 是 像素 。IE8 及 更 早 的 版 
本 不 文 持 这 些 属性 。 示 例 可 见 例 15-9。 


readonly unsigned long length 
当前 窗口 包含 的 框架 页 面 的 数目 。 参 见 frames 。 
readonly Storage localStorage 


这 个 属性 指 代 一 个 提供 客户 端 名 / 值 对 存储 的 Storage 对 象 。 通 过 
localStorage 存 储 的 数据 对 任意 同 源 的 文档 都 可 见 并 共享 ， 并 将 持续 存 
在 直到 被 用 户 或 其 他 脚本 删除 。 也 可 参见 sessionStorage 和 20.1 广 。 


readonly Location location 


当前 窗口 的 Location 对 象 。 这 个 对 象 指明 当前 加 载 的 文档 的 URL ° 将 这 
个 属性 设置 为 一 个 新 的 UREL 字 人 符 串 将 导致 浏览 右 加 载 并 显示 那个 URL 
的 内 容 。 人 参见 Location 。 


string name 


当前 窗口 的 名 字 。name 属 性 是 可 选 的 ， 可 以 在 使 用 open0 方 法 创建 窗口 
时 指定 或 者 通过 < frame> 标签 的 name 属 性 指定 。 窗 口 的 name 可 用 做 < 
a 或 <form> 标签 的 target 属 性 的 值 。 以 这 种 方式 使 用 target 属 性 ， 表 
示 超 链接 连接 的 文档 或 者 表单 提交 的 结果 应 该 在 指定 名 字 的 窗口 或 框 
染 页 面 中 显示 。 


readonly Navigator navigator 


指 代 Navigator 对 象 ， 该 对 象 提供 当前 We b 浏 览 器 的 版 本 及 配置 信息 。 


参见 Navigator 。 
readonly Window opener 


一 个 可 读 写 的 引用 ， 指 代 包 含 调用 open() 方 法 打开 当前 浏览 絮 窗 口 的 脚 
本 的 那个 Window 对 象 ， 对 不 是 以 这 种 方式 创建 的 窗口 来 说 这 个 属性 为 
null。 这 个 属性 只 对 顶级 窗口 对 应 的 Window 对 象 有 效 ， 对 框架 页 面 无 
效 。opener 属 性 很 有 用 ， 通 过 这 个 属性 ， 新 创建 的 窗口 可 以 引用 在 创建 
它 的 窗口 中 定义 的 属性 和 画 数 。 


readonly long outerHeight 


readonly long outerWidth 


这 两 个 属性 指明 当前 浏览 器 窗口 的 总 高 度 和 宽度 ， 单 位 为 像素 ， 包 括 
工具 栏 、 滚 动 条 、 窗 口 边 框 等 。IE8 及 更 早 的 版 本 不 支持 这 两 个 属性 。 


readonly long pageXOffset 
readonly long pageYOffset 


当前 文档 深 过 的 右边 (pageXOffset) 及 下 边 (pageYOffset) 的 像素 
值 。 耻 8 及 更 早 的 版 本 不 文 持 这 两 个 值 。 示 例 及 兼容 下 的 代码 见 例 15- 
8 Oo 


readonly Window parent 


包含 当前 窗口 的 Window 对 象 。 如 果 当 前 窗口 是 一 个 顶级 窗口 ， 则 
parent 属 性 将 指 代 当前 窗口 本 身 。 如 果 当 前 窗口 是 一 个 框架 页 面 ， 则 
parent 属 性 将 指向 包含 它 的 窗口 或 框架 页 面 。 


string returnValue 
普通 窗口 没有 这 个 属性 ， 它 适用 于 由 showModalDialog() 创 建 的 


Window， 默 认 值 为 空 字符 串 。 一 个 对 话 框 窗口 关闭 时 (参见 close() 方 
法 ) ， 这 个 属性 的 值 将 成 为 showModalDialog0 的 返回 值 。 


readonly Screen screen 


Screen 对 象 指定 关于 当前 屏幕 的 信息 : 有 效 的 像素 数 和 色彩 数 。 细 节 可 


参见 Screen。 


readonly long Screen 又 


readonly long ScreenY 


当前 窗口 的 左上 和 角 在 屏幕 中 的 坐标 。 


readonly Window self 


对 当前 窗口 自身 的 一 个 引用 。 它 是 window 属 性 的 一 个 同义词 。 


readonly Storage sessionStorage 


这 个 属性 指 代 一 个 提供 客户 端 名 / 值 对 存储 的 Storage 对 象 。 通 过 
sessionStorage 存 储 的 数据 只 对 在 同样 的 顶级 窗口 或 标签 中 的 同 源 文档 
可 见 ， 并 只 持续 到 当前 浏览 会 话 结束 。 也 可 参见 localStorage 和 20.1 广 。 


readonly Window top 
包含 当前 窗口 的 顶级 窗口 。 如 采 当 前 窗口 本 吴 已 经 是 顶级 窗口 了 ， 则 
这 个 top 属 性 将 只 是 简单 地 指 代 当 前 窗口 本 身 。 如 果 当 前 窗口 是 一 个 框 


架 页 面 ， 则 top 属 性 将 指 代 包 含 当 前 框架 页 面 的 顶级 窗口 。 注 意 它 与 
parent 属 性 的 不 同 。 


readonly object URL 


在 写作 本 书 的 时 候 ， 这 个 属性 还 只 是 简单 地 引用 一 个 占 位 对 象 ， 这 个 
对 象 定义 的 函数 的 文档 见 URL 部 分 。 将 来 ， 这 个 属性 可 能 会 变 成 一 个 
URLO 构 造 画 数 并 定义 用 于 解析 URL 和 它们 的 查询 字符 串 的 API。 


readonly Window window 


window 属 性 和 self 属 性 完全 一 样 ， 它 包含 对 当前 窗口 的 一 个 引用 。 由 于 
Window 对 象 是 客户 端 JavaScript 的 全 局 对 象 ， 因 此 这 个 属性 允许 写 
window 来 引用 这 个 全 局 对 象 。 


构造 男 数 


作为 客户 端 JavaScript 的 全 局 对 象 ，Window 对 象 必 须 定 义 用 于 客户 端 环 
境 的 所 有 全 局 构造 函数 。 虽 然 在 这 儿 没 有 列 出 ， 不 过 这 个 部 分 中 的 所 
有 全 局 构造 函数 都 是 window 对 象 的 属性 。 人 例如， 客户 端 JavaScript 定 义 
本 Image() 和 XMLHttpRequest() 构 造 久 数 的 事实 表示 ， 每 一 个 Window 对 
象 都 有 名 为 Inage 和 XMLHttpRequest 的 属性 。 


方法 


Window 对 象 定义 了 下 面 的 方法 ， 同 时 也 继承 了 由 核心 JavaScript 定 义 的 
所 有 全 局 画 数 (参见 第 三 部 分 的 Global) 。 


void alert(string message) 


alert0) 方 法 在 一 个 对 话 框 中 癌 用 户 显 示 一 段 指定 的 纯 文本 message。 这 个 
对 话 框 包含 一 个 OK 按钮 ， 用 户 可 以 单 击 以 便 关 闭 这 个 对 话 框 。 这 个 对 
话 框 一 般 是 模 态 的 (至少 对 当前 标签 而 言 是 这 样 ， 调 用 alert() 将 阻塞 
后 面 的 代码 ， 直 到 当前 对 话 框 关闭。 


string atob(string atob) 


这 个 工具 画 数 接收 一 个 基 64 编 码 的 字符 串 并 将 它 解码 为 一 个 JavaScript 
二 进 制 字符 串 ， 其 中 每 个 字符 代表 一 个 单独 的 字 节 。 可 以 使 用 返回 的 
字符 串 的 charCodeAt() 方 法 来 提取 字 节 值 。 也 可 参见 btoa0 。 


void blur() 


blur0) 方 法 将 键 副 焦点 从 当前 Window 对 象 指定 的 顶级 浏览 右 窗 口 移 除 。 
它 不 会 指定 接 下 来 键盘 焦点 会 由 哪个 窗口 获得 。 在 某 些 浏览 絮 和 /或 平 
台 上 ， 这 个 方法 可 能 无 效 。 


string btoa(string btoa) 


这 个 工具 函数 接收 一 个 JavaScript 二 进 制 字 符 串 (其 中 每 个 字符 代表 一 
个 单独 的 字 节 ) 作为 参数 ， 返 回 对 应 的 基 64 编 码 的 值 。 可 以 使 用 
String.fromCharCode() 来 从 一 个 任意 的 字 忆 值 序 列 创建 一 个 二 进 制 字 符 
串 。 也 可 参见 atob()。 


void clearInterval(long handle) 


clearInterval() 停 止 由 调用 setInterval() 开 始 的 某 段 代码 的 重复 执行 。 
intervalId 必 须 是 调用 setInterval0 返 回 的 值 。 


void clearTimeout(long handle) 


clearTimeoutO 取 消 由 setTimeout0 方 法 推迟 的 某 段 代码 的 执行 。 
timeoutId 参 数 必 须 是 调用 setTimeout0 的 返回 值 ， 它 标识 要 退出 哪 段 推 
述 的 代码 。 


void closel() 


close() 方 法 关闭 调用 该 方法 的 顶级 窗口 。 脚 本 一 般 只 允许 关闭 由 它们 自 
己 打开 的 窗口 。 


boolean confrm(string message) 


这 个 方法 在 一 个 模 态 对 话 框 中 以 纯 文本 的 形式 显示 指定 的 问题 。 这 个 
对 话 框 包含 OK 和 Cancel 按 钮 ， 用 户 可 通过 这 两 个 按钮 回答 提出 的 问 
题 。 如 果 用 户 单 击 OK 按钮 ，confirm0 将 返回 true。 如 果 用 户 单 击 Cancel 
按钮 ，confirm() 将 返回 false 。 


void focus() 


这 个 方法 让 当前 浏览 器 窗口 获得 键盘 焦点 。 在 大 多 数 平台 上 ， 当 项 级 
窗口 获得 焦点 时 ， 它 将 显示 到 窗口 栈 的 项 部， 这 样 它 就 会 变 得 可 见 。 


CSSStyleDeclaration getComputedStyle(Element elt,[string pseudoE]lt]) 


文档 中 的 一 个 元 素 可 以 从 内 联 样式 属性 以 及 样式 表 “ 级 联 ” 中 任意 数量 

的 样式 表 中 获得 样式 信息 。 在 某 个 元 素 正 式 显 示 在 窗口 中 之 前 ， 必 须 

先 从 这 个 级 联 中 提取 它 的 样式 信息 ， 同 时 那些 以 相对 单位 (如 百分比 

或 是 "ems") 定义 的 样式 也 必须 “计算 ”出 来 以 便 转 换 为 像素 。 这 些 计算 
出 的 值 有 时 也 叫做 “使 用 ”的 值 。 


这 个 方法 返回 一 个 只 读 的 CSSStyleDeclaration 对 象 ， 反 映 了 显示 这 个 元 
素 实 际 使 用 的 CSS 样 式 值 。 所 有 的 尺寸 都 以 像素 为 日 位。 


这 个 方法 的 第 二 个 参数 通常 省 上 略 或 为 null， 不 过 也 可 以 传 入 CSS 伪 元 
素 "::before" 或 "::after" 来 决定 用 于 CSS 生 成 内 容 的 样式 。 


比较 一 下 HTMLElement 有 的 getComputedStyle() 和 style 属 性 ， 后 者 允许 访 
问 某 个 元 素 的 内 联 样式 ， 使 用 它们 定义 时 的 单位 ， 并 且 不 包括 任何 应 
用 到 该 元 素 的 样式 表 样 式 信息 。 


在 IE8 及 更 早 的 版 本 中 不 支持 这 个 方法 ， 不 过 可 以 通过 每 个 
HTMLElement 对 象 的 非 标 准 属性 currentStyle 来 完成 相似 功能 。 


Window open([string urlj,[string targetj],[string features],[string replace]) 


open() 方 法 在 一 个 新 的 或 现存 的 浏 贤 器 窗口 或 标签 中 加 载 并 显示 指定 的 
url。url 参 数 指定 要 加 载 的 文档 。 如 采 没 有 指定 ， 则 将 使 
用 "about:blank"。 


target 参 数 指定 用 于 加 载 指 定 url 的 窗口 的 名 字 。 如 果 没 有 指定 ， 则 将 使 
用 "_blank"。 如果 target 为 "_blank"， 或 不 存在 指定 名 字 的 已 有 窗口 ， 则 
0 。 否则 ，url 将 在 现存 的 指定 名 字 的 
窗口 中 加 载 。 


features 参 数 用 于 指定 窗口 的 位 置 、 尺 寸 以 及 特性 (比如 菜单 栏 、 工 具 
栏 等 ) 。 在 支持 标签 的 现代 浏览 器 中 ， 这 个 参数 通常 会 忽略 ， 所 以 这 
儿 没 有 列 出 它 的 文档 。 


当 使 用 Window.open() 在 一 个 已 经 存在 的 窗口 中 加 载 新 文档 时 ，replace 
参数 指定 新 文档 是 否 在 这 个 窗口 的 浏览 历史 中 添加 一 条 自己 的 记录 ， 
或 者 替换 当前 文档 的 历史 记录 。 如 果 replace 为 tue， 则 新 文档 将 巷 换 掉 
上 日 文档 。 如 果 这 个 参数 为 false 或 未 指定 ， 则 新 文档 将 在 该 Window 的 浏 
多 历史 中 有 一 条 目 己 的 记录 。 这 个 参数 提供 的 功能 非常 类 似 


Location.replace() 方 法 。 


void postMessage(any message,string targetOrigin,[MessagePort[]ports]) 


仅 当 当前 窗口 显示 的 文档 有 指定 的 targetOrigin 时 ， 发 送 指定 message 以 
及 可 选 ports 的 一 个 副本 到 当前 窗口 中 。 


messa ge 可 以 是 任意 能 用 结构 性 复制 算法 (参见 22.2 节 的 “结构 性 复 
制 ") 复制 的 对 象 。targetOrigin 应 该 是 一 个 指定 期 望 源 的 模式 、 主 机 以 
及 端口 的 绝对 URL。 如 果 任 意 源 都 可 接受 ，targetOrigin 也 可 以 是 “*”， 
或 者 如 果 想 使 用 脚本 自身 的 源 则 可 以 是 "/”。 


在 一 个 窗口 上 调用 这 个 方法 将 在 这 个 窗口 上 和 触发 一 个 消息 事件 。 参 见 
MessageEvent 和 22.3 人 。 


void print() 

调用 print0) 方 法 ， 效 琳 等 同 于 用 户 选 择 浏 览 器 的 人 J 印 ” 按 钮 或 六 单项 。 
一 般 来 说 ， 这 会 弹出 一 个 对 话 框 ， 人 允许 用 户 取 消 或 定制 打印 请 求 。 
string prompt(string message,[string default]) 


promptO0 方 法 在 一 个 模 态 对 话 框 中 显示 指定 的 message， 同 时 包含 一 个 
文本 输入 区 以 及 OK 和 Cancel 按 钮 ， 它 将 阻塞 页 面 ， 直 到 用 户 单 击 这 两 
个 按钮 中 的 一 个 。 


如 果 用 户 单 击 Cancel 按 钮 ，promptO 将 返回 nul。 如 果 用 户 单 击 OK 按 
钮 ， 则 promptO 将 返回 当前 在 对 话 框 中 的 文本 输入 区 显示 的 文本 。 


default 参 数 指定 文本 输入 区 的 初始 文本 。 

void scroll(long x,long y) 

这 个 方法 等 同 于 scrollTo()。 

void scrollBy(long x,long y) 

scrollBy0) 深 动 当 前 window 中 显示 的 文档 ，dx 和 dy 指定 滚动 的 相对 量 。 
void scrollTo(long x,long y) 


scrollTo() 深 动 当 前 window 中 显示 的 文档 ， 如 果 可 能 的 话 ， 让 文档 中 由 
坐标 x 和 y 指 定 的 点 位 于 显示 区 域 的 左上 角 。 


long setInterval(function f,unsigned long interval,any args...) 


setInterval0 将 函数 { 注 册 为 interval 坚 秒 后 调用 ， 并 且 接 下 来 每 隔 指定 的 
interval 束 重复 调用 一 次 。 当 前 窗口 将 作为 调用 f 时 的 this 值 ， 同 时 所 有 传 
入 setInterval 的 额外 参数 args 将 传 入 f。 


setInterval0 返 回 一 个 数字 ， 稍 后 可 以 将 这 个 数字 传 入 到 
Window.clearInterval() 来 取消 这 段 代 码 的 执行 。 


由 于 历史 原因 ，f 可 能 是 一 段子 符 串 形式 的 JavaScript 代 码 而 不 是 一 个 芳 
数 。 在 这 种 情况 下 ， 这 上段 字符 串 将 每 隔 interval 毫 秒 求 值 (就 像 它们 是 
二 和 EN 

如 有 果 你 想 推迟 一 段 代码 的 执行 ， 但 不 希望 它 重 复 执 行 ， 可 以 使 用 


setTimeout() ° 


long setTimeout(function f,unsigned long timeout,any args...) 


setTimeout() 类 似 于 setInterval()， 不 同 之 处 是 它 只 执行 指定 的 函数 一 
次 : 写 将 注册 为 tmeout 坚 秒 后 调用 ， 并 返回 一 个 数字 ， 稍 后 可 将 这 个 
数字 传 入 clearTimeout(0) 来 取消 延迟 的 调用 。 当 指定 的 时 间 过 去 后 ，f 将 


作为 Window 的 一 个 方法 调用 ， 同 时 会 传 入 任意 指定 的 args 。 如 来 f 是 一 
个 字符 串 而 不 是 一 个 函数 ， 则 它 将 在 timeout 又 秒 后 执行 ， 执 行 效 果 就 
像 它 是 一 个 <script> 一 样 。 


any showModalDialog(string url,[any arguments]) 


这 个 方法 创建 一 个 新 的 Window 对 象 ， 将 它 的 dialogArguments 属 性 设 为 
arguments， 在 这 个 窗口 中 加 载 arl， 然 后 阻塞 进程 ， 直 到 这 个 窗口 关 

闭 。 一 旦 关闭 ， 它 将 返回 这 个 窗口 的 returnValue 属 性 。 讨 论 及 示例 参见 
14.5 广 和 例 14-4。 
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大 多 数 发 生 在 HTML 元 素 上 的 事件 会 在 文档 树 中 同上 冒 泡 ， 到 达 
Document 对 象 ， 然 后 再 到 达 Window 对 象 。 所 以 ， 在 Element 上 列 出 的 
所 有 事件 处 理 程序 属性 都 可 以 用 在 Window 对 象 上 。 另 处， 还 可 以 使 用 
下 面 列 出 的 事件 处 理 程 序 属性 。 由 于 历史 原因 ， 这 儿 列 出 的 每 个 事件 
处 理 程 序 属性 也 都 可 以 〈 作 为 一 个 HTML 属 性 或 JavaScript 属 性 ) 定义 
在 <body> 元 素 上 。 
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onafterprint 
onbeforeprint 


onbeforeunload 


onblur 


ONerror 


onfocus 


onhashchange 


onload 


oNMESSage 


onoffline 
ononline 


onpagehide 


触发 条 件 
在 当前 窗口 的 内 容 输 出 之 后 
在 当前 窗口 的 内 容 输出 之 前 


在 从 当前 页 面 离开 之 前 。 如 果 返 回 值 为 一 个 字符 串 ， 或 者 这 个 处 理 程 
序 将 它 的 事件 对 象 的 returnValue 属 性 设置 为 一 个 字符 串 ， 则 这 个 字 
符 串 会 在 一 个 确认 对 话 框 中 显示 。 参 见 BeforeUn1oadEvent 


当当 前 窗口 失去 键盘 焦点 时 


当 发 生 一 个 JavaScript 错 误 时 。 这 不 是 一 个 党 规 事件 处 理 程序 ， 参 见 
14.6 节 


当当 前 窗口 获得 键盘 焦点 时 


当当 前 文档 的 片段 标识 符 (参见 Location,hash) 作为 历史 导航 的 一 
个 结果 发 生 改变 时 (参见 HashChangeEvent) 


当当 前 文档 以 及 它 的 外 部 资源 全 部 加 载 完成 时 
当 另 一 个 窗口 中 的 脚本 通过 postMessage() 方 法 发 送 一 条 消息 时 。 参 见 


MessageEvent 

当 浏览 器 从 Internet 掉 线 时 

当 浏览 禹 再 次 连接 到 Intemet 时 

当当 前 页 面 正 要 缓存 并 被 男 一 个 页 面 堆 换 时 


事件 处 理 程序 。 触发 条 件 


onpageshow 当 一 个 页 面 第 一 次 加 载 时 ， 在 1oad 事 件 之 后 将 紧 接着 触发 一 个 
pageshow 事 件 ， 对 应 的 事件 对 象 将 有 一 个 值 为 false 的 persisted 属 
性 。 不 过 ， 当 之 前 加 载 过 的 页 面 从 浏览 器 的 内 存 缓存 中 恢复 时 ， 将 不 
会 触发 load 事 件 (因为 这 个 已 缓存 的 页 面 已 经 处 于 已 加 载 状 态 ) ,但 
会 触发 一 个 pageshow 事 件 ， 且 这 个 事件 对 象 的 persisted 属 性 为 true。 
参见 pageTransitionEvent 


onpopstate 当 浏览 器 加 载 一 个 新 的 页 面 或 恢复 由 History,pushState() 或 History， 
replaceState() 保 存 的 一 个 状态 时 。 参 见 popStateEvent 


onresize 当 用 户 改变 当前 浏览 器 窗口 的 尺寸 时 

onscroll 当 用 户 滚动 当前 浏览 禹 窗口 时 

onstorage localStorage 或 sessionStorage 的 内 容 发 生 改 变 。 参 见 StorageEvent 
onunload 浏览 器 从 一 个 页 面 导航 离开 。 注 意 ， 如 采 为 一 个 页 面 注 册 了 onunload 


处 理 程序 ， 则 这 个 页 面 将 不 能 缓存 。 要 让 用 户 不 用 重新 加 载 就 快速 返 
回 到 页 面 ， 应 该 使 用 onpagehide 


Worker 
worker 线 程 


EventIarget 


Worker 表 示 一 个 后 台 线 程 。 可 使 用 Worker0 构 造 函 数 来 创建 一 个 新 的 
Worker， 传 入 一 个 JavaScript 代 码 文 件 的 URL 让 它 执 行 。 在 那个 文件 中 
的 JavaScript 代 码 可 以 使 用 同步 的 API 或 者 执行 计算 密 0 
致 主 UI 线程 冻结 。Worker 在 一 个 完全 隔离 的 执行 上 下 文 ( 参 
Re 


一 方式 是 使 用 异步 事件 。 可 以 调用 postMessage(0) 来 同 Worker 发 送 数据 ， 
然后 处 理 消息 事件 以 接收 来 自 这 个 Worker 的 数据 。 


关于 Worker 线 程 的 介绍 可 参见 22.4 节 。 
构造 函数 


new Worker(string ScriptURL) 


构造 一 个 新 的 Worker 对 象 ， 并 让 它 执行 scriptURL 中 的 JavaScript 代 码 。 
方法 
void postMessage(any message,[MessagePort[]ports]) 


发 送 消息 message 给 指定 Worker， 这 个 Worker 将 以 发 送 到 它 的 onmessage 
处 理 程序 的 MessageEvent 对 象 的 形式 接收 这 条 消息 。 "message 可 以 是 一 
个 JavaScript 的 原始 值 、 对 象 或 数组 ， 但 不 能 是 函数 。 窗 户 端 类 型 (如 
ArrayBuffer、File、 Blob 及 ImageData) 汗 介 许 交 ;但 不 公主 刘 
Document 和 Element 等 Node (细节 可 参见 22.2 节 的 “结构 性 复制 ”) 


可 选 的 ports 参 数 是 一 个 高 级 特性 ， 允许 传 入 一 个 或 多 个 下 接 通 信 通 道 
到 Worker 中 。 例 如 ， 如 果 创 建 了 两 个 Worker 对 象 ， 可 以 通过 为 它们 分 
别传 入 MessageChannel 的 一 个 终端 让 它们 直接 相互 通信 。 


void terminate() 
停止 当前 Worker 并 中 止 它 正 在 执行 的 脚本 。 
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由 于 Worker 在 一 个 与 创建 它 的 环境 完全 分 离 的 执行 环境 中 运行 代码 ， 


因此 它 与 它 的 父 线程 通信 的 唯一 方式 就 是 事件 。 可 以 使 用 下 面 的 属性 
来 注册 事件 处 理 程序 或 者 使 用 EventTarget 方 法 。 


Onerror 


当 Worker 正 在 执行 的 脚本 中 抛 出 异常 ， 并 且 这 个 错误 没有 被 
WorkerGlobalScope 的 onerror 处 理 程序 处 理 时 ， 这 个 错误 将 在 当前 
Worker 对 象 上 触发 一 个 error 事 件 。 与 这 个 事件 关联 的 事件 对 象 是 一 个 
ErrorEvent。 这 个 错误 事件 不 会 冒 抱 。 如 果 这 个 Worker 必 于 另 一 个 
Worker， 取 消 这 个 错误 事件 将 阻止 它 癌 上 传播 到 父 Worker。 如 果 当 前 
Worker 对 和 象 已 经 在 主线 程 中 ， 取 消 这 个 事件 可 能 会 阻止 它 在 JavaScript 
控制 台中 显示 。 


onmessage 


当 Worker 下 在 运行 的 脚本 调用 它 的 全 局 postMessage() 函 数 (参见 
WorkerGlobalScope) 上 时， 将 会 在 这 个 Worker 对 象 上 触发 一 个 消息 事 
件 。 传 给 这 个 事件 处 理 程序 的 对 象 是 一 个 MessageEvent， 它 的 data 属 性 
包含 这 个 Worker 脚 本 传 给 postMessage0 的 值 的 一 个 副本 。 


N 


WorkerGlobalScope 
EventTarget 、 Global 


Worker 线 程 运行 在 一 个 和 生成 它 的 父 进程 完全 不 同 的 执行 环境 里 。 
worker 的 全 局 变量 是 一 个 WorkerGlobalScope 对 象 ， 因 此 这 个 页 面 在 一 
个 Worker 中 摘 述 了 对 应 的 执行 环境 。 由 于 WorkerGlobalScope 是 一 个 全 
局 对 象 ， 因 此 它 继 承 自 核心 JavaScript 的 Global 对 象 。 


属性 


除了 这 儿 列 出 的 属性 ，WorkerGlobalScope 也 定义 了 核心 JavaScript 的 所 
有 全 局 属性 ， 比 如 Math 和 JSON 。 


readonly WorkerLocation location 
这 个 属性 类 似 于 window.location 对 应 的 Location 对 象 : 允许 一 个 worker 
仿 查 它 加 载 自 哪个 URL， 同 时 包含 一 些 返 回 这 个 URL 的 独立 部 分 的 属 


readonly WorkerNavigator navigator 


这 个 属性 类 似 于 window.navigator 对 应 的 Navigator 对 象 : worker 可 根据 
它 定 义 的 属性 判断 当前 它 正在 运行 的 浏 贤 如 以 及 它 当 前 是 否 在 线 。 


readonly WorkerGlobalScope self 


这 个 自 引 用 的 属性 指 代 当 前 WorkerGlobalScope 全 局 对 象 本 身 。 它 类 似 
于 主线 程 中 Window 对 象 中 的 window 属 性 。 


方法 


除了 这 儿 列 出 的 方法 ，WorkerGlobalScope 也 定义 了 核心 JavaScript 的 所 
有 全 局 函数 ， 例 如 isNaNO 和 eval0。 


void clearInterval(long handle) 

这 个 方法 和 Window 中 同名 的 方法 一 样 。 
void clearTimeout(long handle) 

这 个 方法 和 Window 中 同名 的 方法 一 样 。 
void closel() 


这 个 方法 将 当前 worker 置 入 一 个 特殊 的 “关闭 ”状态 。 一 旦 进入 这 个 状 
态 ， 它 将 不 会 触发 任何 计时 器 或 事件 。 脚 本 将 继续 执行 ， 直 到 它 返 回 
worker 的 事件 循环 ， 此 时 worker 将 停止 。 


void importScripts(string urls...) 


对 于 所 有 指定 的 urls， 这 个 方法 将 相对 于 当前 worker 地 址 解析 它们 ， 然 
后 加 载 对 应 URL 的 内 容 ， 并 将 它们 的 内 容 当 做 JavaScript 代 码 执行 。 注 
意 这 是 一 个 同步 方法 。 它 按 顺 序 加 载 并 执行 各 个 文件 ， 并 且 在 所 有 脚 
本 执行 完 之 前 不 会 返回 。 (不 过 ， 如 果 任 何 脚 本 抛 出 了 异常 ， 这 个 异 
常 将 传播 并 且 阻 止 后 面 的 URL 的 加 载 与 执行 。) 


void postMessage(any message,[MessagePort[]ports]) 


发 送 一 条 message (以 及 一 个 可 选 的 端口 号 组 成 的 数组 ports) 给 生成 当 
前 worker 的 线程 。 调 用 这 个 方法 将 在 父 线程 的 Worker 对 象 上 触发 一 个 消 
息 事 件 ， 关 联 的 MessageEvent 对 象 的 data 属 性 为 message 的 一 个 副本 。 注 
意 ， 在 worker 中 ，postMessage0 是 一 个 全 局 函数 。 


long setInterval(any handler,[any timeout],any args.…) 
这 个 方法 和 Window 中 同名 的 方法 一 样 。 

long setTimeout(any handler,[any timeout],any args...) 
这 个 方法 和 Window 中 同名 的 方法 一 样 。 

构造 函数 


WorkerGlobalScope 包 含 核心 JavaScript 的 所 有 构造 男 数 ， 如 Array0O 、 
Date0 以 及 RegExp0。 它 也 为 诸如 XMLHttpRequest \、FileReaderSync 甚 
至 Worker 对 和 象 本 里 等 定义 了 重要 的 客户 剖 构 造 范 数 。 


事件 处 理 程序 


可 通过 设置 这 些 全 局 事件 处 理 程序 属性 来 为 worker 注 册 事 件 处 理 程序 ， 
也 可 以 使 用 由 WorkerGlobalScope 实 现 的 EventTarget 方 法 。 


Onerror 


这 不 是 一 个 普通 的 事件 处 理 程 序 : 相对 于 Worker 的 onerror 属 性 ， 它 更 
像 window 的 onerror 属 性 。 当 worker 中 发 生 了 一 个 未 处 理 的 异 铝 时 ， 如 
果 定 义 了 这 个 处 理 函 数 ， 则 它 将 被 调用 并 传 入 三 个 字符 串 参 数 ， 分 别 
定义 错误 消息 、 脚 本 URL 以 及 一 个 行 号 。 如 果 这 个 函数 返回 false， 则 
将 认为 这 个 销 误 已 经 处 理 ， 并 且 不 会 继续 传播 。 和 否则， 如 果 没 有 设置 
这 个 属性 ， 或 错误 处 理 程序 没有 返回 false， 则 错误 将 传播 并 将 在 父 线 
程 的 Worker 对 象 上 触发 一 个 错误 事件 。 


onmessage 


当 父 线程 调用 了 代表 当前 worker 的 Worker 对 象 的 postMessage() 方 法 时 ， 
将 在 当前 WorkerGlobalScope 上 解 发 一 个 消 居 事件。 一 个 MessageEvent 
对 象 将 传 入 这 个 事件 处 理 函 数 ， 这 个 对 象 的 data 属 性 将 保存 父 线程 发 送 
的 message 参 数 的 一 个 副本 。 


WorkerLocation 


worker 的 主 脚 本 的 URL 


WorkerGlobalScope 的 location 属 性 指 代 的 WorkerLocation 对 象 类 似 
Window 的 location 属 性 指 代 的 Location 对 象 : 它 表 示 该 worker 的 主 脚 本 
的 URL， 同 时 定义 了 一 些 代表 了 这 个 URL 的 各 个 部 分 的 属性 。 
Worker 和 Window 的 不 同 之 处 是 它们 不 能 导航 或 重新 加 载 ， 所 以 对 应 
WorkerLocation 对 象 的 属性 是 只 读 的 ， 这 个 对 象 也 没有 实现 Location 对 
象 的 各 个 方法 。 


WorkerLocation 对 象 不 像 一 个 通常 的 地 址 对 象 那 样 会 自动 转化 为 字符 
串 。 在 worker 中 ， 不 能 将 ljocation.href 简 写 为 1ocation 。 


属性 

这 些 属性 和 Location 对 象 的 同名 属性 合 义 相同 。 
readonly string hash 

URE 的 片段 标识 符 ， 包 括 开 头 的 哈 希 标记 。 
readonly string host 

当前 URL 的 主机 和 端口 部 分 。 

readonly string hostname 

当前 URL 的 主机 部 分 。 

readonly string href 


传 入 Worker0 构 造 画 数 的 完整 的 URL 文 本 。 这 是 worker 和 直接 从 它 的 父 线 
程 中 接收 的 唯一 值 ， 其 他 值 都 间接 地 通过 消 居 事 件 接 收 。 


readonly string pathname 
当前 URL 的 路 径 名 部 分 。 
readonly string port 


当前 URL 的 端口 部 分 。 


readonly string Protocol 

当前 URL 的 协议 部 分 。 

readonly string search 

当前 URL 的 搜索 或 查询 部 分 ， 包 括 开头 的 问号 。 
WorkerNavigator 

worker 的 浏览 器 信息 


WorkerGlobalScope 的 navigator 属 性 指 代 一 个 WorkerNavigator 对 象 ， 这 
个 对 象 是 window 的 Navigator 对 和 象 的 一 个 简化 版 本 。 


属性 

这 些 属性 和 Navigator 对 象 中 的 同名 属性 侣 义 相 同 。 
readonly string appName 

参见 Navigator 的 appName 属 性 。 

readonly string appVersion 

参见 Navigator 的 appVersion 属 性 。 

readonly boolean onLine 

如 有 果 当 前 浏 贤 如 在线 则 为 tue; 否则 为 false。 
readonly string platform 

一 个 标识 运行 当前 浏览 器 的 操作 系统 以 及 /或 硬件 平台 的 字符 串 。 
readonly string userAgent 

浏 蜗 絮 用 于 HTTP 请 求 的 user-agent 尖 信息 的 值 。 


XMLHttpRequest 


HTTP 请 求 及 啊 应 
EventIarget 


XMLHttpRequest 对 象 允许 客户 端 JavaScript 发 出 HTTP 请 求 以 及 从 Web 服 
务 器 接收 响应 (必须 是 XML) 。XMLHttpRequest 是 第 18 章 的 主题 ， 那 
一 章 包 含 了 许多 关于 它 的 使 用 的 例子 。 


可 以 像 这 样 使 用 XMLHttpRequestQ 构 千本 数 (关于 如 何在 IE6 中 创建 
个 XMLHttpRequest 对 象 的 信息 请 参见 18.1 的 边栏 ) 创建 一 个 
XMLHttpRequest 并 使 用 它 : 

1. 调 用 open() 指 明 URL 和 请 求 的 方法 (通常 是 "GET" 或 "POST") 


2. 设 置 onreadystatechange 属 性 为 一 个 函数 ， 请 求 的 进度 会 通知 这 个 画 
o 


3. 如 果 需 要 的 话 ， 调 用 setRequestHeader() 来 指定 额外 的 请 求 参 数 。 


4. 调 用 send() 将 请 求 发 送 到 Web 服 务 右 。 如 采 这 是 一 个 POST 请 求 ， 也 可 
以 传 入 一 个 请 求 主体 (request body) 到 这 个 方法 中 。 随 着 请 求 进行 ， 
onreadystatechage 事 件 处 理 函 数 将 被 调用 。 当 readyState 为 4 时 ， 表 示 别 
应 完成 。 


5. 当 readyState 为 4 时 ， 检 查 状 态 码 status， 以 便 确 保 请 求 成 功 。 如 果 成 
功 ， 可 使 用 getResponseHeader0O 或 getResponseHeaders0) 来 从 响应 头 中 检 
索 值 ， 使 用 responseText 或 responseXML 属 性 来 取得 啊 应 主体 。 


XMLHttpRequest 定 义 了 HTTP 协 议 的 一 个 相对 高 级 的 接口 ， 关 于 重 定 
向 、cookie 管 理 以 及 使 用 CORS 头 协商 跨 域 连接 等 细节 都 将 由 它 处 理 。 


上 面 介绍 的 XMLHttpRequest 特 性 在 所 有 现代 浏览 器 中 都 有 很 好 的 文 
持 。 在 写作 本 书 的 时 候 一 个 XMLHttpRequest Level 2 标准 正在 开始 发 
布 ， 并 且 一 些 浏 览 器 已 经 开始 实现 它 。 下 面 列 出 的 属性 、 方 法 以 及 事 
件 处 理 程序 包含 XMLHttpRequest Level 2 特性 ， 这 些 特 性 可 能 还 没有 被 
所 有 浏 顺 器 实现 。 这 些 新 特性 将 用 "XHR2" 标 记 。 


构造 男 数 


new XMLHttpRequest() 


这 个 无 参数 的 构造 玉 数 返回 一 个 XMLHttpRequest 对 象 。 


这 些 常量 定义 readyState 属 性 的 值 。 在 a 这 些 常 量 没有 广泛 定 
义 ， 大 多 数 代 码 使 用 整数 字面 量 而 不 是 这 些 符号 值 。 


unsigned short UNSENT=0 


这 是 XMLHttpRequest 对 象 刚 创建 或 被 abort(0) 方 法 重 置 时 readyState 属 性 
的 初始 值 。 


unsigned short OPENED=1 
经 调用 open() 方 法 ， 但 还 没 调用 send() 方 法 。 还 没有 发 送 请 求 。 

unsigned short HEADERS_RECEIVED=2 

send() 方 法 已 调用 ， 已 经 接收 到 响应 头 ， 但 还 没有 接收 到 响应 主体 。 
unsigned short LOADING=3 
正在 接收 啊 应 主体 ， 但 还 没有 完成 。 
unsigned short DONE=4 
HTTPHO 应 已 全 部 接收 ， 或 由 于 错误 而 停止 。 
属性 
readonly unsigned short readyState 
HTTP 请 求 的 状态 以 及 服务 器 的 啊 应 。 当 一 个 XMLHttpRequest 首 次 创建 


时 这 个 属性 的 值 为 0， 然 后 逐渐 谴 增 ， 当 整个 HTTP 啊 应 已 接收 到 时 这 
个 属性 增加 为 4。 上 面 列 出 的 芝 量 指定 了 可 能 的 值 。 


readyState 的 值 永远 不 会 递 碱 ， 除 非 在 一 个 正在 进行 中 的 请 求 上 调用 了 
abort() 或 open()。 


理论 上 ， 每 当 这 个 属性 的 值 改变 时 都 会 分 发 一 个 readystatechange 事 件 。 
但 实际 上 ， 只 有 readyState 改 变 为 4 时 才 保 证 会 触发 这 个 事件 。 (XHR2 
的 进度 事件 提供 了 一 种 更 可 靠 的 跟踪 请 求 处 理 的 方法 。) 


readonly any response 


在 XHR2 中 ， 这 个 属性 保存 服务 器 的 响应 。 它 的 类 型 取决 于 
responseType 必 性。 如果 responseType 为 空 字符 串 或 "text"， 这 个 属性 将 
把 啊 应 主体 当做 一 个 字符 串 。 如 果 reponseType 为 "document"， 这 个 属性 
将 把 啊 应 主体 解析 为 一 个 XML 或 HTTP Document。 如 果 responseType 
是 "arraybuffer"， 这 个 属性 将 是 一 个 代表 啊 应 主体 的 字 节 的 ArrayBuffer 
对 象 。 如 果 responseType 是 "blob"， 这 个 属性 将 是 一 个 代表 啊 应 主体 的 
字 节 的 Blob 对 象 。 


readonly string responseText 


如 果 readyState 小 于 3， 这 个 属性 将 是 空 字符 串 。 当 readyState 为 3 时 ， 这 
个 属性 将 返回 目前 已 接收 到 的 响应 部 分 。 如果 readyState 为 4， 这 个 属性 
的 值 为 响应 的 全 部 主体 。 如 果 当 前 响应 的 头 信息 指定 主体 的 字符 编 
码 ， 则 这 个 编码 将 被 使 用 。 人 否则 ， 默 认 将 使 用 Unicode UTF-8 编 码 。 


string reSponseTIype 


在 XHR2 中 ， 这 个 属性 指明 期 望 的 响应 类 型 ， 并 判断 response 属 性 的 类 
型 。 合 法 的 值 有 "text"、"document"、"arraybuffer" 以 及 "blob"。 默 认 值 
为 空 字符 串 ， 等 同 于 "text"。 如 有 果 设 置 这 个 属性 ，responseText 和 
responseXML 属 性 将 抛 出 异常 ， 必 须 使 用 XHR2 的 response 属 性 来 获得 服 
务必 的 了 啊 应 。 


readonly Document responseXML 


请 求 对 应 的 响应 ， 已 解析 为 一 个 XML 或 HTML Document 对 象 ， 如 果 响 
应 主体 还 没有 束 绪 或 不 是 一 个 有 效 的 XML 或 HTML 文 档 则 为 null 。 


readonly unsigned short status 


服务 器 返回 的 HITP 状 态 码 ， 比 如 200 代 表 成 功 ，404 人 代表“ 页 面 未 找 
到 ”错误 ， 如 果 服 务 器 还 设 有 设置 状态 码 则 为 0。 


readonly string statusText 


这 个 属性 使 用 名 字 而 不 是 数字 来 指定 请 求 的 HTTP 状 态 码 。 就 十 说 ， 当 
状态 为 200 时 它 将 是 "OK"， 状 态 是 404 时 它 将 是 "Not Found"。 如 果 服 务 
亏 还 没有 设置 状态 码 ， 这 个 属性 将 为 至 字符 串 。 


unsigned long timeout 


这 个 XHR2 属 性 指定 一 个 超时 时 间 ， 单 位 为 宫 秒 。 如 末 HTTP 请 求 花费 
的 时 间 超 过 这 个 时 间 ， 它 将 中 止 ， 同 时 触发 一 个 超时 事件 。 只 能 在 调 
用 open() 之 后 以 及 调用 send() 之 前 设置 这 个 属性 。 

readonly XMLHttpRequestUpload upload 


这 个 XHR2 属 性 指 代 一 个 XMLHttpRequestUpload 对 象 ， 该 对 象 定 义 一 系 
列 用 于 监视 HTTP 请 求 主体 上 传 进度 的 事件 处 理 程 序 注册 属性 。 


boolean withCredentials 


这 个 XHR2 属 性 指定 授权 凭证 是 否 应 该 包含 在 CORS 请 求 中 ， 以 及 CORS 
啊 应 中 的 cookie 头 信息 是 否 应 该 处 理 。 默 认 值 为 false。 

方法 

void abort() 


这 个 方法 将 当前 XMLHttpRequest 对 象 重 置 为 readyState 为 0 的 状态 ， 同 
时 取消 所 有 推迟 的 网 络 活 动 。 例 如 ， 如 有 果 一 个 请 求 占用 太 长 的 时 间 ， 
但 对 应 的 响应 已 经 不 再 需要 了 ， 就 可 以 调用 这 个 方法 。 


string getAllResponseHeaders() 


这 个 方法 返回 服务 器 发 送 的 HITP 响 应 头 信息 (过 滤 掉 cookie 及 CORS 尖 
信息 ) ， 如 果 头 信息 还 没 接收 到 则 为 null。 所 有 的 头 信息 以 一 个 单独 的 
字符 串 的 形式 返回 ， 每 行 一 个 头 信息 。 


string getResponseHeader(string header) 


返回 指定 名 字 的 HITP 啊 应 header， 如 果 该 啊 应 头 还 没有 接收 到 或 者 在 
或 啊 应 中 不 存在 指定 header 则 为 null。cookie 和 CORS 相 关 的 头 信息 已 过 
滤 ， 不 可 通过 这 个 方法 查询 。 如 果 响 应 包含 多 个 这 个 指定 名 字 的 头 ， 
则 返回 的 字符 串 将 包含 所 有 这 些 头 的 值 ， 多 个 值 之 间 使 用 一 个 逗号 和 
一 个 空格 连接 与 分 隔 。 


void open(string method,string url,[boolean async,string user,string pass]) 


这 个 方法 重 置 当 前 XMLHttpRequest 对 象 ， 并 保存 这 些 参数 ， 用 于 后 面 
的 send(0) 方 法 。 


method 为 用 于 请 求 的 HTTP 方 法 。 已 可 靠 实现 的 值 包括 GET、POST 以 
及 HEAD。 有 些 浏览 器 可 能 也 实现 了 CONNECT 、DELETE、 
OPTIONS、PUT、TRACE 以 及 TRACK 方 法 。 


ur 为 正在 请 求 的 URL。 相 对 URL 将 按 和 常规 方法 根据 包含 当前 脚本 的 文 
档 的 URL 解 析 。 同 源 安 全 策略 (参见 13.6.2 节 ) 要 求 这 个 URL 与 包含 发 
起 当前 请 求 的 脚本 的 文档 拥有 同样 的 主机 和 端口 。XHR2 人 允许 同文 持 
CORS 的 服务 袁 发 起 跨 域 请 求 。 

如 果 指 定 async 参 数 并 且 值 为 false， 则 请 求 将 为 同步 方式 ，send0 方 法 将 
阻塞 页 面 ， 直 到 啊 应 完成 。 除 非 是 在 Worker 中 使 用 XMLHttpRequest， 
否则 不 推荐 使 用 这 个 方法 。 


可 选 的 user 和 pass 参 数 指定 用 于 HTTP 请 求 的 用 户 名 和 和 密码。 


void overrideMimeTypel(string mime) 


这 个 方法 指明 使 用 指定 的 mime 类 型 (如果 包含 的 话 ， 还 有 字符 集 ) 而 
不 是 使 用 响应 的 头 信 息 中 的 Content-Type 来 解析 服务 器 的 响应 。 


void send(any body) 


这 个 方法 发 出 一 个 HTTP 请 求 。 如 果 之 前 没有 调用 过 open0， 或 更 一 般 
一 些 ， 如 果 readyState 不 是 1，send0 将 抛 出 一 个 异常 。 否 则 ， 它 将 发 起 
一 个 包含 以 下 内 容 的 HTTP 请 求 : 


用 open0 时 设置 的 HITP 方 法、URL 以 及 授权 赁 证 《如果 有 的 
二 O 


.之 前 调用 setRequestHeader0 定 义 的 请 求 头 信息 ， 如 果 有 的 话 。 


. 传 入 到 这 个 方法 的 body 参 数 。body 可 以 是 一 个 指定 请 求 主体 的 字符 串 
或 一 个 Document 对 象 ， 如 果 请 求 没有 主体 (例如 GET 请 求 束 不 会 有 主 
体 ) 也 可 以 省 略 或 为 nul。 在 XHR2 中 ， 主 体 也 可 以 是 一 个 
ArrayBuffer、 一 个 Blob 或 一 个 FormData 对 象 。 


如 果 之 前 调用 open() 时 的 async 参 数 为 false， 则 这 个 方法 将 阻塞 进程 ， 直 
到 readyState 为 4 并 且 服 务 右 的 啊 应 已 经 完全 接收 时 才 会 返回 。 人 否则 ， 
send0 将 立即 返回 ， 同 时 服务 器 的 啊 应 将 通过 事件 处 理 程序 提供 的 通知 
异步 地 处 理 。 


void setRequestHeader(string name,string value) 


setRequestHeader(0 指 定 一 个 HITP 请 求 头 信息 的 name 和 value， 二 者 将 包 
含 在 之 后 调用 sendO 时 发 起 的 请 求 中 。 这 个 方法 只 能 在 readyState 为 1 时 
调用 ， 即 在 调用 open0 之 后 ， 但 在 调用 send(0) 之 前 。 


如 采 指 定 name 的 头 信息 已 经 定义 了 ， 则 这 个 头 信息 的 者 值 将 是 它 之 前 
的 值 加 一 个 喜 号 、 一 个 衬 格 之 后 再 加 上 在 这 次 调用 中 指定 的 value。 


如 果 对 open0 的 调用 指定 了 授权 凭证 ， 则 XMLHttpRequest 将 目 动 发 送 一 
个 适当 的 Authorization 请 求 头 信息 。 不 过 ， 也 可 以 使 用 
setRequestHeader() 方 法 手动 奶 加 头 信 息 。 


XMLHttpRequest 目 动 设置 "Content-Length"、"Date"、"Referer" 以 
及 "User-Agent"， 不 允许 说 报 它们 。 还 有 一 些 其 他 头 信息 ， 包 括 与 
cookie 相 天 的 信息 ， 无 法 使 用 这 个 方法 来 设置 。 完 整 列 表 见 18.1 广 。 


事件 处 理 程序 


最 初 的 XMLHttpRequest 对 象 只 定义 了 一 个 事件 处 理 程序 属性 : 
onreadystatechange。XHR 2 用 一 系列 更 容易 使 用 的 进度 事件 处 理 程序 扩 
展 这 个 列表 。 可 通过 设置 这 些 属 性 或 使 用 EventTarget 的 方法 来 注册 事件 
处 理 程序 。XMLHttpRequest 事 件 总 是 分 发 到 XMLHttpRequest 对 象 本 
号 ， 它 们 不 会 冒 疱 ， 也 没有 可 供 取 消 的 默认 操作 。readystatechange 事 件 


有 一 个 关联 的 Event 对 象 ， 所 有 其 他 事件 类 型 有 一 个 关联 的 
ProgressEvent 对 象 。 


关于 可 用 于 监视 HTTP 上 传 进度 的 事件 列表 可 参见 upload 属 性 和 
XMLRequestUpload ° 


onabort 


当 一 个 请 求 中 止 时 触发 。 


onerror 
当 请 求 因 错误 失败 时 触发 。 注 意 ， 如 404 等 HTTP 状 态 码 不 会 造成 错 
误 ， 因 为 啊 应 仍然 成 功 地 完成 了 。 不 过 ， 解 机 URL 时 发 生 DNS 错 误 或 
一 个 无 限 循 环 的 重 定 回 都 将 引发 这 个 事件 。 

onload 

当 请 求 成 功 完成 时 触发。 

onloadend 


在 load、abort、error 或 timeout 事 件 之 后 当前 请 求 成 功 或 失败 时 触发 。 


onloadstart 
当 请 求 开 始 时 触发 。 
onprogress 


当 响 应 主体 正在 下 载 时 重复 触发 〈 约 每 50ms 一 次 ) 。 


onreadystatechange 
当 readyState 属 性 改变 时 触发 ， 当 啊 应 完成 时 这 个 事件 最 重要 。 
ontimeout 


当 timeout 属 性 指定 的 时 间 已 经 过 去 但 啊 应 依旧 没有 完成 时 触发 。 


XMLHttpRequestUpload 
EventIarget 


XMLHttpRequestUpload 对 象 定义 一 系列 事件 处 理 程序 注册 属性 ， 用 于 
监视 HTTP 请 求 主体 上 传 的 进度 。 在 实现 XMLHttpRequest Level 2 标准 
的 浏览 器 中 ， 每 个 XMLHttpRequest 对 象 都 有 一 个 指 代 这 类 对 象 的 
upload 属 性 。 要 监视 请 求 上 传 的 进度 ， 只 须 简单 地 将 这 个 属性 设置 为 一 
个 适当 的 事件 处 理 函 数 或 调用 EventTarget 方 法 。 注 意 ， 这 儿 定 义 的 上 传 
进度 事件 处 理 程序 和 XMLHttpRequest 自 己 定 义 的 下 载 进 度 事件 处 理 程 
序 完全 一 样 ， 除 了 在 这 个 对 象 中 没有 onreadystatechage 属 性 。 


事件 处 理 程序 
onabort 


当 上 传 中止 时 触发 。 


onerror 
当 上 传 因为 网 络 错误 失败 时 触发 。 
onload 

当 上 传 成 功 时 触发 。 

onloadend 


当 上 传 结 束 时 触发， 无 论 上 传 上 和 否 成 功 。loadend 事 件 总 是 跟 在 一 个 
load、abort、error 或 timeout 事 件 之 后 。 


onloadstart 
当 上 传 开始 时 触发 。 
onprogress 


上 传 过程 中 重复 触发 ( 约 每 50ms 一 次 ) 。 


ontimeout 


当 上 传 因为 XMLHttpRequest 超 时 而 中 止 时 触发 。 
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